Glückwunsch!

Glückwunsch, das Kino Sternenlicht ist eine React-App, und du hast das Ende des Lernpfads Webentwicklung erreicht!

Ein letzter Schliff. Die Kopfzeile sagt nicht, auf welcher Seite du bist. Gib dem Button der aktuellen Seite das Gold des Logos: Kopfzeile bekommt auch seite in ihren Props, und jeder ihrer zwei Buttons wählt zwischen zwei Klassenmengen:

className={
    seite === "start"
        ? "cursor-pointer text-gold"
        : "cursor-pointer text-white hover:text-gold"
}

Ein Rückblick. Denk daran, wo das Kino angefangen hat: zwei HTML-Seiten mit drei Filmkarten und zwei Tabellen, die du mit CSS gestaltet und unter einer eigenen Adresse online gestellt hast. Dann hat JavaScript sein Programm geladen und die Besucher Plätze wählen und buchen lassen, Tailwind hat ihm ein Aussehen gegeben, das auch auf Handys funktioniert, und jetzt ist es eine App aus Komponenten, die sich aus Daten und State selbst zeichnet. Jeden Schritt davon hast du selbst gebaut.

Jetzt kannst du eine Website von der ersten Zeile HTML bis zu ihrer Adresse im Internet bauen: Seiten in HTML, Styles in CSS oder Tailwind für jeden Bildschirm, Skripte in JavaScript, die auf Besucher reagieren, Daten laden, Formulare prüfen und sich Dinge merken, und ganze Apps in React. So wird das heutige Web gemacht.

Die App online. Deine App kommt so ins Internet wie die Karteikarten am Ende des React-Kurses: Vite erstellt das Projekt auf deinem Computer und baut die fertige App. Mit Tailwind braucht Vite noch etwas dazu: das Tailwind-Plugin für Vite. Du brauchst Node.js, wie am Ende der Kurse Tailwind und React.

1. Erstelle das Projekt im Terminal:

   npm create vite@latest kino-react

   Wähle das Framework React und die Variante JavaScript, und wenn Vite anbietet, das Projekt gleich zu installieren und zu starten, antworte mit No. Bei allen anderen Fragen ist die vorgeschlagene Antwort in Ordnung. Wechsle dann in den Ordner und installiere die Pakete, zusammen mit Tailwind und seinem Plugin:

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

2. Füge das Plugin in vite.config.js ein, wie es Tailwinds Anleitung für Vite zeigt: eine Zeile, die es importiert, und tailwindcss() neben react():

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

   Vite schreibt seine Texte in einfachen Anführungszeichen und lässt die Semikolons weg, was genauso gut funktioniert.
3. Kopiere deine Dateien aus dem Editor in das Projekt, wie bei den Karteikarten. App.jsx, Kopfzeile.jsx, Startseite.jsx, FilmKarte.jsx, Programm.jsx, Tagesknoepfe.jsx, Platzwahl.jsx, useLocalStorage.js und style.css kommen nach src. Ändere in Vites src/main.jsx ./index.css in ./style.css und lösche aus src die Dateien App.css und index.css sowie den Ordner assets. programm.json kommt nach public. Ändere in der index.html im Ordner des Projekts lang="en" in lang="de" und den Titel in Kino Sternenlicht, ergänze die Zeile mit der Beschreibung (die Viewport-Zeile ist von Vite schon da) und gib dem body seine Klassen.
4. Probiere die App mit npm run dev aus. Dann baut npm run build die fertige App im Ordner dist. Öffne bei Netlify das Projekt deines Kinos, und ziehe auf seiner Seite Deploys den Ordner dist auf den Bereich unten auf der Seite, wie bei den früheren Versionen deiner Website. Die Adresse bleibt gleich, und aus dem Kino im Internet wird deine React-App. Die App hat nur eine Seite, deshalb zeigt ein alter Link, der auf programm.html endet, jetzt Netlifys „Page not found“; die Adresse der Website selbst funktioniert wie vorher.

Wie es weitergeht. Der Lernpfad endet hier, aber dein Kino kann weiterwachsen, und du weißt alles, was diese Ideen brauchen: die Filme aus einer filme.json laden, wie das Programm; den Titel des Tabs der Seite folgen lassen, mit einem Effekt wie in der Übung Dein erster Effekt; Preise für Studierende und Kinder in der Platzwahl; oder einen Dunkelmodus mit der Variante dark: aus dem Tailwind-Kurs. Und auf Start Coder gibt es noch mehr zu lernen:

• Der TypeScript-Kurs bringt dir JavaScript mit Typen bei, die viele Fehler finden, noch bevor du den Code ausführst. Viele React-Projekte sind in TypeScript geschrieben, und Vite hat dafür die Variante TypeScript.
• Der SQL-Kurs bringt dir die Sprache der Datenbanken bei, in denen größere Websites ihre Daten halten, zum Beispiel die Buchungen eines echten Kinos.