Das Kino als React-App

Willkommen beim letzten Projekt des Lernpfads Webentwicklung! Das Kino Sternenlicht kommt ein letztes Mal zurück, und du baust es als React-App neu. Die Besucher sehen dieselben Seiten: die Filme, das Programm, die Plätze und ihre Tickets. Im Inneren besteht die Website aber aus Komponenten, die die Seite aus Daten und State zeichnen. Wenn ein Besucher einen Tag oder einen Platz wählt, änderst du die Seite nicht selbst, wie es script.js getan hat: Du änderst den State, und React zeichnet neu, was sich geändert hat.

Die Dateien. Das Kino ist aufgebaut wie die Apps im React-Kurs:

• index.html ist die einzige Seite der App: <div id="root"> und das Skript, das main.jsx lädt. Die Startseite und das Programm werden beide hier hineingezeichnet.
• main.jsx rendert <App /> in #root und importiert style.css, wie im React-Kurs.
• style.css ist das Stylesheet aus dem Projekt Das Kino in Tailwind, unverändert: das Theme mit nacht, gold und der Display-Schrift, die Tabellenzellen und die Klassen wochentag, aktiv, platz, belegt und gewaehlt. Wenn main.jsx es importiert, macht Start Coder daraus CSS, wie zuvor.
• App.jsx enthält die Startseite, schon in JSX umgewandelt, damit du sie nicht abtippen musst: die Kopfzeile, die drei Abschnitte und den Footer.
• programm.json enthält das Programm, wie zuvor.

Tailwind in JSX. Sieh dir App.jsx an: Die Klassen sind dieselben wie auf der alten Seite, nur aus class ist className geworden, wie in der JSX-Lektion. Tailwind sucht Klassennamen in allen deinen Dateien, auch in den .jsx-Dateien, deshalb funktionieren sie wie zuvor. Zwei Dinge sind noch anders. Die Links in der Kopfzeile und Das läuft gerade sind zu Buttons geworden, mit cursor-pointer wie der Button Buchen, und sie tun noch nichts: Eine App mit nur einer Seite hat keine andere Seite, auf die sie verlinken könnte. In der nächsten Übung erweckst du sie zum Leben. Und in der Preistabelle stehen die Zeilen in einem <tbody>. In HTML ergänzt der Browser es von selbst, aber React baut die Tabelle genau so, wie das JSX es sagt, und ohne <tbody> gibt es eine Warnung in der Konsole.

Was außerhalb von React liegt. React zeichnet nur, was in #root steht. Das head und der body selbst stehen in index.html, das gewöhnliches HTML ist, deshalb heißt eine Klasse dort class und nicht className. Der body braucht den Hintergrund und die Textfarbe der alten Seiten, und das head braucht zwei Zeilen aus der alten index.html: den Viewport, ohne den Handys die Seite verkleinern, und die Beschreibung für Suchmaschinen:

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Ein kleines Kino mit großen Filmen, seit 1932 in der Ulmenstraße. Die Filme dieser Woche, das Programm und die Ticketpreise.">

Die Kopfzeile als Komponente. Danach beginnst du, die Seite in Komponenten aufzuteilen, wie in der Lektion Komponenten. Die Kopfzeile kommt zuerst, denn sie bekommt bald eine eigene Aufgabe: das Umschalten der Seiten.

(Im Footer steht Website von Anna, der Name aus unseren Beispieldateien. Wenn du magst, setze deinen eigenen Namen wieder ein.)