Payload Website Template

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

javascript
1// somewhere.js
2export const ComponentA = () => {
3  return <div>Component A</div>;
4};
5
6export const ComponentB = () => {
7  return <div>Component B</div>;
8};

Importing Named Exports

javascript
1// anotherFile.js
2import { 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

javascript
1// somewhere.js
2const Component = () => {
3  return <div>Default Component</div>;
4};
5
6export default Component;

Importing Default Exports

javascript

1// anotherFile.js

2import Component from './somewhere';

Combining Named and Default Exports

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

Example of Combined Exports

javascript
1// somewhere.js
2const DefaultComponent = () => {
3  return <div>Default Component</div>;
4};
5
6const ComponentA = () => {
7  return <div>Component A</div>;
8};
9
10const ComponentB = () => {
11  return <div>Component B</div>;
12};
13
14export default DefaultComponent;
15export { ComponentA, ComponentB };

Importing Combined Exports

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

Different types of imports

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