Understanding Export and Import in JavaScript and React
In JavaScript and React, export and import allow you to structure code across files, making it modular, organized, and reusable. Let's go over how each type of export works, the advantages, and best practices.
What is Export?
The export keyword is used to make functions, variables, or classes accessible in other files. This helps in creating a modular structure where each file has a specific responsibility, making the code more maintainable and easier to debug.
Types of Exports:
1. Default Export
A default export allows a module to export a single item, which can be a function, a class, or an object. Since there’s only one default export per file, it simplifies importing by removing the need for braces around the imported name.
// File: Header.jsx
const Header = () => {
return (
<h1>Welcome to My Website</h1>
);
}
export default Header; // Default export of the Header component
Benefits of Default Export:
- Easy to import without curly braces.
- Clear intent that this module focuses on a single main item.
- Useful for large components or modules where a single default export makes sense.
2. Named Export
Named exports allow you to export multiple items from a single file. By wrapping each exported item in curly braces, you can selectively import only what’s needed.
// File: Footer.jsx
export const Footer = () => {
return (
<footer>© 2024 My Website</footer>
);
}
export const Header = () => {
return (
<h1>Header Title</h1>
);
}
Benefits of Named Export:
- Allows exporting multiple functions, variables, or classes from one file.
- Helps in organizing related items together, especially for utility functions or components.
- Enables selective imports, which can reduce file size and improve performance by importing only what's needed.
3. Mixed Export
A file can have both a default export and named exports, known as a mixed export. This allows the main feature to be a default export, while supporting functions or variables can be named exports.
// File: Blog.jsx
const Blog = () => {
return <p>This is a blog post.</p>;
}
export const Comments = () => {
return <p>This is a comment.</p>;
}
export const Likes = () => {
return <p>This is a like.</p>;
}
export default Blog; // Default export of Blog component
Benefits of Mixed Export:
- Combines the simplicity of a default export with the flexibility of named exports.
- Ideal when there’s a primary item (default export) and several supporting utilities or components (named exports) in the same module.
What is Import?
Import is used to bring in code from other files that have been exported. Depending on whether it’s a default, named, or mixed export, the syntax will vary.
Importing Default Exports
Default exports are imported without using curly braces. This makes importing more straightforward.
// Importing a default export
import Header from './components/Header';
Importing Named Exports
Named exports require using curly braces {} around the items being imported. Each item’s name must match the exported name.
// Importing named exports
import { Footer, Header } from './components/Footer';
Importing Mixed Exports
When a module has both default and named exports, you can import both in the same statement. The default import is placed first, followed by named imports in curly braces.
// Importing both default and named exports
import Blog, { Comments, Likes } from './components/Blog';
In Summary:
- Default exports are for exporting a single primary item and are imported without braces.
- Named exports allow exporting multiple items and require braces around imports.
- Mixed exports give you flexibility to have one main export and multiple named exports.
