Importing and Exporting Components in React JS

Importing and Exporting Components is an important concept in React JS that helps developers organize code into separate files and reuse components throughout an application. Instead of writing all components in a single file, developers can export components from one file and import them into another file whenever needed.

Course Link: JustAcademy React JS Training Course

Demo Link: Register for React JS Course Demo

1. What Is Importing and Exporting in React?

React applications commonly use JavaScript modules to organize components, functions, constants, and other reusable code. The export keyword makes a value available outside its file, while the import keyword allows another file to use that exported value.

• Exporting: Making a component or value available to other files.
• Importing: Bringing an exported component or value into another file.
• Module: A JavaScript file that can export and import values.

Simple Example

Suppose you have two files: Header.jsx and App.jsx. You define and export the Header component from the first file, then import and render it in the second file.

Header.jsx

function Header() {
  return <h1>Welcome to React JS</h1>;
}
export default Header;

App.jsx

import Header from './Header.jsx';

function App() {
  return (
    <div>
      <Header />
    </div>
  );
}
export default App;

Result: The application displays “Welcome to React JS”. The Header component is defined in one file and reused in another.

2. What Is Exporting a Component?

Exporting a component means making it accessible to other JavaScript modules. React components can be exported using two main approaches: default exports and named exports.

2.1 Default Export

A default export is commonly used when a file has one primary component or value to provide. A module can have only one default export.

Example: Header.jsx

function Header() {
  return (
    <header>
      <h1>My Website</h1>
    </header>
  );
}
export default Header;

You can also declare a component and export it as the default in one statement.

export default function Header() {
  return <h1>My Website</h1>;
}

Explanation:

• function Header() defines a function component.
• The component returns JSX that describes the UI.
• export default Header makes Header the module's default export.

2.2 Named Export

A named export allows you to export a value using its declared name. A module can have multiple named exports.

Example: Components.jsx

export function Header() {
  return <h1>Website Header</h1>;
}

export function Footer() {
  return <footer>Website Footer</footer>;
}

export function Navbar() {
  return <nav>Home | About | Contact</nav>;
}

Explanation: The Header, Footer, and Navbar components are all named exports from the same file.

2.3 Exporting After Declaration

You can define multiple components first and export them together at the end of the file.

function Header() {
  return <h1>Header Section</h1>;
}

function Footer() {
  return <footer>Footer Section</footer>;
}

export { Header, Footer };

This approach is useful when you want to keep component declarations separate from the export statements.

3. What Is Importing a Component?

Importing a component means accessing an exported component from another file so that you can use it in your application.

3.1 Importing a Default Export

When importing a default export, do not use curly braces. The imported identifier can have a different name from the original exported identifier, although keeping the same name is usually clearer.

Header.jsx

export default function Header() {
  return <h1>Welcome to My Website</h1>;
}

App.jsx

import Header from './Header.jsx';

function App() {
  return <Header />;
}
export default App;

3.2 Importing a Named Export

When importing a named export, use curly braces and match the exported name.

Components.jsx

export function Header() {
  return <h1>Website Header</h1>;
}

export function Footer() {
  return <footer>Website Footer</footer>;
}

App.jsx

import { Header, Footer } from './Components.jsx';

function App() {
  return (
    <div>
      <Header />
      <Footer />
    </div>
  );
}
export default App;

Important: Named imports must match the exported names unless you explicitly use an alias.

3.3 Importing a Named Export with an Alias

You can rename a named import using the as keyword.

import { Header as WebsiteHeader } from './Components.jsx';

function App() {
  return <WebsiteHeader />;
}
export default App;

Here, Header is the exported name, and WebsiteHeader is the local name used in App.jsx.

4. Difference Between Default and Named Exports

Remember: A default export and named exports can coexist in the same file. However, a module cannot have two default exports.

5. Importing and Exporting Multiple Components

React applications often contain multiple reusable components, such as Header, Navbar, Sidebar, Content, and Footer. Related components can be exported from one file and imported wherever needed.

Components.jsx

export function Header() {
  return <header><h1>My Website</h1></header>;
}

export function Navbar() {
  return <nav>Home | Services | Contact</nav>;
}

export function Content() {
  return <main><p>Welcome to our website.</p></main>;
}

export function Footer() {
  return <footer><p>Copyright 2026</p></footer>;
}

App.jsx

import { Header, Navbar, Content, Footer } from './Components.jsx';

function App() {
  return (
    <div>
      <Header />
      <Navbar />
      <Content />
      <Footer />
    </div>
  );
}
export default App;

Result: The application displays the header, navigation bar, main content, and footer in the order defined inside App.

6. Using Default and Named Exports in the Same File

A module can have one default export and several named exports. This can be useful when one component is the main component and other components are also shared.

Components.jsx

export function Header() {
  return <header>Website Header</header>;
}

export function Footer() {
  return <footer>Website Footer</footer>;
}

export default function Layout() {
  return (
    <div>
      <Header />
      <main>Main Content</main>
      <Footer />
    </div>
  );
}

App.jsx

import Layout, { Header, Footer } from './Components.jsx';

function App() {
  return (
    <div>
      <Layout />
      <Header />
      <Footer />
    </div>
  );
}
export default App;

Explanation: Layout is imported without curly braces because it is the default export. Header and Footer are imported with curly braces because they are named exports.

7. Importing Components from Different Folders

As a React application grows, developers often organize components into folders. Import paths must correctly point to the file that exports the required component.

Example Folder Structure

src/
  components/
    Header.jsx
    Footer.jsx
    Navbar.jsx
  pages/
    Home.jsx
  App.jsx
  main.jsx

Importing a Component

Inside App.jsx, if Header.jsx is located in the components folder, use the following import:

import Header from './components/Header.jsx';
import Footer from './components/Footer.jsx';

function App() {
  return (
    <div>
      <Header />
      <main>Home Page</main>
      <Footer />
    </div>
  );
}
export default App;

Path explanation:

• ./ refers to the current directory.
• ../ refers to the parent directory.
• ./components/Header.jsx points to Header.jsx inside the components folder relative to App.jsx.

Depending on your project's tooling, the file extension may be optional. Using an explicit extension can make the file path easier to understand.

8. Importing Components Using a Barrel File

A barrel file re-exports components from several files through a single entry point. It can simplify import statements in larger applications.

Folder Structure

src/
  components/
    Header.jsx
    Footer.jsx
    index.js
  App.jsx

Header.jsx

export default function Header() {
  return <header>Website Header</header>;
}

Footer.jsx

export default function Footer() {
  return <footer>Website Footer</footer>;
}

components/index.js

export { default as Header } from './Header.jsx';
export { default as Footer } from './Footer.jsx';

App.jsx

import { Header, Footer } from './components/index.js';

function App() {
  return (
    <div>
      <Header />
      <main>Main Content</main>
      <Footer />
    </div>
  );
}
export default App;

This pattern is optional. For small projects, importing components directly from their files is often simpler.

9. Exporting and Importing Utility Functions

JavaScript modules can export more than React components. They can also export utility functions, constants, and other reusable values.

utils.js

export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

export const appName = 'React Learning App';

App.jsx

import { add, multiply, appName } from './utils.js';

function App() {
  return (
    <div>
      <h1>{appName}</h1>
      <p>Addition: {add(5, 3)}</p>
      <p>Multiplication: {multiply(5, 3)}</p>
    </div>
  );
}
export default App;

Output: The page displays the app name, addition result 8, and multiplication result 15.

Utility functions should perform their intended tasks independently of component rendering when possible.

10. Importing CSS Files into Components

React projects commonly import CSS files to style components. The exact behavior depends on the project's build tool or framework.

Header.jsx

import './Header.css';

export default function Header() {
  return (
    <header className="site-header">
      <h1>React Learning</h1>
    </header>
  );
}

Header.css

.site-header {
  padding: 20px;
  background-color: #2563eb;
  color: white;
  text-align: center;
}

The CSS file is imported into the component module, and the className attribute connects the JSX element to the CSS selector.

11. Common Import and Export Errors

12. Best Practices for Importing and Exporting Components

• Use clear, descriptive names for components and files.
• Use one default export per file at most.
• Use named exports when a module intentionally exposes multiple related values.
• Keep import and export styles consistent within a project where practical.
• Verify the import path and filename capitalization.
• Keep components organized into logical folders.
• Avoid exporting internal components unless they need to be reused elsewhere.
• Prefer meaningful component names instead of anonymous default-exported arrow functions, which can make debugging harder.
• Use relative imports correctly and understand the difference between ./ and ../.
• Use a barrel file only when it improves code organization.
• Do not confuse exporting a component with rendering it; a component must also be used in the React component tree to appear in the UI.

13. Complete Practical Example: Website Layout

This example demonstrates how to create separate component files and combine them in the main App component.

Folder Structure

src/
  components/
    Header.jsx
    Navbar.jsx
    Footer.jsx
  App.jsx

Header.jsx

export default function Header() {
  return (
    <header>
      <h1>My React Website</h1>
    </header>
  );
}

Navbar.jsx

export default function Navbar() {
  return (
    <nav>
      <a href="#home">Home</a> | 
      <a href="#about">About</a> | 
      <a href="#contact">Contact</a>
    </nav>
  );
}

Footer.jsx

export default function Footer() {
  return (
    <footer>
      <p>Copyright 2026 - My React Website</p>
    </footer>
  );
}

App.jsx

import Header from './components/Header.jsx';
import Navbar from './components/Navbar.jsx';
import Footer from './components/Footer.jsx';

function App() {
  return (
    <div>
      <Header />
      <Navbar />
      <main id="home">
        <h2>Welcome</h2>
        <p>This website uses reusable React components.</p>
      </main>
      <Footer />
    </div>
  );
}
export default App;

How It Works

1. Header.jsx defines and default-exports the Header component.
2. Navbar.jsx defines and default-exports the Navbar component.
3. Footer.jsx defines and default-exports the Footer component.
4. App.jsx imports all three components using their file paths.
5. App renders the components in the required order.

Result: The page displays a header, navigation links, main content, and footer.

14. Interview Questions and Answers

Q1. What is the purpose of importing and exporting in React?

Importing and exporting allow developers to organize code across modules and reuse components, functions, and values in different files.

Q2. What is a default export?

A default export is the primary exported value of a module. A module can have at most one default export.

Q3. What is a named export?

A named export exposes a value under a specific name. A module can have multiple named exports.

Q4. What is the difference between default and named imports?

A default import does not use curly braces, while a named import uses curly braces and normally matches the exported identifier.

Q5. Can a file have multiple default exports?

No. A JavaScript module can have only one default export, but it can have multiple named exports.

Q6. Can default and named exports be used together?

Yes. A module can have one default export and multiple named exports.

Q7. Why do we use separate component files?

Separate files improve organization, readability, maintainability, and reuse as an application grows.

Q8. What does the as keyword do in an import statement?

It allows a named export to be imported under a different local name.

Q9. What is a relative import path?

A relative import path identifies a module in relation to the current file, using prefixes such as ./ or ../.

Q10. What is a barrel file?

A barrel file re-exports values from multiple modules through one entry point, simplifying some import statements.

Q11. Does exporting a component automatically display it on the page?

No. Exporting makes it available to other modules. It must also be imported and rendered in the React component tree to appear in the UI.

Q12. Can utility functions be exported from a JavaScript file?

Yes. JavaScript modules can export functions, constants, components, and other values.

15. Revision Checklist

• Understand JavaScript modules and the purpose of import/export.
• Know how to create a default export.
• Know how to create named exports.
• Understand the correct syntax for default and named imports.
• Know how to import multiple components from one file.
• Understand how default and named exports can coexist.
• Know how to import components from folders using relative paths.
• Understand aliases and barrel files.
• Know how to import CSS and utility functions.
• Recognize and troubleshoot common import/export errors.
• Practice combining components into a complete page.

16. Official React Documentation

• Importing and Exporting Components - React Documentation
• Your First Component - React Documentation
• Describing the UI - React Documentation

Conclusion

Importing and Exporting Components helps developers create modular, reusable, and maintainable React applications. Understanding default exports, named exports, import syntax, file paths, and component organization makes it easier to manage projects as they grow.

To continue learning React JS, visit the JustAcademy React JS Training Course or register for a React JS course demo.