Exporting and importing components in React

Introduction

Exporting and importing lets you share parts of your React app between files. It helps keep code organized and reusable.

When you want to use a button component in multiple pages.

When you split a big component into smaller pieces for easier management.

When you want to share utility components like headers or footers across your app.

When you want to keep your code clean by separating components into different files.

Syntax

React

export default ComponentName;

// or

export { ComponentName };

// Importing
import ComponentName from './ComponentFile';

// or

import { ComponentName } from './ComponentFile';

Default export means you export one main thing from a file.

Named export lets you export multiple things from one file.

Examples

This exports the Button component as the default export.

React

function Button() {
  return <button>Click me</button>;
}

export default Button;

This exports Header as a named export.

React

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

This imports the default export Button from the Button file.

React

import Button from './Button';

function App() {
  return <Button />;
}

This imports the named export Header from the Header file.

React

import { Header } from './Header';

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

Sample Program

This example shows a Button component exported as default from Button.js. Then App.js imports and uses it inside a div with a heading.

React

/* Button.js */
import React from 'react';

export default function Button() {
  return <button>Click me</button>;
}

/* App.js */
import React from 'react';
import Button from './Button';

export default function App() {
  return (
    <div>
      <h2>My App</h2>
      <Button />
    </div>
  );
}

Important Notes

Always use the correct import style matching how the component was exported.

File paths in imports are relative and usually start with './' for the same folder.

Using default exports is simpler when you export one main component per file.

Summary

Exporting lets you share components between files.

Use default export for one main component, named export for multiple.

Import components with matching syntax to use them in your app.

Practice

1. What is the main reason to export a React component from a file?

easy

A. To make the component run faster

B. To hide the component from other files

C. To use the component in other files by importing it

D. To automatically style the component

Solution

1. Step 1: Understand the purpose of export

   Exporting a component allows it to be shared and used in other files.

2. Step 2: Connect export with import usage

   Without export, other files cannot import and use the component.

3. Final Answer:

   To use the component in other files by importing it -> Option C

4. Quick Check:

   Export shares components [OK]

Hint: Export lets you share components between files [OK]

Common Mistakes:

• Thinking export improves speed
• Believing export hides components
• Assuming export adds styles automatically

2. Which of the following is the correct syntax to export a React component as the default export?

easy

A. export MyComponent = () => Hello;

B. export default function MyComponent() { return Hello; }

C. default export MyComponent() { return Hello; }

D. export function default MyComponent() { return Hello; }

Solution

1. Step 1: Recall default export syntax

   The correct syntax is 'export default' followed by the function declaration.

2. Step 2: Check each option's syntax

   export default function MyComponent() { return
   Hello; } matches the correct syntax; others have invalid order or keywords.

3. Final Answer:

   export default function MyComponent() { return <div>Hello</div>; } -> Option B

4. Quick Check:

   Default export uses 'export default' [OK]

Hint: Default export starts with 'export default' [OK]

Common Mistakes:

• Placing 'default' after function name
• Using '=' with export incorrectly
• Mixing 'export' and 'default' order

3. Given these two files, what will be the output when App is rendered?

// Button.js
export function Button() { return <button>Click</button>; }
// App.js
import { Button } from './Button';
export default function App() { return <div><Button /></div>; }

medium

A. <div><button>Click</button></div>

B. Error: Button not found

C. <button>Click</button>

D. <div>Button</div>

Solution

1. Step 1: Understand named export and import

   Button is exported as a named export and imported with curly braces correctly.

2. Step 2: Analyze rendering in App component

   App renders a div containing the Button component, which returns a button element with text 'Click'.

3. Final Answer:

   <div><button>Click</button></div> -> Option A

4. Quick Check:

   Named export/import works = output includes button inside div [OK]

Hint: Named exports import with braces { } [OK]

Common Mistakes:

• Importing named export without braces
• Expecting Button text instead of button element
• Confusing default and named exports

4. What is wrong with this import statement?

import Button from './Button';

Given that Button.js contains:
export function Button() { return <button>Click</button>; }

medium

A. Button is a named export but imported as default

B. The file path is incorrect

C. Button component is not exported at all

D. The import statement is missing curly braces

Solution

1. Step 1: Check export type in Button.js

   Button is exported as a named export using 'export function Button'.

2. Step 2: Compare with import syntax

   Importing without braces means default import, but Button is not default exported.

3. Final Answer:

   Button is a named export but imported as default -> Option A

4. Quick Check:

   Named export must import with braces [OK]

Hint: Named exports need braces in import [OK]

Common Mistakes:

• Importing named export without braces
• Assuming default export without checking
• Ignoring export type in source file

5. You have two components in Widgets.js:

export function WidgetA() { return <div>A</div>; }
export function WidgetB() { return <div>B</div>; }

How should you import both components in Dashboard.js to use them?

hard

A. import WidgetA from './Widgets'; import WidgetB from './Widgets';

B. import WidgetA, WidgetB from './Widgets';

C. import * as Widgets from './Widgets';

D. import { WidgetA, WidgetB } from './Widgets';

Solution

1. Step 1: Identify export type in Widgets.js

   Both WidgetA and WidgetB are named exports.

2. Step 2: Choose correct import syntax for multiple named exports

   Use curly braces with both names inside: import { WidgetA, WidgetB } from './Widgets';

3. Final Answer:

   import { WidgetA, WidgetB } from './Widgets'; -> Option D

4. Quick Check:

   Multiple named exports import with braces and commas [OK]

Hint: Import multiple named exports with { A, B } [OK]

Common Mistakes:

• Trying to import multiple named exports as default
• Using separate default imports for each named export
• Using import * without accessing properties