When building React applications, we often break down our user interface into small, reusable pieces called components. Instead of writing all our components in one file, we place them in separate files to keep our code organized, easy to manage, and reusable. To use these components across different files, we need to understand the concept of importing and exporting.

In this lesson, we will explore how to properly export and import components in React, understand the differences between default and named exports, and learn when to use each approach.

Why Do We Need to Import and Export Components?

Before we dive into how to import and export components, it's important to understand why they’re essential in React development. Imagine you're working on a project with multiple UI elements, such as a header, footer, and navigation bar. If all these elements were written in a single file, your code would quickly become disorganized and harder to maintain.

By exporting components from their respective files and importing them where needed, we can:

• Keep our code clean and structured, making it easier to read and debug.
• Improve code reusability, allowing us to use the same component in different parts of our application.
• Simplify collaboration, as multiple developers can work on different components without conflicts.

Types of Exports in React

React provides two main ways to export components namely:

1. Default export
2. Named export

Each method has its own use case, and understanding them will help you write more efficient React code.

Default Export

A default export is used when you want to export a single component or function from a file. When you import a default export, you can name it anything you want, which makes it flexible when working with different projects.

Example

Let's say we are creating a simple Greeting component inside a file named Greeting.js. The component will return a heading that displays a welcome message.

function Greeting() {
  return <h1>Hello, welcome to React!</h1>;
}

export default Greeting;

In this example, we define the Greeting component and then export it as a default export using export default Greeting;.

Importing a Default Export

Now, if we want to use the Greeting component inside another file, such as App.js, we must import it first:

import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting />
    </div>
  );
}

export default App;

Here, we import the Greeting component using import Greeting from './Greeting'; and use it inside the App component. Notice that we did not use curly braces {} when importing, because it is a default export.

Since default exports allow us to import a component with any name, we could also write:

import MyGreeting from './Greeting';

and use <MyGreeting /> inside App.

However, it's best practice to keep the import name the same as the exported component name to avoid confusion.

Named Export

A named export is useful when we want to export multiple components, functions, or variables from the same file. Unlike default exports, when importing named exports, we must use the exact name inside curly braces {}.

Example of Named Exports

Let’s modify our Greeting.js file to export multiple components:

export function Greeting() {
  return <h1>Hello, welcome to React!</h1>;
}

export function Farewell() {
  return <h1>Goodbye, see you soon!</h1>;
}

In this case, we have two named exports: Greeting and Farewell. Both functions are prefixed with the export keyword, making them available for import in other files.

Importing Named Exports

To use these components in App.js, we must import them using curly braces {}:

import { Greeting, Farewell } from './Greeting';

function App() {
  return (
    <div>
      <Greeting />
      <Farewell />
    </div>
  );
}

export default App;

If we only need the Greeting component, we can import just that component:

import { Greeting } from './Greeting';

However, if we forget the curly braces and write:

import Greeting from './Greeting';

it will result in an error because Greeting.js does not have a default export; it only has named exports.

Combining Default and Named Exports

In some cases, we might want to export a default component and additional named exports from the same file. This allows us to have one main component while still providing extra functionalities.

Example of Combining Default and Named Exports

Lets look at an example that combines both methods of exporting:

function Greeting() {
  return <h1>Hello, welcome to React!</h1>;
}

export function Farewell() {
  return <h1>Goodbye, see you soon!</h1>;
}

export default Greeting;

In this file:

• Greeting is the default export.
• Farewell is a named export.

Importing Both Default and Named Exports

When importing, we can write:

import Greeting, { Farewell } from './Greeting';

function App() {
  return (
    <div>
      <Greeting />
      <Farewell />
    </div>
  );
}

export default App;

Here, Greeting is imported without curly braces because it is a default export, while Farewell is imported inside {} because it is a named export.

When to Use Default vs Named Exports

Both default and named exports are useful, but they serve different purposes:

1. Use a default export when a file contains only one primary component. This makes it easier to import without worrying about curly braces.

2. Use named exports when a file contains multiple related components or functions. This allows importing only the needed components instead of the entire file.

3. Use a mix of both when necessary. If a file has a main component but also includes helper functions, a combination of default and named exports might be appropriate.

Common Mistakes When Importing and Exporting

1. Forgetting to use curly braces when importing named exports:

   import Greeting from './Greeting'; // ❌ Incorrect if Greeting is a named export

   The correct way:

   import { Greeting } from './Greeting'; // ✅ Correct for named export

2. Using curly braces when importing a default export:

   import { Greeting } from './Greeting'; // ❌ Incorrect if Greeting is a default export

   The correct way:

   import Greeting from './Greeting'; // ✅ Correct for default export

3. Trying to import a non-exported component. If Farewell is not exported in Greeting.js, trying to import it will cause an error. Always make sure the component is correctly exported before importing.

Conclusion

Understanding how to properly import and export components in React is a crucial skill that makes your code cleaner and easier to manage.

By applying these concepts, you can build well-structured React applications and avoid common mistakes.