Eine Rezeptkarte

Zeit für ein Projekt! Dieser Checkpoint setzt die Komponenten, Props, Listen und Bedingungen der vorigen Lektionen ein. Wie in den Checkpoints des JavaScript-Kurses sagen die Anweisungen, was die Seite tun soll, und wie du es schreibst, ist deine Sache.

Das Projekt. Du baust ein Rezeptbuch. Jedes Rezept bekommt eine Karte mit seinem Namen, der Zubereitungszeit und den Zutaten. In drei Übungen machst du die Karte, zeigst alle Rezepte mit ihren Zutaten an und fügst schließlich Abzeichen für vegetarische und schnelle Rezepte hinzu und teilst das Buch in Kapitel auf.

Die Dateien. Die Rezepte stehen in rezepte.js, im Array rezepte, das die Datei exportiert. Jedes Rezept sieht so aus:

{
    id: 1,
    name: "Tomatensuppe",
    gang: "suppe",
    minuten: 15,
    vegetarisch: true,
    zutaten: ["Tomaten", "Zwiebel", "Knoblauch", "Basilikum"],
}

App.jsx importiert sie bereits. RezeptKarte.jsx ist leer: Die Komponente, die dorthin gehört, schreibst du ganz allein.

Die Aufgabe. Schreibe die Komponente RezeptKarte. Sie bekommt ein Rezept in ihren Props und zeigt es in einem article mit der Klasse rezept an: den Namen in einem h3 (die h2-Überschriften werden später die Kapitel des Buches) und darunter, wie lange das Rezept dauert und wie viele Zutaten es hat:

Tomatensuppe
15 Minuten
4 Zutaten

Vorerst zeigt App nur die Karte des ersten Rezepts, rezepte[0]. (Alle kommen in der nächsten Übung.)

Ein Tipp: Die Anzahl der Zutaten ist die Länge des Arrays zutaten des Rezepts.