Две страницы в одном приложении

В старом сайте было два HTML-файла, и ссылка загружала другой. В приложении на React страница одна, и React рисует в ней то, что говорит состояние. Значит, и то, какую страницу видит посетитель, — тоже состояние: page в App, равное "home" или "showtimes". App оставляет себе шапку и подвал, а в main показывает одну из двух страниц, с условным оператором из урока «Списки и условия»:

<main className="mx-auto max-w-5xl px-4 md:px-8">
    {page === "home" ? <Home /> : <Showtimes />}
</main>

Каждая страница — компонент в отдельном файле. Showtimes.jsx уже готов: в нём заголовок, абзац и шапка таблицы со старой страницы расписания. Home.jsx пуст: три раздела главной страницы переезжают туда из App.jsx. Компонент возвращает один элемент, а разделов три, поэтому Home возвращает их во фрагменте, <>…</>.

Кнопки, а не ссылки. Кнопки в шапке меняют состояние, как вкладки дней в уроке «Общее состояние»: Header получает сеттер в пропсах, <Header onNavigate={setPage} />, а его кнопки вызывают его, например onClick={() => onNavigate("showtimes")}. Это именно кнопки, потому что они не ведут на другой адрес: они что-то меняют на этой же странице. А логотип ведёт домой, как и на старом сайте.

Большинство настоящих сайтов на React используют для страниц маршрутизатор (router), например React Router, о котором упоминается в конце курса React. С ним у каждой страницы свой адрес, например /showtimes, поэтому работает кнопка браузера «Назад», а ссылку на любую страницу можно отправить другому человеку. Для двух страниц нашего кинотеатра хватит одного состояния. Но разницу вы заметите: когда посетитель перезагружает страницу, он снова оказывается на главной, потому что состояние начинается с "home".