Zusammenfassung

In dieser Lektion hast du gelernt:

• JSX wird zu Aufrufen von JavaScript-Funktionen: <h1>Hallo</h1> wird zu jsx("h1", { children: "Hallo" }), das ein Objekt erzeugt, aus dem React das Element baut.
• Eine Komponente gibt ein Element zurück. Mehrere Elemente kommen in ein Element drumherum oder in ein Fragment <>…</>, das der Seite nichts hinzufügt.
• Jedes Element wird geschlossen, mit seinem schließenden Tag oder mit einem Schrägstrich: <img />, <br />, <input />.
• Die Klasse eines Elements heißt className, und ein Label hat htmlFor. Bei class oder for warnt React in der Konsole.
• In geschweiften Klammern stehen JavaScript-Ausdrücke: {festival}, {preis * 2}, {tage.join(" und ")}. Texte und Zahlen werden angezeigt, true, false, null und undefined nicht, und Objekte lassen sich nicht anzeigen. Anweisungen wie if stehen über return.
• Attribute bekommen Werte in Klammern, ohne Anführungszeichen: src={logo}, alt={`${festival} Logo`}.
• style ist ein Objekt mit Namen in camelCase: style={{ color: "teal", fontSize: 24 }}. Eine Zahl bedeutet Pixel.
• Ein Kommentar in JSX ist {/* … */}.

In der nächsten Lektion, Komponenten, teilst du die App in Komponenten in eigenen Dateien auf und importierst sie, wo du sie brauchst.

Vorher aber noch etwas Übung: eine Karte für eine Band. Ihre Daten stehen im Objekt band in App, und die Styles der Karte stehen in style.css.