Different types of imports

There are two types of import that confuses me. Today is the time to put an end to it.

August 30, 2024 • Code

There are two main types of exports: named exports and default exports.

Named Exports

When you use named exports, you can export multiple values from a module. Each value must be imported using its exact name, enclosed in curly braces {}.

Example of Named Export

// somewhere.js
export const ComponentA = () => {
  return <div>Component A</div>;
};

export const ComponentB = () => {
  return <div>Component B</div>;
};

Importing Named Exports

// anotherFile.js
import { ComponentA, ComponentB } from './somewhere';

Default Exports

When you use a default export, you can export a single value from a module. This value can be imported without curly braces and can be given any name during import.

Example of Default Export

// somewhere.js
const Component = () => {
  return <div>Default Component</div>;
};

export default Component;

Importing Default Exports

// anotherFile.js
import Component from './somewhere';

Combining Named and Default Exports

You can also combine named and default exports in the same module.

Example of Combined Exports

// somewhere.js
const DefaultComponent = () => {
  return <div>Default Component</div>;
};

const ComponentA = () => {
  return <div>Component A</div>;
};

const ComponentB = () => {
  return <div>Component B</div>;
};

export default DefaultComponent;
export { ComponentA, ComponentB };

Importing Combined Exports

// anotherFile.js
import DefaultComponent, { ComponentA, ComponentB } from './somewhere';