Kino jako aplikace v Reactu

Vítejte u posledního projektu cesty Tvorba webu! Kino Hvězda se vrací naposledy a vy ho postavíte znovu jako aplikaci v Reactu. Návštěvníci uvidí stejné stránky: filmy, program, místa i své vstupenky. Uvnitř se ale web bude skládat z komponent, které stránku vykreslí z dat a ze stavu. Když si návštěvník vybere den nebo místo, nebudete stránku měnit sami, jako to dělal script.js. Změníte stav a React znovu vykreslí, co se změnilo.

Soubory. Kino má stejné soubory jako aplikace v kurzu Reactu:

• index.html je jediná stránka aplikace: <div id="root"> a skript, který načte main.jsx. Vykreslí se do ní úvodní stránka i program.
• main.jsx vykreslí <App /> do #root a importuje style.css, jako v kurzu Reactu.
• style.css jsou styly z projektu Kino v Tailwindu, beze změny: motiv s barvami noc a zlata a písmem nadpisů, buňky tabulek a třídy den, aktivni, misto, obsazene a vybrane. Když je main.jsx importuje, Start Coder z nich udělá CSS, jako dřív.
• App.jsx obsahuje úvodní stránku, už převedenou do JSX, abyste ji nemuseli přepisovat: záhlaví, tři sekce a zápatí.
• program.json obsahuje program, jako dřív.

Tailwind v JSX. Podívejte se do App.jsx: třídy jsou stejné jako na staré stránce, jen z class se stalo className, jako v lekci JSX. Tailwind hledá názvy tříd ve všech vašich souborech, i v souborech .jsx, takže fungují stejně jako dřív. Změnily se ještě dvě věci. Z odkazů v záhlaví a z Co hrajeme se stala tlačítka, s cursor-pointer jako tlačítko Rezervovat, a zatím nic nedělají: aplikace s jedinou stránkou nemá kam jinam odkazovat. Oživíte je v dalším cvičení. A v tabulce cen jsou řádky v <tbody>. V HTML ho prohlížeč doplní sám, ale React sestaví tabulku přesně podle JSX a bez <tbody> by v konzoli varoval.

Co je mimo React. React vykresluje jen to, co je uvnitř #root. Prvky head a body jsou v index.html. To je obyčejné HTML, takže se v něm třída píše class, ne className. Prvek body potřebuje pozadí a barvu textu starých stránek a head dva řádky ze starého index.html: viewport, bez kterého mobily stránku zmenší, a popis pro vyhledávače:

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Malé kino s velkými filmy, v Jilmové ulici od roku 1932. Filmy na tento týden, program a ceny vstupenek.">

Záhlaví jako komponenta. Pak začnete stránku dělit na komponenty, jako v lekci Komponenty. Záhlaví je na řadě první, protože brzy dostane vlastní práci: přepínání stránek.

(V zápatí je Autorka webu: Anna, jméno z našich ukázkových souborů. Jestli chcete, napište tam zase sebe.)