Кинотеатр как приложение на React

Добро пожаловать в последний проект пути «Веб-разработка»! Кинотеатр «Звёздный свет» возвращается в последний раз, и вы построите его заново как приложение на React. Посетители увидят те же страницы: фильмы, расписание, места в зале и свои билеты. Но внутри сайт будет состоять из компонентов, которые отрисовывают страницу по данным и состоянию. Когда посетитель выбирает день или место, вы не меняете страницу сами, как это делал script.js: вы меняете состояние, а React перерисовывает то, что изменилось.

Файлы. Кинотеатр устроен так же, как приложения из курса React:

• index.html — единственная страница приложения: <div id="root"> и скрипт, который загружает main.jsx. И главная страница, и расписание будут отрисованы в ней.
• main.jsx отрисовывает <App /> в #root и подключает style.css, как в курсе React.
• style.css — таблица стилей из проекта «Кинотеатр на Tailwind», без изменений: тема с цветами night и gold и шрифтом для заголовков, ячейки таблицы и классы day, active, seat, taken и selected. Когда main.jsx подключает её, Start Coder превращает её в CSS, как и раньше.
• App.jsx содержит главную страницу, уже переписанную на JSX, чтобы вам не пришлось набирать её заново: шапку, три раздела и подвал.
• showtimes.json содержит расписание, как и раньше.

Tailwind в JSX. Посмотрите на App.jsx: классы те же, что и на старой странице, только class превратился в className, как в уроке «JSX». Tailwind ищет названия классов во всех ваших файлах, в том числе в .jsx, поэтому они работают так же, как раньше. Изменилось ещё две вещи. Ссылки в шапке и «Смотреть афишу» стали кнопками, с cursor-pointer, как у кнопки «Забронировать», и пока ничего не делают: в приложении с одной страницей некуда вести. Вы оживите их в следующем упражнении. А в таблице цен строки лежат в <tbody>. В HTML его добавляет сам браузер, но React строит таблицу ровно так, как написано в JSX, и без <tbody> предупреждает об этом в консоли.

Что находится вне React. React отрисовывает только то, что лежит внутри #root. Сами head и body находятся в index.html — это обычный HTML, поэтому класс там пишется class, а не className. Для body нужны фон и цвет текста старых страниц, а в head — две строки из старого index.html: viewport, без которого телефоны уменьшают страницу, и описание для поисковых систем:

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Маленький кинотеатр с большими фильмами, на Липовой улице с 1932 года. Фильмы недели, расписание сеансов и цены на билеты.">

Шапка как компонент. Затем вы начнёте делить страницу на компоненты, как в уроке «Компоненты». Первой будет шапка: скоро у неё появится собственная задача — переключать страницы.

(В подвале написано Автор сайта: Анна — имя из наших примеров. Если хотите, верните своё.)