Итоги

В этом уроке вы узнали, что:

• Страница делится на компоненты, по одному на каждую часть, а App собирает их вместе, как оглавление. Имя компонента начинается с заглавной буквы, а использовать его нужно как тег: <Header />.
• Каждый компонент обычно лежит в собственном файле, названном по его имени: Header.jsx. Файл — это модуль: то, что в нём, существует только там, пока файл не экспортирует это наружу.
• export default function Header() экспортирует главное в файле. import Header from "./Header.jsx"; импортирует это без фигурных скобок, под выбранным вами именем.
• export function FridayTicket() — это именованный экспорт, и в файле их может быть много. import { FridayTicket, WeekendTicket } from "./Tickets.jsx"; импортирует их с фигурными скобками, под точными именами.
• ./ в пути — это папка файла, в котором написан импорт, а ../ — папка на уровень выше. Имя без них, например "react", — это пакет.
• Отсутствующий экспорт или импорт с неправильными скобками даёт в консоли Element type is invalid, отсутствующий импорт — ReferenceError: … is not defined, а неверный путь показывается в красном сообщении под предпросмотром.
• Компоненты могут использовать другие компоненты, и вместе они образуют дерево. Каждый файл импортирует компоненты, которые использует. Один компонент можно использовать много раз, и когда вы меняете его, меняются все копии.

В следующем уроке, «Пропсы», вы дадите компонентам собственные данные, чтобы каждая карточка показывала свою группу.

А пока немного практики: страница с полезной информацией для гостей фестиваля. App.jsx почти пустой, а компоненты и их файлы вы напишете сами.