In React (and JavaScript in general), there are several ways to export components or modules from a file. Here's a breakdown of the different types of exports you can use:
| Type | Example | Import Syntax |
|---|---|---|
| Named Export | export const MyComponent = {...}; |
import { MyComponent } from './file'; |
| Default Export | export default MyComponent; |
import MyComponent from './file'; |
| Named + Default | export const A = () => {...}; export default B; |
import B, {A} from './file'; |
| Inline Export | export default () => <div>...</div>; |
import DefaultComponent from './file'; |
| Re-export | export { MyComponent } from './MyComponent'; |
import { MyComponent } from './file'; |
| Aggregate Export | export { MyComponent, Another Component }; |
import { MyComponent, Another Component } from './components'; |
| Named Export with Alias | export { Original Component as MyComponent }; |
import { MyComponent } from './file'; |
1. Named Exports
Named exports allow you to export multiple variables, functions, or components from a single file. When importing, you need to use the same names as the exports.
Example:
// File: MyComponent.js
export const MyComponent = () => {
return <div>Hello World</div>;
};
export const AnotherComponent = () => {
return <div>Another Component</div>;
};
Importing:
import { MyComponent, AnotherComponent } from './MyComponent';
2. Default Exports
A default export allows you to export a single value or component from a file. The import statement does not require curly braces, and you can name the imported value anything you like.
Example:
// File: MyComponent.js
const MyComponent = () => {
return <div>Hello World</div>;
};
export default MyComponent;
Importing:
import MyComponent from './MyComponent';
3. Combining Named and Default Exports
You can use both named a nd default exports in the same file.
Example:
// File: MyComponents.js
export const AnotherComponent = () => {
return <div>Another Component</div>;
};
const MyComponent = () => {
return <div>Hello World</div>;
};
export default MyComponent;
Importing:
import MyComponent, { AnotherComponent } from './MyComponents';
4. Exporting Inline
You can export functions, classes, or variables directly at the point of definition.
Example:
// File: MyComponent.js
export const MyComponent = () => {
return <div>Hello World</div>;
};
export default () => {
return <div>Anonymous Default Component</div>;
};
Importing:
import DefaultComponent, { MyComponent } from './MyComponent';
5. Re-exporting
You can re-export from other modules to consolidate imports and exports.
Example:
// File: index.js
export { default as MyComponent } from './MyComponent';
export { AnotherComponent } from './AnotherComponent';
Importing:
import { MyComponent, AnotherComponent } from './path/to/index';
6. Aggregating Exports
You can also aggregate exports from multiple modules into one file.
Example:
// File: components/index.js
export { default as MyComponent } from './MyComponent';
export { AnotherComponent } from './AnotherComponent';
Importing:
import { MyComponent, AnotherComponent } from './components';
7. Named Export with Aliases
You can also rename exports using aliases.
Example:
// File: MyComponent.js
const OriginalComponent = () => {
return <div>Original Component</div>;
};
export { OriginalComponent as MyComponent };
Importing:
import { MyComponent } from './MyComponent';
This guide should give you a thorough understanding of how to export and import components in React, allowing you to organize and structure your code efficiently.
Top comments (0)