Поздравляем!

Поздравляем: «Звёздный свет» стал приложением на React, а вы дошли до конца пути «Веб-разработка»!

Последний штрих. В шапке не сказано, на какой вы странице. Дайте кнопке текущей страницы золотой цвет логотипа: Header получает в пропсах ещё и page, а каждая из двух его кнопок выбирает один из двух наборов классов:

className={
    page === "home"
        ? "cursor-pointer text-gold"
        : "cursor-pointer text-white hover:text-gold"
}

Взгляд назад. Вспомните, с чего начинался кинотеатр: две HTML-страницы с тремя карточками фильмов и двумя таблицами, которые вы оформили с помощью CSS и выложили в интернет по собственному адресу. Потом JavaScript загрузил расписание и позволил посетителям выбирать места и бронировать их, Tailwind дал сайту вид, который хорошо работает на телефонах, а теперь это приложение из компонентов, которое само отрисовывает себя по данным и состоянию. Каждый шаг вы сделали сами.

Теперь вы умеете сделать сайт от первого тега до его адреса в интернете: страницы на HTML, стили на CSS или Tailwind для любого экрана, скрипты на JavaScript, которые реагируют на посетителей, загружают данные, проверяют формы и что-то запоминают, и целые приложения на React. Так делается современный веб.

Приложение в интернете. Ваше приложение выходит в интернет так же, как приложение с карточками в конце курса React: Vite создаёт проект на вашем компьютере и собирает готовое приложение. С Tailwind Vite нужно ещё кое-что: плагин Tailwind для Vite. Вам понадобится Node.js, как в конце курсов Tailwind и React.

1. В терминале создайте проект:

   npm create vite@latest cinema-react

   Выберите фреймворк React и вариант JavaScript, а когда Vite предложит установить проект и сразу запустить его, ответьте No. На любой другой вопрос подойдёт предложенный ответ. Затем перейдите в папку и установите пакеты вместе с Tailwind и его плагином:

   cd cinema-react
   npm install
   npm install tailwindcss @tailwindcss/vite

2. Добавьте плагин в vite.config.js, как показывает руководство Tailwind по Vite: строку, которая его импортирует, и tailwindcss() рядом с react():

   import { defineConfig } from "vite";
   import react from "@vitejs/plugin-react";
   import tailwindcss from "@tailwindcss/vite";
   
   export default defineConfig({
       plugins: [react(), tailwindcss()],
   });

   Vite пишет строки в одинарных кавычках и обходится без точек с запятой, что работает так же хорошо.
3. Скопируйте свои файлы из редактора в проект, как вы делали с карточками. App.jsx, Header.jsx, Home.jsx, FilmCard.jsx, Showtimes.jsx, DayButtons.jsx, SeatPicker.jsx, useLocalStorage.js и style.css кладите в src. В файле Vite src/main.jsx замените ./index.css на ./style.css, а App.css, index.css и папку assets удалите из src. showtimes.json кладите в public. В index.html в папке проекта поменяйте заголовок на Звёздный свет, добавьте строку с описанием (строка viewport там уже есть от Vite) и дайте body его классы.
4. Попробуйте приложение командой npm run dev. Затем npm run build создаёт готовое приложение в папке dist. В Netlify откройте проект своего кинотеатра, на странице Deploys перетащите папку dist в область внизу страницы, как с прежними версиями сайта. Адрес остаётся тем же, а кинотеатр в интернете становится вашим приложением на React. В приложении только одна страница, поэтому старая ссылка, которая заканчивается на showtimes.html, теперь покажет страницу Netlify «Page not found»; адрес самого сайта работает как раньше.

Что дальше. Путь на этом заканчивается, но ваш кинотеатр может расти дальше, и вы знаете всё, что нужно для этих идей: фильмы, загруженные из films.json, как расписание; заголовок вкладки, который следует за страницей, с эффектом, как в упражнении «Ваш первый эффект»; цены для студентов и детей в выборе мест; или тёмная тема с вариантом dark: из курса Tailwind. И на Start Coder есть чему поучиться:

• Курс TypeScript учит JavaScript с типами, которые находят много ошибок ещё до запуска кода. Многие проекты на React написаны на TypeScript, и у Vite есть для них вариант TypeScript.
• Курс SQL учит языку баз данных, где более крупные сайты хранят свои данные, например бронирования настоящего кинотеатра.