Zusammenfassung

In dieser Lektion hast du gelernt:

• React baut die Seite aus deinen Daten. Du beschreibst, was die Seite zeigen soll, und wenn sich die Daten ändern, aktualisiert React die Seite selbst, ohne querySelector() oder textContent.
• Eine React-App hat index.html mit einem leeren <div id="root">, main.jsx, das <App /> darin anzeigt und in jeder Übung gleich ist, und App.jsx, in der du arbeitest.
• Eine Komponente ist eine Funktion, deren Name mit einem Großbuchstaben beginnt und die JSX zurückgibt, also Tags, die direkt im Code stehen. Mit export default function App() kann main.jsx App importieren.
• JSX über mehrere Zeilen steht in Klammern hinter return, alles in einem Element, zum Beispiel main.
• Eine Komponente verwendest du als Tag, <Willkommen />, so oft du willst. Ein Name mit kleinem Anfangsbuchstaben, etwa <willkommen />, ist ein HTML-Tag und nicht deine Komponente.
• Ein Fehler in der Schreibweise des Codes erscheint rot unter der Vorschau, mit Datei, Zeile und Spalte, und die App läuft nicht. Fehler, die auftreten, während die App läuft, und Warnungen von React erscheinen in der Konsole.

In der nächsten Lektion, JSX, schaust du dir die Tags in deinen Komponenten genauer an: wo sie sich von HTML unterscheiden und wie du Werte aus deinem Code in sie einsetzt.

Vorher aber noch etwas Übung: eine Seite für die Tickets des Festivals. App.jsx enthält nur die Überschrift, und du schreibst selbst zwei Komponenten dafür.