React Export and Import Function components

It is essential to understand the proper way to export and import function components if you need to use other files of your application.

So, In this tutorial, we will see How to use the import and export for a single component & multiple components step by step.

Export and Import Function Components

In React, you can export & import function components in various ways depending on your project structure and needs.

Here are some important ways explained that will be very useful.

1. Default Export and Import

To export a function component as a default export, you have to use the export default syntax.

This means that when you import this component in another file, you can keep any name for the imported component.

To Export –

To export the function component, You can declare export default at the last line of code.

function DeveloperProfile() {
    return <h3>Web Developer</h3>
} 
export default DeveloperProfile;

You can also declare export default with a component name

export default function DeveloperProfile() {
    return <h3>Web Developer</h3>
}

To Import

import Dev from './DeveloperProfile';

import Developer from './DeveloperProfile';

2. Named Export and Import

You can also export a function component with a specific name. This is useful when you want to export multiple components from a single file.

To Export,

We have two function components, DeveloperProfile and DesignerProfile both of which are being exported using named exports.

File Name – Profile.js

export function DeveloperProfile() {
    return <h3>Web developer</h3>
} 

export function DesignerProfile() {
    return <h3>Web Designer</h3>
} 

To Import

we import the DeveloperProfile and DesignerProfile using named imports from the Profile.js file and then use them within the AnotherComponent common

import { DeveloperProfile, DesignerProfile } from './Profile';

Note –

Remember that when using named exports, you must use the exact names of the exported components within curly braces {} during the import statement.

3. Combined Named and Default Exports

You can also export function multiple function components by using both a default export and named exports from the same file.

This can be useful when you have a primary component to export as default and additional helper components to export by name.

To Export

File Name – Developer.js

export function DeveloperProfile() {
    return <h3>Web developer</h3>
} 

export default function Developer() {
   return <h1>All Developers</h1>
}

To import

You can import the default export

import Developer from './Developer';

You can import the named export

import {DeveloperProfile} from './DeveloperProfile';

4. Using index.js for Re-exports:

In some cases, you may have a folder containing multiple components, and you want to simplify imports by using a index.js file to re-export the components.

This way, you can import components directly from the folder without specifying individual file paths.

components/
  |__Developer.js
  |__DeveloperProfile.js
  |__DesignerProfile.js
  |__index.js

You can re-export all function components of the component folder in the index.js file

export { default as Developer } from './Developer';
export { DeveloperProfile } from './DeveloperProfile';
export { DesignerProfile } from './DesignerProfile';

You can import all function components –

export { Developer, DeveloperProfile, DesignerProfile } from './components';