Exporting and importing components in React - Step-by-Step Execution

Concept Flow - Exporting and importing components

Create Component File

↓

Export Component

↓

Import Component in Another File

↓

Use Component in JSX

↓

Render Component in App

This flow shows how a React component is created, exported, imported, and then used in another file to render on screen.

Execution Sample

React

export function Greeting() {
  return <h1>Hello!</h1>;
}

import { Greeting } from './Greeting';

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

Defines a Greeting component, exports it, imports it in App, and uses it to render a heading.

Execution Table

Step	Action	File	Result	Rendered Output
1	Define Greeting component	Greeting.js	Function Greeting created	No output yet
2	Export Greeting component	Greeting.js	Greeting exported as named export	No output yet
3	Import Greeting in App	App.js	Greeting imported from Greeting.js	No output yet
4	Use <Greeting /> in App JSX	App.js	App component returns <Greeting />	No output yet
5	Render <App /> in root	index.js	App component rendered	<h1>Hello!</h1> displayed on screen

💡 Rendering completes with Greeting component output shown inside App

Variable Tracker

Variable	Greeting.js Start	After Export	App.js After Import	After Render
Greeting	Function defined	Exported as named	Imported as named	Used in JSX, renders <h1>Hello!</h1>

Key Moments - 3 Insights

Why do we export the component?

Exporting makes the component available to other files. Without export, import in App.js would fail (see execution_table step 2 and 3).

What happens if we import without curly braces?

Curly braces are needed for named exports. Without them, React looks for a default export and will error (see execution_table step 3).

Can we use the component before importing it?

No, the component must be imported before use. The import step (3) must happen before using <Greeting /> in JSX (step 4).

Visual Quiz - 3 Questions

Look at the execution table, at which step is the Greeting component made available to App.js?

A Step 2: Export Greeting component

B Step 1: Define Greeting component

C Step 4: Use <Greeting /> in App JSX

D Step 5: Render <App /> in root

💡 Hint

Check the 'Result' column in step 2 where Greeting is exported.

According to the variable tracker, what is the state of Greeting after import in App.js?

A Function defined but not imported

B Used in JSX but not imported

C Imported as named export

D Exported as default

💡 Hint

Look at the 'App.js After Import' column for Greeting variable.

If we remove the export keyword from Greeting.js, what will happen at step 3 in the execution table?

A Greeting will render anyway

B Import will fail because Greeting is not exported

C Import will succeed as default export

D No change in behavior

💡 Hint

Refer to key moment about export necessity and step 3 import action.

Concept Snapshot

Exporting and importing React components:
- Use 'export' to share a component from its file.
- Use 'import { Component } from "./file"' to bring it in.
- Use the component in JSX like <Component />.
- Named exports require curly braces in import.
- Default exports do not use curly braces.

Full Transcript

This lesson shows how to share React components between files. First, you create a component function, then export it using 'export'. In another file, you import it using curly braces for named exports. Then you use the component in JSX to render it. The execution table traces these steps from defining, exporting, importing, using, and finally rendering the component. Key points include the need to export to import, the syntax difference between named and default exports, and the order of import before use. The visual quiz tests understanding of these steps and common mistakes.

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