Summary

In this lesson, you learned that:

• A page is split into components, one for each part, and App puts them together like a table of contents. A component's name starts with a capital letter, and it's used as a tag: <Header />.
• Each component usually lives in a file of its own, named after it: Header.jsx. A file is a module: what's in it exists only there, unless the file exports it.
• export default function Header() exports the file's main thing. import Header from "./Header.jsx"; imports it, without curly braces, under a name you choose.
• export function FridayTicket() is a named export, and a file can have many. import { FridayTicket, WeekendTicket } from "./Tickets.jsx"; imports them, with curly braces, under their exact names.
• ./ in a path is the folder of the file with the import, and ../ is one folder up. A name without them, such as "react", is a package.
• A missing export or an import with the wrong braces gives Element type is invalid in the console, a missing import gives ReferenceError: … is not defined, and a wrong path shows in the red message under the preview.
• Components can use other components, and together they make a tree. Each file imports the components it uses. One component can be used many times, and when you change it, every copy changes.

In the next lesson, Props, you'll give components their own data, so that each band card shows a different band.

But first, a little practice: a page of practical information for the festival's visitors. App.jsx is almost empty, and you'll write the components and their files yourself.