Ein kurzer Überblick über die ersten Begriffe, denen du in React begegnest. Statt JSX, Props, Ereignisbehandlung und State getrennt auswendig zu lernen, verbindest du sie zu einem Ablauf: Daten empfangen und die Ansicht berechnen; bei einem Ereignis den Zustand ändern und erneut berechnen.
§ 00 · React und Komponenten
React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Es ist keine neue Programmiersprache, sondern bietet eine Möglichkeit, Ansichten in kleine, wiederverwendbare Komponenten zu zerlegen und diese zusammenzusetzen. Ein kleiner Button kann ebenso eine Komponente sein wie eine ganze Seite.
Eine Funktionskomponente liest Eingaben wie Props, State und Context und gibt das nächste Erscheinungsbild der Oberfläche zurück. Ändern sich die Eingaben, ruft React die Komponente erneut auf, berechnet die neue Ansicht (render) und überträgt nur die nötigen Unterschiede ins tatsächliche DOM (commit). Der Rendering-Code einer Komponente muss deshalb eine reine Berechnung sein, die bei gleichen Eingaben dasselbe Ergebnis liefert.
§ 01 · JSX — Markup für die Oberfläche innerhalb von JavaScript
JSX ist eine Syntaxerweiterung, mit der sich HTML-ähnliches Markup in JavaScript-Dateien schreiben lässt. JSX selbst ist weder React noch HTML. Beim Build wird es in JavaScript umgewandelt; in geschweiften Klammern können JavaScript-Ausdrücke stehen.
Es ist strenger als HTML. Tags müssen geschlossen sein; mehrere Geschwisterelemente müssen beim Zurückgeben von einem gemeinsamen Elternelement oder Fragment umschlossen werden; Namen eigener Komponenten beginnen mit einem Großbuchstaben. Manche Namen unterscheiden sich außerdem von DOM-Attributen des Browsers, etwa className statt class.
§ 02 · Props — Eingaben vom Elternteil an das Kind
Props sind Werte, die eine Elternkomponente an eine Kindkomponente übergibt. Neben Strings können das Zahlen, Objekte, Arrays, Funktionen und JSX sein. Das Kind behandelt empfangene Props als schreibgeschützte Eingaben für diesen Render. Sollen sie sich ändern, muss die Elternkomponente neue Props übergeben.
§ 03 · Ereignisse und State — von der Handlung zur nächsten Ansicht
Ein Ereignishandler ist eine Funktion, die auf Handlungen wie Klicken, Eingeben oder Absenden reagiert. Übergib die Funktion selbst, etwa mit onClick={handleClick}. Mit onClick={handleClick()} übergibst du dagegen das Aufrufergebnis: Die Funktion läuft sofort beim Rendern, statt auf einen Klick zu warten.
State sind Daten, die eine Komponente zwischen Render-Vorgängen behalten muss und die sich auf die Oberfläche auswirken. useState gibt den aktuellen Wert und einen Setter zu seiner Aktualisierung zurück. Der Setter verändert nicht die Variable im gerade laufenden Code, sondern fordert den nächsten Render an. Objekt- und Array-State werden durch neue Werte ersetzt und nicht direkt mutiert.
§ 04 · Oberflächen durch Komposition bauen
children ist ein besonderes Prop für den Inhalt zwischen dem öffnenden und schließenden Tag einer Komponente. Es wird für Komponenten wie Boxen, Dialoge und Layouts verwendet, deren innerer Inhalt austauschbar ist. Kleine Komponenten zusammenzusetzen ist in React der grundlegende Ansatz, statt Vererbung zu nutzen.
Um abhängig von Bedingungen unterschiedliches JSX zurückzugeben, verwendest du if, den ternären Operator oder &&. Mit map lässt sich ein Array in eine JSX-Liste umwandeln. Jedes Geschwisterelement braucht dabei einen stabilen, eindeutigen key, damit React es auch nach Einfügen, Löschen und Verschieben wiedererkennt. Array-Indizes oder bei jedem Render wechselnde Zufallswerte sind keine guten keys.
| Begriff | Bedeutung in einem Satz |
|---|---|
| Komponente | Wiederverwendbare Einheit, die Props, State und Context liest und UI zurückgibt |
| JSX | Syntaxerweiterung zur Beschreibung von UI-Strukturen in JavaScript |
| Props | Schreibgeschützte Eingaben von einer Eltern- an eine Kindkomponente |
| State | Zwischen Render-Vorgängen gespeicherte Daten, die die Ansicht verändern |
| Ereignishandler | Funktion, die beim Auftreten einer Benutzerhandlung ausgeführt wird |
| key | Stabile Kennzeichnung zur Wiedererkennung von Geschwisterelementen einer Liste zwischen Render-Vorgängen |
Beitrag lesen: sass.studio.