Gratulujeme!

Gratulujeme, Kino Hvězda je aplikace v Reactu a vy jste došli na konec cesty Tvorba webu!

Poslední úprava. Záhlaví neříká, na které stránce jste. Dejte tlačítku aktuální stránky zlatou barvu loga: Hlavicka dostane v props i stranka a každé z jejích dvou tlačítek si vybere ze dvou sad tříd:

className={
    stranka === "uvod"
        ? "cursor-pointer text-zlata"
        : "cursor-pointer text-white hover:text-zlata"
}

Ohlédnutí. Vzpomeňte si, čím kino začínalo: dvě stránky v HTML se třemi kartami filmů a dvěma tabulkami, které jste nastylovali v CSS a dali na internet pod vlastní adresou. Pak mu JavaScript začal načítat program a nechal návštěvníky vybírat a rezervovat místa, Tailwind mu dal vzhled, který funguje i na mobilu, a teď je to aplikace z komponent, která se vykresluje z dat a ze stavu. Každý krok jste udělali sami.

Teď umíte postavit web od prvního tagu až po adresu na internetu: stránky v HTML, styly v CSS nebo Tailwindu pro každou obrazovku, skripty v JavaScriptu, které reagují na návštěvníky, načítají data, kontrolují formuláře a pamatují si věci, a celé aplikace v Reactu. Přesně tak se dělá dnešní web.

Aplikace na internetu. Na internet ji dostanete stejně jako kartičky na konci kurzu Reactu: Vite vytvoří projekt na vašem počítači a sestaví hotovou aplikaci. S Tailwindem potřebuje Vite ještě jednu věc: plugin Tailwindu pro Vite. Budete potřebovat Node.js, jako na konci kurzů Tailwindu a Reactu.

1. V terminálu vytvořte projekt:

   npm create vite@latest kino-react

   Zvolte framework React a variantu JavaScript. Když Vite nabídne, že projekt hned nainstaluje a spustí, odpovězte No (ne). Na ostatní otázky stačí odpověď, kterou navrhne. Pak přejděte do složky a nainstalujte balíčky, spolu s Tailwindem a jeho pluginem:

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

2. Přidejte plugin do vite.config.js, jak to ukazuje návod Tailwindu pro Vite: řádek, který ho importuje, a tailwindcss() vedle react():

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

   Vite píše texty v jednoduchých uvozovkách a vynechává středníky, což funguje stejně dobře.
3. Zkopírujte soubory z editoru do projektu, jako u kartiček. App.jsx, Hlavicka.jsx, Uvod.jsx, KartaFilmu.jsx, Program.jsx, TlacitkaDnu.jsx, VyberMist.jsx, useLocalStorage.js a style.css patří do src. V src/main.jsx od Vite změňte ./index.css na ./style.css a smažte ze src soubory App.css a index.css a složku assets. program.json patří do public. V index.html ve složce projektu změňte lang="en" na lang="cs" a titulek na Kino Hvězda, přidejte řádek s popisem (viewport tam od Vite už je) a dejte prvku body jeho třídy.
4. Vyzkoušejte aplikaci pomocí npm run dev. Pak npm run build sestaví hotovou aplikaci do složky dist. Na Netlify otevřete projekt svého kina a na jeho stránce Deploys přetáhněte složku dist do oblasti dole na stránce, jako u dřívějších verzí webu. Adresa zůstane stejná a z kina na internetu se stane vaše aplikace v Reactu. Aplikace má jen jednu stránku, takže starý odkaz končící na program.html teď ukáže stránku Netlify „Page not found“ (stránka nenalezena), ale adresa samotného webu funguje jako dřív.

Co dál. Tady cesta končí, ale vaše kino může růst dál a všechno, co k tomu potřebujete, už znáte: filmy načtené z filmy.json, stejně jako program; titulek v záložce prohlížeče, který sleduje stránku, pomocí efektu jako ve cvičení Váš první efekt; ceny pro studenty a děti ve výběru míst; nebo tmavý režim s variantou dark: z kurzu Tailwindu. A na Start Coderu se můžete učit dál:

• Kurz TypeScriptu učí JavaScript s typy, které najdou spoustu chyb dřív, než kód vůbec spustíte. V TypeScriptu se píše mnoho projektů v Reactu a Vite pro ně má variantu TypeScript.
• Kurz SQL učí jazyk databází, ve kterých mají větší weby svá data, třeba rezervace skutečného kina.