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.