Die Oberfläche in Bausteine aufteilen
und bei geänderten Daten neu rendern.

React und Komponenten

FOUNDATIONS · 2026

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.

JSX — Markup für die Oberfläche innerhalb von JavaScript

JSX · 2026

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.

Props — Eingaben vom Elternteil an das Kind

PROPS · 2026

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.

Ereignisse und State — von der Handlung zur nächsten Ansicht

STATE · 2026

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.

Oberflächen durch Komposition bauen

COMPOSITION · 2026

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.