Importing and Exporting React Components

Full-project lesson · needs Node.js, npm and real project files, so it does not run in the in-page playground.

In a real project each component lives in its own file. You share components between files with JavaScript modules: export in one file and import in another. If modules are new to you, read JavaScript Modules and Export and Import first.

A component in its own file

Create the file src/components/Greeting.jsx:

1
2
3
4
5

function Greeting() {
  return <p>Hello from its own file!</p>
}

export default Greeting

export default makes Greeting the main export of the file. Now import it in src/App.jsx:

1
2
3
4
5
6
7
8
9
10
11
12

import Greeting from './components/Greeting.jsx'

function App() {
  return (
    <main>
      <h1>My React App</h1>
      <Greeting />
    </main>
  )
}

export default App

The path starts with ./, which means “from this file’s folder”. The extension (.jsx) is included, as the Vite template does for App.jsx. Vite also resolves the import without the extension.

Default exports and named exports

There are two kinds of export, and you will see both.

Default export: one per file. You choose the name when you import.

1
2
3
4
5
6
7

// Button.jsx
export default function Button() {
  return <button>Click</button>
}

// App.jsx
import Button from './Button.jsx'

Named export: many per file. You must import them by their exact name, in braces.

1
2
3
4
5
6
7

export function SaveButton() {
  return <button>Save</button>
}

export function CancelButton() {
  return <button>Cancel</button>
}

1
2
3
4
5
6
7
8
9
10
11
12

import { SaveButton, CancelButton } from './components/Buttons.jsx'

function App() {
  return (
    <div>
      <SaveButton />
      <CancelButton />
    </div>
  )
}

export default App

Which one should I use?

Both work. Pick one rule and keep it. A common approach: one component per file, default export, file name equal to the component name (Greeting.jsx exports Greeting). Named exports are handy for files that hold several small related components, and they make renaming safer because the name is checked on import.

Folder habits

1
2
3
4
5
6
7

src/
├── App.jsx
├── main.jsx
└── components/
    ├── Greeting.jsx
    ├── Buttons.jsx
    └── Header.jsx

For bigger apps, see Organizing Components.

Common mistakes

• Importing a default export with braces. import { Greeting } from ... gives undefined for a default export. Use import Greeting from ....
• Wrong path. ./Greeting.jsx and ./components/Greeting.jsx are different files. Check the folder.
• Case mismatch. greeting.jsx and Greeting.jsx are different names on Linux servers, even if Windows hides it. Match the case exactly.
• Forgetting export. The error says the file “does not provide an export named …”.
• A component file that also exports other things. The Oxlint rule in the template warns when a file exports components together with non-components, because it can break fast refresh.

Key points

• Put each component in its own file and share it with export and import.
• Default export: import X from. Named export: import { X } from.
• Keep file names, component names and your export style consistent.