Zusammenfassung

In dieser Lektion hast du gelernt:

• Props übergeben Daten von einem Parent an eine Komponente. Sie werden wie Attribute geschrieben, <BandKarte name="Nachtzüge" buehne="Hauptbühne" />, und React übergibt sie der Komponente als ein einziges Objekt, props.
• Komponenten destrukturieren ihre Props in den Parametern: function BandKarte({ name, buehne }). Die Namen müssen genau übereinstimmen. Eine Prop, die niemand übergeben hat, ist undefined, und React zeigt dafür nichts an.
• Text steht in Anführungszeichen, jeder andere Wert in geschweiften Klammern: likes={128}, hauptact={true} oder einfach hauptact für true. Vor ihrem return kann eine Komponente beliebiges JavaScript ausführen, zum Beispiel ein if, das eine Klasse auswählt.
• Eine Prop kann ein Objekt sein, band={bands[0]}, gelesen als band.name, oder ein Array, tage={["Freitag", "Samstag"]}.
• Ein Standardwert springt für eine fehlende Prop ein: { buehne = "Wird noch bekannt gegeben" }. Er wird nur verwendet, wenn die Prop undefined ist.
• Was zwischen den Tags einer Komponente steht, ist die Prop children: <Karte>…</Karte> kann beliebigen Inhalt umschließen.
• Props sind schreibgeschützt. Der Parent entscheidet, und die Komponente ändert ihre Props nie; ein Wert, der aus ihnen entsteht, kommt in eine neue Variable.

In der nächsten Lektion, Listen und Bedingungen, erzeugst du mit map für jede Band im Array eine Karte, statt die Karten einzeln zu schreiben, und zeigst Teile einer Karte nur an, wenn eine Bedingung zutrifft.

Vorher aber noch etwas Übung: Hinweise für die Besucher des Festivals. Hinweis.jsx ist leer, und die Komponente schreibst du selbst.