Abzeichen und Kapitel

Das Buch funktioniert, jetzt soll es dir beim Aussuchen helfen. Abzeichen zeigen, welche Rezepte vegetarisch und welche schnell sind, und Kapitel trennen die Suppen von den Hauptgerichten. Und Desserts? Davon gibt es noch keine, und das Buch soll es sagen.

Abzeichen. Ein vegetarisches Rezept bekommt das Abzeichen Vegetarisch, und ein Rezept, das weniger als 20 Minuten dauert, bekommt das Abzeichen Schnell. Jedes Abzeichen ist ein span mit der Klasse abzeichen, in der Karte unter dem Namen. Ein Rezept kann beide Abzeichen haben, eines von beiden oder keins.

Kapitel. Das Buch hat drei Kapitel: Suppen (die Rezepte, deren gang "suppe" ist), Hauptgerichte ("hauptgericht") und Desserts ("dessert"). Jedes Kapitel ist ein section-Element mit seinem Titel in einem h2 und darunter den Karten seiner Rezepte, in der Reihenfolge des Arrays. Ein Kapitel ohne Rezepte sagt unter seinem Titel Noch keine Rezepte.

Drei Kapitel, die gleich aussehen, sind ein Fall für eine Komponente: Dafür gibt es eine neue, leere Datei, Kapitel.jsx. Sie kann den Titel und die Rezepte des Kapitels in ihren Props bekommen, und App kann die Rezepte für jedes Kapitel filtern.

Ein Tipp: Überlege dir bei jeder Bedingung, was sie ergibt. rezept.vegetarisch ist true oder false. Aber was ist die Länge eines leeren Arrays, und was zeigt React dafür an?

Das ist das ganze Projekt. Dein Rezeptbuch entsteht aus Daten: Füge rezepte.js ein Rezept hinzu, zum Beispiel ein Dessert, und es erscheint im richtigen Kapitel mit den richtigen Abzeichen, ohne dass du eine einzige Komponente änderst. So funktionieren React-Apps: Die Komponenten sagen, wie die Daten angezeigt werden, und die Seite folgt den Daten. Bisher ändern sich die Daten aber nie, solange die Seite offen ist. In der nächsten Lektion, Ereignisse, beginnen deine Komponenten, auf den Nutzer zu reagieren: auf Klicks und auf Eingaben.