Zwei Seiten in einer App

Die alte Website bestand aus zwei HTML-Dateien, und ein Link lud jeweils die andere. Eine React-App hat nur eine einzige Seite, und React zeichnet hinein, was der State sagt. Welche Seite der Besucher sieht, ist also auch State: seite in App, entweder "start" oder "programm". App behält die Kopfzeile und den Footer, und im main zeigt sie eine der beiden Seiten, mit dem Bedingungsoperator aus der Lektion Listen und Bedingungen:

<main className="mx-auto max-w-5xl px-4 md:px-8">
    {seite === "start" ? <Startseite /> : <Programm />}
</main>

Jede Seite ist eine Komponente in einer eigenen Datei. Programm.jsx ist fertig, mit der Überschrift, dem Absatz und dem Tabellenkopf der alten Programmseite. Startseite.jsx ist leer: Die drei Abschnitte der Startseite ziehen aus App.jsx dorthin um. Eine Komponente gibt ein Element zurück, die Abschnitte sind aber drei, deshalb gibt Startseite sie in einem Fragment zurück, <>…</>.

Buttons statt Links. Die Buttons in der Kopfzeile ändern den State, wie die Tag-Buttons in der Lektion State teilen: Kopfzeile bekommt den Setter in ihren Props, <Kopfzeile beiNavigation={setSeite} />, und ihre Buttons rufen ihn auf, zum Beispiel mit onClick={() => beiNavigation("programm")}. Es sind Buttons, weil sie nicht zu einer anderen Adresse führen: Sie ändern etwas auf dieser Seite. Und das Logo führt wie auf der alten Website nach Hause.

Die meisten echten Websites mit React nutzen für ihre Seiten einen Router, zum Beispiel React Router, den das Ende des React-Kurses erwähnt. Damit hat jede Seite eine eigene Adresse, etwa /programm, sodass der Zurück-Button des Browsers funktioniert und du jemandem einen Link zu jeder Seite schicken kannst. Für die zwei Seiten unseres Kinos reicht ein State. Einen Unterschied wirst du aber bemerken: Lädt ein Besucher die Seite neu, ist er wieder auf der Startseite, weil der State mit "start" beginnt.