React Importing and Exporting Components (original) (raw)

Last Updated : 07 Aug, 2025

**In React, components are the building blocks of any **application. They allow developers to break down **complex user interfaces into **smaller, **reusable pieces.

Importing and exporting components refer to sharing and using components across different files in your application.
Exporting a component means making it available for use in other files. Importing a component means bringing it into another file to use it.
JavaScript's import and export syntax allows you to bring in functions, objects, and components from one file into another, creating a modular and maintainable codebase.
React follows JavaScript’s ES6 module system to handle imports and exports. You can have multiple components in separate files and import them when needed to make your code more modular and maintainable.

Types of Exports in React

**In React, there are two types of exports

Default Exports and Imports
Named Exports and Imports

1. Default Export and Import

A default export allows you to export a single component or variable from a file. When importing a default export, you can give it any name you choose.

App.js `

import React from "react"; import MyComponent from "./components/MyComponent";

const App = () => { return (

{/* Using the imported component */}

); };

export default App;

MyComponent.js

import React from "react";

const MyComponent = () => { return

Hello from MyComponent!

; };

export default MyComponent;

**Output

MyComponent

Default Export and Import

**In this code

**Default Export: Exports one thing from a file (like a component).
**Default Import: Imports the default export from another file, naming it as needed.

2. Named Export and Import

Named exports allow you to export multiple components or variables from a single file. When importing a named export, you must use the exact name of the exported entity.

App.js `

import { MyComponent, AnotherComponent } from "./components/component.js";

const App = () => { return (

); };

export default App;

component.js

export const MyComponent = () => { return

Hello from MyComponent!

; };

export const AnotherComponent = () => { return

Hello from AnotherComponent!

; };

**Output

named-export

Named Export and Import

**In this code

Here, two components (MyComponent and AnotherComponent) are exported individually using the export keyword.
This allows these components to be available for import in other files.
We import the specific components (MyComponent and AnotherComponent) from the components.js file using their exact names inside curly braces ({}).
This is called a Named Import because we are referring to the exact names of the exports.
Inside the App component, we use both imported components to render them.

3. Combining Default and Named Exports

You can also use both named and default exports in a single file. This is useful when you want to export a primary component (default export) and several utility components or functions (named exports).

App.js `

import { MyComponent, AnotherComponent } from "./components/component.js";

const App = () => { return (

); };

export default App;

component.js

// Named Export export const MyComponent = () => { return

Hello from MyComponent!

; };

// Another Named Export export const AnotherComponent = () => { return

Hello from AnotherComponent!

; };

// Default Export const DefaultComponent = () => { return

Hello from DefaultComponent!

; };

export default DefaultComponent;

**Output

combined

Combining Default and Named Exports

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.

App.js `

import React from "react"; import { Header, Footer } from "./components"; import MainContent from "./components";

const App = () => { return (

); };

export default App;

components.js

import React from "react";

// Component 1 export const Header = () => { return

Welcome to My Website

; };

// Component 2 export const Footer = () => { return

; };

// Component 3 (default export) export default function MainContent() { return

This is the main content of the website.

; }

**Output

multiple

Exporting Multiple Components from the Same File

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.

Best Practices for Importing and Exporting Components

**Use Default Exports for Primary Components: If a file contains a main component, it’s often a good idea to use default export. This makes it easy to import the primary component without specifying its name.
**Use Named Exports for Utilities and Helper Components: If you have multiple components or utility functions in a file, use named exports. This allows you to import only the necessary components.
**Be Consistent: Stick to a consistent pattern for exports and imports across your project. For example, always use default exports for primary components, and named exports for others.

Conclusion

**Importing and exporting components in **React is essential for building **modular and **maintainable applications. Understanding how to use **default exports and **named exports allows you to efficiently **organize and structure your **React code.

Import/Export Keywords in React