ES Modules Import/Export in React Explained With Examples
Imports and exports are everywhere in React. Here is how ES modules work, the difference between default and named, and the mistakes to avoid.
ES Modules Import/Export in React Explained With Examples
Every React file is full of import and export statements. Understanding ES modules prevents a surprising number of beginner errors.
What ES Modules Are
ES modules are the standard way to split JavaScript into files and share code between them. You export from one file and import into another. React projects rely on this everywhere.
Default Exports
A file can have one default export. You import it without curly braces and can name it whatever you want. React components are often default exported.
Named Exports
A file can have many named exports. You import them inside curly braces, and the names must match. Utility functions and constants are often named exports.
The Common Mistake
Importing a named export without curly braces, or a default export with curly braces, causes errors. You must match the export style when importing.
Mixed Exports
A file can have both a default and named exports. Import the default without braces and the named ones with braces in the same statement.
Re-exports
You can re-export from an index file to create a clean public interface for a folder. This is common in larger React projects to keep import paths tidy.
Importing Styles and Assets
In React with a bundler, you can import CSS and images as well. The bundler handles them as part of the dependency graph.
The Takeaway
Know the difference between default and named exports. Match the export style when importing, use named exports for utilities, and use index files to keep import paths clean.
A file can have one default export, imported without curly braces and renameable. A file can have many named exports, imported inside curly braces with names that must match. You must import using the matching export style.
Usually because you used the wrong export style. If the component is a default export, import it without curly braces. If it is a named export, import it with curly braces. Mixing the two causes import errors.
Yes. A file can have one default export and multiple named exports. You import the default without braces and the named ones with braces, in the same statement if you want.
To re-export from a folder and create a clean public interface. Instead of importing from deep paths, you import from the folder, which keeps import paths tidy as the project grows.
Yes. With a bundler, you can import CSS and image files. The bundler handles them as part of the dependency graph, processing and referencing them appropriately.
Ready to master React completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
Master React
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course.