Importing and Exporting Components
The magic of components lies in their reusability: you can
create components that are composed of other components.
But as you nest more and more components, it often makes
sense to start splitting them into different files. This lets you
keep your files easy to scan and reuse components in more
places.
The root component file
In Your First Component, you made a Profile component and
a Gallery component that renders it:
function Profile() {
return (
<img
src="[Link]
alt="Katherine Johnson"
/>
);
}
export default function Gallery() {
return (
<section>
<h1>Amazing scientists</h1>
<Profile />
<Profile />
<Profile />
</section>
);
}
Exporting and importing a component
What if you want to change the landing screen in the future
and put a list of science books there? Or place all the profiles
somewhere else? It makes sense to move Gallery and Profile
out of the root component file. This will make them more
modular and reusable in other files. You can move a
component in three steps:
1. Make a new JS file to put the components in.
2. Export your function component from that file (using
either default or named exports).
3. Import it in the file where you’ll use the component
(using the corresponding technique for
importing default or named exports).
Here both Profile and Gallery have been moved out of [Link]
into a new file called [Link]. Now you can change [Link]
to import Gallery from [Link]:
import Gallery from './[Link]';
export default function App() {
return (
<Gallery />
);
}
Notice how this example is broken down into two
component files now:
1. [Link]:
• Defines the Profile component which is only used
within the same file and is not exported.
• Exports the Gallery component as a default export.
2. [Link]:
• Imports Gallery as a default import from [Link].
• Exports the root App component as a default
export.
Note
You may encounter files that leave off the .js file extension
like so:
import Gallery from './Gallery';
Either './[Link]' or './Gallery' will work with React, though
the former is closer to how native ES Modules work.
DEEP DIVE
Default vs named exports
Show Details
Exporting and importing multiple components from the same
file
What if you want to show just one Profile instead of a
gallery? You can export the Profile component, too. But
[Link] already has a default export, and you can’t have
two default exports. You could create a new file with a
default export, or you could add a named export for Profile.
A file can only have one default export, but it can have
numerous named exports!
Note
To reduce the potential confusion between default and
named exports, some teams choose to only stick to one style
(default or named), or avoid mixing them in a single file. Do
what works best for you!
First, export Profile from [Link] using a named export (no
default keyword):
export function Profile() {
// ...
}
Then, import Profile from [Link] to [Link] using a named
import (with the curly braces):
import { Profile } from './[Link]';
Finally, render <Profile /> from the App component:
export default function App() {
return <Profile />;
}
Now [Link] contains two exports: a default Gallery export,
and a named Profile export. [Link] imports both of them. Try
editing <Profile /> to <Gallery /> and back in this example:
import Gallery from './[Link]';
import { Profile } from './[Link]';
export default function App() {
return (
<Profile />
);
}
Now you’re using a mix of default and named exports:
• [Link]:
• Exports the Profile component as a named export
called Profile.
• Exports the Gallery component as a default export.
• [Link]:
• Imports Profile as a named import
called Profile from [Link].
• Imports Gallery as a default import from [Link].
• Exports the root App component as a default
export.
