Was ist React?

Willkommen bei React! React ist eine JavaScript-Bibliothek zum Bauen von Web-Apps, also von Seiten, die auf deine Eingaben reagieren. (Eine Bibliothek ist fertiger Code, den du in deinen eigenen Programmen verwendest.) Facebook und Instagram sind mit React gebaut, ebenso viele andere Apps, die du kennst. In diesem Kurs baust du Schritt für Schritt eine App für ein Musikfestival namens Sommerklang.

Im Editor liegt schon eine kleine React-App. Klicke auf Ausführen: Die Vorschau zeigt das Programm des Festivals und einen ♥-Button. Klicke ein paar Mal darauf.

Erinnere dich, wie du im JavaScript-Kurs eine Seite verändert hast: Du hast mit querySelector() ein Element gesucht, seinen textContent geändert und mit createElement() neue Elemente erzeugt. Du hast der Seite Schritt für Schritt gesagt, was sie ändern soll.

React geht den umgekehrten Weg. Du beschreibst, was die Seite für deine Daten zeigen soll, und React baut die Seite. Wenn sich die Daten ändern, aktualisiert React die Seite selbst. Sieh dir App.jsx an: Die Bands stehen im Array bands, und die Liste auf der Seite entsteht daraus. Es gibt kein querySelector() und keinen textContent. Der ♥-Button erhöht nur eine Zahl, likes, und React zeigt die neue Zahl an.

Die Seite besteht aus Komponenten, benannten Bausteinen, die du selbst schreibst, etwa die Karte einer Band, das Programm oder ein Ticketformular. Deine erste Komponente schreibst du schon in dieser Lektion.

Mach dir keine Sorgen, wenn du noch nicht jede Zeile von App.jsx verstehst: map() mit key, onClick und useState kommen jeweils in einer späteren Lektion dran. Am Ende des Kurses schreibst du das alles selbst, und noch viel mehr.