React Export and Import Class Components

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

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

Export and Import Class Components

In React, you can export & import class 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 class 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 class component, You can declare export default at the last line of code.

import React from './react';
class DeveloperProfile extends React.component  {
    return <h3>Web Developer</h3>
} 
export default DeveloperProfile;

You can also declare export default with a class component name

import React from './react';
export default class DeveloperProfile extends React.component {
    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 class component with a specific name. This is useful when you want to export multiple class components from a single file.

To Export,

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

File Name – Profile.js

import React from './react';
export class DeveloperProfile extends React.Component {
    return <h3>Web developer</h3>
} 

export class DesignerProfile extends React.Component {
    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 class components within curly braces {} during the import statement.

3. Combined Named and Default Exports

You can also export class 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

import React from './react';
export class DeveloperProfile extends React.Component {
    return <h3>Web developer</h3>
} 

export default class Developer extends React.component {
   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';