React Importing and Exporting Components

Last Updated : 18 Dec, 2024

In React, importing and exporting components allows you to share and reuse code across different files. Components can be exported using either default or named exports, and then imported into other files to be used.

1. Default Export and Import

In React, you can use default exports to export a single component from a file. This is a simple way to export one component as the primary item from a file.

Exporting the Component:

// Button.js
import React from 'react';

const Button = () => {
    return <button>Click Me!</button>;
};

export default Button;  // Default export

Importing the Component

// App.js
import React from 'react';
import Button from './Button';  // Importing default export

const App = () => {
    return <Button />;
};

export default App;

Here, the Button component is exported as the default from Button.js. In App.js, it is imported without curly braces and can be named freely.

2. Named Export and Import

With named exports, you can export multiple components from a single file. When importing, you must use the exact name of the exported component inside curly braces.

Exporting Named Components

// Gallery.js
import React from 'react';

export const Profile = () => {
    return <img src="your-img-src" alt="Profile" />;
};

export const Gallery = () => {
    return (
        <section>
            <h1>Amazing Scientists</h1>
            <Profile />
            <Profile />
        </section>
    );
};

Importing Named Components:

// App.js
import React from 'react';
import { Profile, Gallery } from './Gallery';  // Importing named exports

const App = () => {
    return (
        <div>
            <Gallery />
            <Profile />
        </div>
    );
};

export default App;

In this example, both Profile and Gallery are exported as named exports from Gallery.js. When importing them in App.js, you must use curly braces and match the export names.

3. Combining Default and Named Exports

You can combine default and named exports in the same file. This allows you to export one primary component as default and other components as named exports.

Gallery.js with Both Exports:

// Gallery.js
import React from 'react';

export const Profile = () => {
    return <img src="your-img-src" alt="Profile" />;
};

const Gallery = () => {
    return (
        <section>
            <h1>Amazing Scientists</h1>
            <Profile />
            <Profile />
        </section>
    );
};

export default Gallery;  // Default export

App.js with Both Imports

// App.js
import React from 'react';
import Gallery, { Profile } from './Gallery';  // Importing default and named exports

const App = () => {
    return (
        <div>
            <Gallery />
            <Profile />
        </div>
    );
};

export default App;

In this case, Gallery is exported as the default export while Profile is exported as a named export. When importing, you use the default import syntax for Gallery and the named import syntax for Profile.

4. Exporting Multiple Components from the Same File

You might want to export several components from a single file. React allows you to use named exports for this purpose, and you can only have one default export per file.

Gallery.js with Multiple Exports

// Gallery.js
import React from 'react';

export const Profile = () => {
    return <img src="your-img-src" alt="Profile" />;
};

export const Gallery = () => {
    return (
        <section>
            <h1>Amazing Scientists</h1>
            <Profile />
            <Profile />
        </section>
    );
};

App.js with all the imports

// App.js
import React from 'react';
import { Profile, Gallery } from './Gallery';  // Importing multiple named exports

const App = () => {
    return (
        <div>
            <Gallery />
            <Profile />
        </div>
    );
};

export default App;

Here, both Profile and Gallery are exported as named exports from Gallery.js, and are imported accordingly in App.js.

When to Use Default Export

Use for a single primary functionality or component in a file.
When you want flexibility in naming during import.
Ideal for components or modules that represent the main purpose of the file.

When to Use Named Export

Use when exporting multiple functionalities or components from the same file.
When you want consistency in import names.
Useful for utility functions, constants, or multiple related components.

React Importing and Exporting Components – FAQ’s

Can I export multiple components from a single file?

Yes, you can use named exports to export multiple components from the same file.

Can a file have both default and named exports?

Yes, a file can have both default exports (one per file) and multiple named exports.

What’s the difference between default and named exports?

Default export is for exporting one primary component per file, while named export allows you to export multiple components or functions.

Can I import a component with a different name?

Yes, when importing a default export, you can give it any name. But for named exports, the import name must match the exported name.

When should I split my components into multiple files?

Split components when they grow too large or when you want to reuse them across different parts of your application. This helps maintain clean and manageable code.