Skip to main content

Importing and Exporting Components

One component per file​

Convention: one main component per file (not required — a file can hold several). Splitting into files makes components reusable across the app.

Default vs named exports​

The part worth memorising is the two export styles and their matching import syntax.

Default export — one per file. The import name is free (I can call it anything), no braces.

default-export.jsx
export default function Button() {}   // export
import Button from './Button';        // import — any name, no braces

Named export — many per file. The import name must match exactly and sits in braces.

named-export.jsx
export function Button() {}           // export
import { Button } from './Button';    // import — exact name, in braces

Key point: a file can have one default export but many named ones — a default import can be called anything; a named import must match the exported name and sits in braces.

When to use which​

Rule of thumb: default export for the file's main component; named exports when a file intentionally exposes several.