A File for Each Component

Real React apps keep each component in a file of its own, named after the component: Header in Header.jsx, Footer in Footer.jsx. Files stay short, you find a component by the name of its file, and one component can be used in several places of the app.

Each such file is a module: a part of the program with its own variables and functions. What you create in a module exists only in that module, so App.jsx can't see a function written in Header.jsx. For App to use Header, two things are needed:

1. Header.jsx exports the component, that is, offers it to other files. That's what export default in front of the function does.
2. App.jsx imports it with a line at the top of the file.

// Header.jsx
export default function Header() {
    return (
        <header>
            <h1>Summer Sounds</h1>
            <p>Friday and Saturday, three stages</p>
        </header>
    );
}

// App.jsx
import Header from "./Header.jsx";

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

default means it's the file's main thing, and a file has at most one. The name after import is the name the component gets in App.jsx. You could choose any, but use the component's name, so that everyone knows what it is.

The text in quotes is where the file is. ./ means "the folder this file is in", so "./Header.jsx" is the file Header.jsx next to App.jsx. It works like addresses in HTML: "./components/Header.jsx" would be in the folder components, and "../Header.jsx" one folder up. A name without ./, such as "react", isn't one of your files: it's a package, code that someone else wrote and that's installed in the project.

Now you can read all of main.jsx: it imports createRoot from the package react-dom/client (the curly braces come in the next exercise), App from App.jsx, and style.css, the stylesheet. An import of a stylesheet puts its styles into the page.

This exercise has two new files, Header.jsx and Footer.jsx, and both are empty. Their tabs are above the editor. Lineup stays in App.jsx for now; it gets a file of its own later in this lesson.

Typical mistakes:

• Without export default, the page is empty, and the console says Element type is invalid: … but got: object. You likely forgot to export your component from the file it's defined in…
• Without the import line: ReferenceError: Header is not defined.
• Without ./, the red message under the preview says that the package "Header.jsx" can't be imported. With a name spelled differently from the file's, such as "./header.jsx", it says there's no such file.