Scribd
Upload
40 views

Importing and Exporting Components

The document discusses exporting and importing React components from different files. It explains that components can be exported as default or named exports and imported accordingly. It provides an example where a Gallery component with nested Profile components is split into two files, with Gallery exported as the default and Profile exported as a named export, then both are imported and rendered in the App component. This allows greater reusability and modularity of the components.

Uploaded by

Aniket Jawade
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
40 views

Importing and Exporting Components

The document discusses exporting and importing React components from different files. It explains that components can be exported as default or named exports and imported accordingly. It provides an example where a Gallery component with nested Profile components is split into two files, with Gallery exported as the default and Profile exported as a named export, then both are imported and rendered in the App component. This allows greater reusability and modularity of the components.

Uploaded by

Aniket Jawade
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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="https://i.imgur.com/MK3eW3As.jpg"
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 App.js
into a new file called Gallery.js. Now you can change App.js
to import Gallery from Gallery.js:
import Gallery from './Gallery.js';
export default function App() {
return (
<Gallery />
);
}
Notice how this example is broken down into two
component files now:

1. Gallery.js:
• 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. App.js:
• Imports Gallery as a default import from Gallery.js.

• 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 './Gallery.js' 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
Gallery.js 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 Gallery.js using a named export (no


default keyword):
export function Profile() {
// ...
}

Then, import Profile from Gallery.js to App.js using a named


import (with the curly braces):

import { Profile } from './Gallery.js';

Finally, render <Profile /> from the App component:

export default function App() {


return <Profile />;
}

Now Gallery.js contains two exports: a default Gallery export,


and a named Profile export. App.js imports both of them. Try
editing <Profile /> to <Gallery /> and back in this example:
import Gallery from './Gallery.js';
import { Profile } from './Gallery.js';
export default function App() {
return (
<Profile />
);
}

Now you’re using a mix of default and named exports:

• Gallery.js:
• Exports the Profile component as a named export

called Profile.
• Exports the Gallery component as a default export.

• App.js:
• Imports Profile as a named import

called Profile from Gallery.js.


• Imports Gallery as a default import from Gallery.js.

• Exports the root App component as a default

export.

You might also like