React-Grundlagen

React-Grundlagen

0:00 Jetzt kommen wir zu dem Werkzeug, wegen dem die meisten hier sitzen. React hat die Art, wie Oberflächen im Web gebaut werden, in wenigen Jahren grundlegend verändert — und zwar nicht durch eine besonders raffinierte Technik, sondern durch eine einfache Idee: Man beschreibt, wie die Oberfläche bei einem bestimmten Zustand aussehen soll, und überlässt den Rest der Bibliothek.

0:19 Was das im Alltag bedeutet und warum es so viel angenehmer ist als der frühere Weg, schauen wir uns heute Schritt für Schritt an — von der Architektur bis zur interaktiven Komponente.

React-Grundlagen

0:29 Der Tag hat vier große Blöcke. Wir beginnen mit der Architektur, mit JSX und den Komponenten — das ist das Fundament. Dann kommen Props, Children und das Rendering dazu, also die Frage, wie Daten durch eine Anwendung fließen. Im dritten Block wird es interaktiv: Ereignisse und Formulare. Und zum Schluss die Muster, die Sie in jeder echten Anwendung brauchen — Listen, Keys und bedingtes Rendern.

0:53 Am Ende haben Sie alle Bausteine beisammen, um eine kleine Anwendung zu bauen. Vorab kurz zu Ihnen. Wie viel Erfahrung bringen Sie mit JavaScript mit — das ist für heute die wichtigste Frage, weil React am Ende reines JavaScript ist. Haben Sie schon mit React oder einem anderen Framework gebaut, mit Angular oder Vue vielleicht? Und was möchten Sie heute konkret mitnehmen?

1:16 Wer aus der Angular-Welt kommt, dem hilft es oft, die Unterschiede explizit zu benennen. Wer ganz neu ist, sollte sich vom Tempo nicht irritieren lassen — sagen Sie einfach Bescheid, wenn wir zu schnell werden.

React-Architektur

1:29 Beginnen wir mit dem großen Bild. Bevor wir die erste Zeile schreiben, lohnt sich die Frage, was React eigentlich anders macht als das, was davor üblich war — denn darin steckt der ganze Denkansatz. React ist eine Bibliothek für Benutzeroberflächen, kein vollständiges Framework — diese Unterscheidung ist wichtig und wir kommen gleich darauf zurück.

1:50 Der Kern der Idee: Sie beschreiben die Oberfläche als Funktion des Zustands. Statt Schritt für Schritt anzuweisen, welches Element sich wie ändern soll, sagen Sie: Bei diesem Zustand sieht es so aus. Wie der Weg dorthin aussieht, ist Sache von React. Man kann das mit einem Navigationsgerät vergleichen: Sie nennen das Ziel, nicht jede einzelne Abbiegung.

2:10 Damit die Umsetzung schnell bleibt, arbeitet React intern mit einem Abbild der Oberfläche und ändert am Ende nur das, was sich wirklich unterscheidet. Vier Gründe, warum sich dieser Ansatz durchgesetzt hat. Der deklarative Stil nimmt Ihnen die fehleranfälligste Arbeit ab — nämlich die Oberfläche von Hand mit dem Zustand in Einklang zu halten.

2:31 Der komponentenbasierte Aufbau erlaubt es, große Oberflächen aus kleinen, überschaubaren Teilen zusammenzusetzen, die man einzeln verstehen und testen kann. Der interne Abgleich sorgt dafür, dass das trotzdem schnell bleibt. Und schließlich, ganz pragmatisch: Das Ökosystem ist riesig. Für fast jedes Problem gibt es eine erprobte Lösung — und Menschen, die Ihre Fragen schon einmal gestellt haben.

2:55 Der Projektstart ist heute erfreulich einfach. Ein Befehl legt das Projekt an, Sie wählen die React-Vorlage, installieren die Abhängigkeiten und starten den Entwicklungsserver. Vier Schritte, keine drei Minuten. Ein Hinweis zur Einordnung, weil Sie in älteren Anleitungen etwas anderes finden werden: Das lange gängige Startwerkzeug von React selbst wird nicht mehr gepflegt.

3:17 Der heutige Standard ist Vite — deutlich schneller beim Starten und beim Neuladen während der Entwicklung. Wenn Sie also im Netz auf ältere Tutorials stoßen: Der Rest gilt meist noch, nur der Projektstart hat sich geändert. Das hier ist die kleinstmögliche React-Anwendung — und sie zeigt gut, wie wenig Magie dahintersteckt.

3:36 Ganz unten passiert das Entscheidende: Ein Element aus dem HTML-Dokument wird zum Wurzelknoten erklärt, und in diesen wird die Anwendung hineingerendert. Das ist die einzige Stelle, an der React und das klassische HTML sich berühren. Alles darüber ist eine ganz normale Funktion, die etwas HTML-Ähnliches zurückgibt. Worauf es ankommt: Es gibt genau einen solchen Einstiegspunkt, und von dort hängt der ganze Baum. Wenn eine Anwendung gar nichts anzeigt, lohnt der erste Blick meist hierhin.

4:06 Legen Sie jetzt selbst ein Projekt an und bringen Sie es zum Laufen. Das Lernziel ist nicht der Befehl — der steht auf der Folie —, sondern das Verständnis für den Einstiegspunkt: Finden Sie im erzeugten Projekt die Stelle, an der die Anwendung ins HTML gehängt wird, und schauen Sie sich an, was dort passiert. Fertig sind Sie, wenn der Entwicklungsserver läuft und im Browser eine Überschrift steht, die Sie selbst geändert haben.

4:28 Achten Sie dabei darauf, wie schnell die Änderung im Browser ankommt — dieses sofortige Nachladen werden Sie den ganzen Tag nutzen. Drei Erwartungen, die man besser gleich zurechtrückt. Erstens: React rendert — mehr nicht. Es bringt keine Navigation zwischen Seiten mit, keine übergreifende Zustandsverwaltung, keinen Netzwerk-Layer.

4:48 Das alles kommt aus dem Ökosystem und ist eine bewusste Entscheidung, aber sie überrascht Umsteiger aus Angular regelmäßig. Zweitens: Der virtuelle Abgleich ist kein Zaubermittel gegen Performanceprobleme; er macht Aktualisierungen günstiger, aber schlecht geschnittene Komponenten bleiben langsam. Und drittens: Ohne Übersetzungsschritt läuft modernes React nicht — die Syntax, die wir gleich sehen, versteht kein Browser direkt.

JSX verstehen und anwenden

5:14 Damit zu der Sache, die neu Hinzukommende zuerst irritiert: HTML mitten im JavaScript. Es sieht ungewohnt aus — und ist am Ende harmloser, als es wirkt. JSX ist eine Erweiterung der JavaScript-Syntax. Sie erlaubt, HTML-ähnliches Markup direkt im Code zu schreiben. Und der wichtigste Satz dazu lautet: Es ist nur Schreiberleichterung. Beim Bauen wird daraus ganz normaler JavaScript-Code, nämlich Funktionsaufrufe, die Elemente erzeugen.

5:42 Wenn Sie das einmal im Übersetzungsergebnis gesehen haben, verliert JSX jedes Geheimnis. Die anfängliche Kritik daran — man vermische doch Darstellung und Logik — hat sich weitgehend gelegt. In der Praxis gehören beide zusammen: Was angezeigt wird, hängt von der Logik ab, und beides nebeneinander zu lesen, ist einfacher als in zwei Dateien zu springen.

6:05 Drei Vorteile. Markup und Logik liegen nah beieinander — Sie sehen auf einen Blick, warum etwas angezeigt wird. Sie können JavaScript-Ausdrücke direkt einbetten, und zwar beliebige: eine Berechnung, ein Funktionsaufruf, ein Zugriff auf ein Objekt. Damit brauchen Sie keine eigene Vorlagensprache mit eigenen Schleifen und Bedingungen zu lernen — das können Sie alles schon.

6:27 Und drittens meldet der Übersetzungsschritt fehlerhaftes Markup früh: ein nicht geschlossenes Element fällt beim Bauen auf, nicht erst im Browser. Das ist ein unterschätzter Komfortgewinn. Zwei Details, auf die es hier ankommt. Erstens die geschweiften Klammern: Alles darin ist ein JavaScript-Ausdruck, der ausgewertet und eingesetzt wird.

6:48 Hier ist es eine Umwandlung in Großbuchstaben, es könnte genauso eine Rechnung oder ein Funktionsaufruf sein. Und zweitens die Schreibweise des Attributs. Es heißt nicht `class`, sondern anders — schlicht weil `class` in JavaScript ein reserviertes Wort ist und JSX am Ende JavaScript ist. Dieselbe Logik gilt für andere Attribute, die Sie aus HTML kennen: Sie werden in der üblichen JavaScript-Schreibweise notiert. Das ist der häufigste Anfängerstolperer überhaupt.

7:17 Probieren Sie das aus. Bauen Sie eine Komponente, die einen berechneten Wert anzeigt — das aktuelle Jahr etwa, oder das Ergebnis einer kleinen Rechnung. Interessanter als die Lösung ist das Experimentieren an den Rändern: Versuchen Sie einmal, eine Bedingung mit einem `if` in die geschweiften Klammern zu schreiben. Das wird nicht funktionieren, und der Grund dafür ist genau der Punkt, den Sie mitnehmen sollen — dort gehören Ausdrücke hin, keine Anweisungen.

7:42 Wenn Sie diesen Unterschied einmal selbst erlebt haben, sitzt er. Drei Dinge, die jeden am Anfang erwischen. Die Attributnamen in der JavaScript-Schreibweise, wie eben besprochen. Dann die Regel mit dem einen Wurzelelement: Eine Komponente darf nur ein Element zurückgeben. Wenn Sie mehrere nebeneinander brauchen, packen Sie sie in ein sogenanntes Fragment — die leeren spitzen Klammern —, das keine zusätzliche Verschachtelung im HTML erzeugt.

8:08 Und drittens noch einmal der Punkt von eben: In die geschweiften Klammern gehören Ausdrücke. Für Bedingungen und Schleifen gibt es Muster, die wir am Ende des Tages noch ausführlich anschauen.

Komponenten erstellen

8:20 Jetzt zum eigentlichen Baustein von React. Alles, was Sie in einer React-Anwendung sehen, ist eine Komponente — und die gute Nachricht ist: Eine Komponente ist nicht mehr als eine Funktion. Eine Komponente ist eine JavaScript-Funktion, die JSX zurückgibt. Das ist die ganze Definition. Zwei Konventionen kommen dazu: Der Name beginnt groß, und man verwendet sie danach wie ein HTML-Element.

8:44 Sie können Komponenten beliebig ineinander verschachteln, so wie Sie HTML-Elemente verschachteln. Denken Sie an Legosteine — jeder für sich unspektakulär, aber weil alle dieselbe Verbindung haben, lässt sich daraus beliebig Komplexes bauen. Genau diese Einheitlichkeit ist der Grund, warum sich React-Code aus fremden Projekten so schnell lesen lässt: Sie wissen immer schon, welche Form Sie erwartet.

9:09 Der Nutzen ist derselbe wie bei Funktionen überhaupt, nur eben für Oberflächen. Statt Markup zu kopieren und an fünf Stellen zu pflegen, haben Sie einen Baustein und fünf Verwendungen. Verantwortlichkeiten trennen sich von selbst: Eine Komponente kümmert sich um eine Sache, und wenn sie das nicht mehr tut, merkt man es daran, dass sie unübersichtlich wird — ein sehr brauchbares Signal.

9:31 Und der dritte Punkt ist der eigentlich mächtige: Komposition. Sie setzen kleine Komponenten zu größeren zusammen, statt große zu konfigurieren. Das skaliert besser, als man zunächst denkt. Hier sehen Sie beides: die Definition und die Verwendung. Oben eine Funktion, die eine Schaltfläche zurückgibt, unten eine zweite Komponente, die diese gleich zweimal einsetzt — genauso, wie man ein HTML-Element schreiben würde.

9:56 Achten Sie auf die Schreibweise mit dem Schrägstrich am Ende: Komponenten ohne Inhalt schließt man direkt. Worauf es ankommt, steht in der Fußzeile, und es ist wirklich wichtig: Der Name muss groß beginnen. Bei Kleinschreibung nimmt React an, Sie meinten ein HTML-Element — und rendert stillschweigend nichts Sinnvolles, ohne eine hilfreiche Fehlermeldung.

10:17 Bauen Sie Ihre erste eigene Komponente — eine Karte mit Rahmen, Überschrift und etwas Text, wie man sie in jeder Oberfläche findet. Setzen Sie sie anschließend an mindestens zwei Stellen ein. Das Lernziel steckt genau in diesem zweiten Teil: Beim Mehrfacheinsatz merkt man sofort, wo die Komponente noch zu starr ist, weil überall dasselbe steht.

10:36 Notieren Sie sich diesen Wunsch — im nächsten Kapitel lösen wir ihn auf. Und probieren Sie ruhig einmal aus, was passiert, wenn Sie den Namen klein schreiben. Der erste Punkt ist der eben genannte und mit Abstand häufigste: kleingeschriebene Namen werden als HTML gedeutet. Zweitens muss eine Komponente immer etwas zurückgeben — entweder JSX oder ausdrücklich `null`, wenn nichts angezeigt werden soll.

11:00 Eine Funktion, die versehentlich nichts zurückgibt, bricht die Anwendung. Und der dritte Punkt ist subtiler, aber wichtig: Definieren Sie Komponenten nicht innerhalb anderer Komponenten. Sie werden dann bei jedem Durchlauf neu erzeugt, und React behandelt sie als jeweils neuen Baustein — mit dem Ergebnis, dass ihr Zustand ständig verlorengeht.

Props und Children

11:21 Im letzten Kapitel blieb eine Frage offen: Wie wird aus einem starren Baustein ein flexibler? Die Antwort heißt Props — und sie ist zugleich die Antwort darauf, wie Daten durch eine React-Anwendung fließen. Props sind die Eingabewerte einer Komponente. Der Aufrufer übergibt sie wie Attribute, die Komponente empfängt sie als Objekt — und dieses Objekt ist schreibgeschützt.

11:43 Das ist keine technische Formalität, sondern das Herzstück des React-Datenmodells: Daten fließen in eine Richtung, von oben nach unten. Denken Sie an eine Bestellung, die durch eine Organisation nach unten gereicht wird: Jede Ebene arbeitet damit, aber keine ändert das Original. Ein Sonderfall ist die Children-Prop — über sie bekommt eine Komponente das Markup, das zwischen ihren Tags steht.

12:06 Damit lassen sich Rahmen und Layouts bauen, die beliebige Inhalte umschließen. Drei Punkte. Erstens: Erst mit Props wird aus einem Baustein echte Wiederverwendung — gleiche Komponente, andere Daten. Genau der Wunsch aus der letzten Übung. Zweitens die Einbahnstraße: Weil Daten nur nach unten fließen, ist bei einem falschen Wert immer klar, wo man suchen muss — nämlich weiter oben.

12:29 Das klingt nach einer Einschränkung und ist in Wahrheit eine enorme Erleichterung bei der Fehlersuche. Und drittens die Children-Prop, mit der Sie Layout- und Rahmenkomponenten bauen, die nichts über ihren Inhalt wissen müssen. Hier beides im Zusammenspiel. Oben nimmt die Komponente zwei Dinge entgegen: einen Titel als normale Eigenschaft und die Kinder.

12:51 Beachten Sie die Schreibweise — die Eigenschaften werden direkt in der Parameterliste auseinandergenommen, das ist genau die Destrukturierung aus dem JavaScript-Modul. Unten die Verwendung: Der Titel steht als Attribut, der Inhalt zwischen den Tags. Worauf es ankommt: Der Aufrufer bestimmt beides, die Komponente arrangiert nur.

13:11 Und wie in der Fußzeile steht — die Komponente ändert ihre Props nie selbst. Sie sind Eingabe, nicht Arbeitsspeicher. Nehmen Sie Ihre Karte aus der vorigen Übung und machen Sie sie konfigurierbar. Titel und weitere Werte kommen von außen, der Inhalt über die Kinder. Fertig sind Sie, wenn zwei Verwendungen derselben Komponente sichtbar unterschiedlich aussehen und beliebiges Markup umschließen können.

13:35 Ein guter Test für den Schnitt: Fragen Sie sich bei jeder Eigenschaft, ob sie wirklich von außen kommen muss. Komponenten mit zwölf Props sind meist ein Zeichen dafür, dass zwei Komponenten darin stecken — darauf kommen wir im Modul über Best Practices zurück. Der wichtigste Punkt: Props sind unveränderlich. Der Versuch, ihnen innerhalb der Komponente etwas zuzuweisen, führt entweder zu einem Fehler oder — schlimmer — zu einem Wert, den React beim nächsten Durchlauf wieder überschreibt.

14:03 Wenn Sie etwas ändern wollen, brauchen Sie Zustand, und den gibt es im nächsten Kapitel. Zweitens ein Stilhinweis: Die Destrukturierung in der Parameterliste erspart Ihnen das ständige Vorangestellte und macht auf einen Blick sichtbar, was die Komponente erwartet. Und drittens: Die Children-Prop ist keine Magie, sondern eine ganz normale Eigenschaft mit festem Namen.

Rendering und State

14:25 Bis hierhin waren unsere Komponenten statisch — sie zeigen an, was man ihnen gibt. Jetzt kommt der Punkt, an dem sie lebendig werden. Und damit zum vielleicht zentralsten Konzept von React überhaupt. Rendern ist der Vorgang, bei dem React aus Ihren Komponenten und deren aktuellem Zustand die Oberfläche berechnet. Der entscheidende Mechanismus: Ändert sich der Zustand, rendert React die betroffene Komponente automatisch neu.

14:51 Sie müssen nichts aktualisieren, nichts anstoßen, nichts von Hand nachziehen. Man kann sich das wie eine Tabellenkalkulation vorstellen — Sie ändern eine Zelle, und alle abhängigen Werte aktualisieren sich von selbst, weil die Formeln die Beziehung beschreiben. Ihre Komponenten sind diese Formeln. Wer diesen Gedanken einmal verinnerlicht hat, schreibt automatisch anderen Code.

15:13 Der Leitsatz steht ganz oben: Die Oberfläche ist eine Funktion des Zustands. Zustand ändern, Oberfläche folgt. Das nimmt Ihnen die gesamte Klasse von Fehlern ab, bei denen Anzeige und Daten auseinanderlaufen — jeder, der einmal von Hand DOM-Elemente aktualisiert hat, kennt sie. Der State-Hook sorgt dafür, dass Werte über die Durchläufe hinweg erhalten bleiben; eine normale Variable in der Funktion wäre bei jedem Rendern wieder weg.

15:38 Und React aktualisiert dabei gezielt nur das, was sich tatsächlich unterscheidet — Sie bekommen die Bequemlichkeit, ohne die Rechnung dafür zu zahlen. Der Ablauf ist immer gleich und schnell verinnerlicht: Sie rufen den Hook mit einem Startwert auf, nehmen das zurückgegebene Paar auseinander — Wert und Setzfunktion —, lesen den Wert im Markup und ändern ihn über die Setzfunktion.

16:01 Genau dieser vierte Schritt löst den neuen Durchlauf aus. Und dazu die wichtigste Regel des Kapitels, die in der Fußzeile steht: Ändern Sie den Zustand nie direkt. Nur was durch die Setzfunktion geht, bemerkt React. Eine direkte Änderung wirkt oft scheinbar — der Wert ist tatsächlich anders, aber die Oberfläche bleibt stehen.

16:20 Das Beispiel ist bewusst minimal, enthält aber schon alles. Oben der Aufruf mit dem Startwert Null. Zurück kommt ein Paar: der aktuelle Wert und die Funktion, mit der Sie ihn ändern. Das ist übrigens genau das Tupel, das wir im TypeScript-Modul gesehen haben. Unten wird der Wert angezeigt und beim Klick erhöht. Was hier passiert, ist der Kreislauf von React in seiner kürzesten Form: Ereignis, Zustandsänderung, neuer Durchlauf, neue Anzeige.

16:47 Worauf es ankommt — die Funktion wird bei jedem Durchlauf komplett neu ausgeführt, aber der Zustand überlebt. Genau dafür ist der Hook da. Bauen Sie den Zähler selbst — und dann experimentieren Sie damit. Bauen Sie einmal eine normale Variable statt des Hooks ein und beobachten Sie, was passiert: Der Wert ändert sich, die Anzeige nicht.

17:08 Dieses Erlebnis ist mehr wert als jede Erklärung. Fertig sind Sie, wenn ein Klick die angezeigte Zahl sichtbar erhöht. Wer schneller ist, baut einen zweiten Knopf zum Verringern ein und probiert, was passiert, wenn man zweimal hintereinander im selben Handler erhöht — das führt direkt zum ersten Stolperstein. Drei Punkte, die anfangs verwirren. Erstens: Zustandsänderungen wirken nicht sofort.

17:32 Direkt nach dem Setzen lesen Sie im selben Durchlauf noch den alten Wert — das ist kein Fehler, sondern Absicht, weil React die Änderungen bündelt. Zweitens: Objekte und Listen im Zustand müssen neu erzeugt werden, statt sie zu ändern. Genau dafür haben wir im JavaScript-Modul den Spread-Operator geübt; hier zahlt sich das aus.

17:52 Und drittens die Hook-Regel: Hooks gehören auf die oberste Ebene der Komponente, niemals in Bedingungen oder Schleifen. React erkennt sie an ihrer Reihenfolge.

Event Handling

18:02 Zustand ändert sich selten von allein — meist, weil jemand etwas tut. Damit sind wir bei den Ereignissen: Klicks, Eingaben, alles, was von den Nutzern kommt. React reicht Ereignisse über Eigenschaften an Ihre Funktionen weiter — für einen Klick, für eine Änderung und so weiter, jeweils in der gewohnten JavaScript-Schreibweise.

18:23 Was Sie dabei bekommen, ist nicht ganz das native Browser-Ereignis, sondern eine vereinheitlichte Variante darüber. Der Grund ist historisch und praktisch zugleich: Browser haben sich in Details unterschiedlich verhalten, und React glättet das. Für Sie bedeutet es schlicht, dass Ihr Code überall gleich funktioniert. Sie merken von dieser Zwischenschicht im Alltag nichts — außer dass die Dinge angenehm einheitlich sind.

18:47 Drei Vorteile gegenüber dem klassischen Weg. Die einheitliche Schnittstelle über alle Browser hinweg, wie eben beschrieben. Dann: Handler sind ganz normale JavaScript-Funktionen — Sie können darin alles tun, was Sie sonst auch tun, ohne besondere Regeln. Und der dritte Punkt ist der im Alltag spürbarste: Sie registrieren das Ereignis deklarativ direkt am Element, statt es von Hand anzumelden und — was gern vergessen wird — später wieder abzumelden.

19:12 Diese Aufräumarbeit war eine klassische Quelle von Speicherlecks. Hier entfällt sie schlicht. Zwei Dinge sind hier wichtig. Erstens der Parameter der Handler-Funktion: Über ihn bekommen Sie das Ereignis und können zum Beispiel das Standardverhalten unterdrücken — bei einem Knopf in einem Formular etwa das automatische Absenden.

19:31 Und zweitens die Fußzeile, die Sie sich wirklich merken sollten: Sie übergeben die Funktion, Sie rufen sie nicht auf. Mit Klammern dahinter wird die Funktion sofort beim Rendern ausgeführt und ihr Rückgabewert als Handler registriert. Das ist einer der häufigsten Anfängerfehler, und die Wirkung ist verwirrend: Es passiert etwas — nur eben sofort und nicht beim Klick.

19:53 Bringen Sie eine Komponente dazu, auf einen Klick sichtbar zu reagieren — der Text ändert sich, eine Farbe wechselt, etwas erscheint. Verbinden Sie das ruhig mit dem Zustand aus dem letzten Kapitel, dann haben Sie den vollen Kreislauf einmal selbst gebaut. Probieren Sie zusätzlich den Fall aus, dass der Handler ein Argument braucht — und schauen Sie, warum ein direkter Aufruf dort nicht funktioniert und eine kleine anonyme Funktion die Lösung ist.

20:17 Das ist die zweite Hälfte des Stolpersteins von eben. Der Klassiker steht zuerst: Klammern hinter dem Funktionsnamen führen zum sofortigen Aufruf. Zweitens die Lösung für den Fall, dass Sie Argumente übergeben wollen — eine kleine anonyme Funktion drumherum, die erst beim Klick aufgerufen wird. Das sieht umständlich aus, ist aber das übliche Muster.

20:37 Und drittens ein praktischer Punkt: Ein Knopf innerhalb eines Formulars löst standardmäßig das Absenden aus und lädt damit die Seite neu — mitten in einer Single-Page-Anwendung ein überraschendes Erlebnis. Entweder das Standardverhalten unterdrücken oder den Typ des Knopfes ausdrücklich setzen.

Formulare

20:54 Formulare sind der Ort, an dem Zustand und Ereignisse zusammenkommen — und zugleich das Thema, bei dem React einen etwas anderen Weg geht, als man es aus klassischem HTML kennt. In einem kontrollierten Formular liegt der Wert des Eingabefelds im React-Zustand. Das Feld zeigt an, was im Zustand steht, und meldet jede Änderung zurück.

21:15 Es klingt zunächst nach einem Umweg — das Feld weiß seinen Wert doch selbst. Aber genau darin liegt der Punkt: Es soll ihn nicht selbst wissen. React ist die einzige Quelle der Wahrheit. Denken Sie an ein Kassensystem, bei dem die Anzeige nicht selbst rechnet, sondern immer das zeigt, was die Kasse sagt. So gibt es nur einen Wert, dem man vertrauen muss — und keine zwei, die auseinanderdriften können.

21:39 Der Aufwand lohnt sich aus drei Gründen. Der Eingabewert ist jederzeit im Zustand verfügbar — Sie müssen ihn nicht erst aus dem Feld auslesen, wenn Sie ihn brauchen. Validierung und Formatierung werden möglich, während getippt wird: Zeichen begrenzen, Großschreibung erzwingen, sofort eine Rückmeldung geben. Und drittens der grundsätzliche Punkt: ein einziger Datenfluss statt zweier Wahrheiten.

22:02 Wer schon einmal einen Fehler gesucht hat, bei dem im Feld etwas anderes stand als im Programm, weiß, wie viel diese Klarheit wert ist. Das gesamte Muster in zwei Zeilen. Der angezeigte Wert kommt aus dem Zustand, jede Änderung schreibt zurück. Diese beiden gehören untrennbar zusammen — steht nur der erste Teil da, ist das Feld schreibgeschützt, und die Nutzer wundern sich, warum das Tippen nichts bewirkt.

22:26 React weist im Entwicklungsmodus sogar ausdrücklich darauf hin. Worauf es ankommt: Der Weg geht immer über den Zustand. Was Sie tippen, landet nicht direkt im Feld, sondern macht eine kleine Runde durch React und kommt von dort zurück. Das fühlt sich sofort und flüssig an, ist aber genau dieser Kreislauf. Bauen Sie ein Eingabefeld, dessen Inhalt live an anderer Stelle der Oberfläche erscheint — als Vorschau etwa oder als Zeichenzähler.

22:53 Genau dieses Live-Verhalten macht sichtbar, dass der Wert wirklich im Zustand liegt und nicht im Feld. Fertig sind Sie, wenn beim Tippen beides synchron läuft. Und probieren Sie einmal aus, was passiert, wenn Sie die Änderungsbehandlung weglassen: Das Feld nimmt keine Eingabe mehr an. Dieses Verhalten ist eine der häufigsten Fragen von Einsteigern — jetzt kennen Sie die Antwort.

23:15 Der erste Punkt ist eben schon gefallen: ein gebundener Wert ohne Änderungsbehandlung macht das Feld unveränderbar. Der zweite ist subtiler und erzeugt eine irritierende Warnmeldung: Beginnen Sie den Zustand mit einer leeren Zeichenkette, nicht mit einem undefinierten Wert. Sonst startet das Feld unkontrolliert und wechselt beim ersten Tippen die Betriebsart.

23:35 Und der dritte Punkt ist ein Klassiker bei Zahlenfeldern: Was aus einem Eingabefeld kommt, ist immer Text — auch bei einem Zahlenfeld. Die Umwandlung müssen Sie selbst machen, sonst addieren Sie Zeichenketten.

Listen und Keys

23:47 Fast jede Oberfläche zeigt irgendwo eine Liste — Suchergebnisse, Nachrichten, Aufgaben. Wie man aus Daten Markup macht, ist deshalb ein Alltagsthema. Und es gibt dabei ein Detail, das mehr Ärger verursacht als jedes andere. Eine Liste entsteht, indem Sie ein Array in ein Array von Elementen umformen — mit genau der Methode, die wir im JavaScript-Modul geübt haben.

24:10 Neu ist nur eine Anforderung: Jedes Element braucht eine stabile, eindeutige Kennung. Der Grund liegt darin, wie React arbeitet. Es vergleicht den alten und den neuen Stand und muss dabei entscheiden, welches Element von vorher welchem von jetzt entspricht. Ohne Kennung kann es nur die Position nehmen — und die ändert sich, sobald jemand sortiert oder etwas einfügt.

24:31 Die Kennung ist gewissermaßen der Name auf dem Sitzplatz statt der Sitzplatznummer. Drei Punkte. Die Umformung ersetzt das mühsame Zusammenbauen von Markup — Ihre Daten bestimmen, was angezeigt wird, und Sie beschreiben nur die Form eines einzelnen Eintrags. Die Kennung hilft React, Elemente über die Durchläufe hinweg wiederzuerkennen; sie ist keine Formalität, sondern die Grundlage des Abgleichs.

24:55 Und der dritte Punkt ist eine Warnung, die man ernst nehmen sollte: Falsche Kennungen führen zu Fehlern, die beim Sortieren und Löschen auftreten — also selten und schwer reproduzierbar. Genau die Sorte Fehler, die man nicht sucht, sondern vermeidet. Das Standardmuster, das Sie in jedem React-Projekt finden. Die Liste wird umgeformt, jeder Eintrag wird zu einem Listenelement, und dieses Element trägt die Kennung.

25:19 Beachten Sie, wo sie steht: am äußersten Element innerhalb der Umformung, nicht irgendwo darin. Worauf es ankommt, steht in der Fußzeile — nehmen Sie eine stabile Kennung aus Ihren Daten, typischerweise eine Datenbank-Kennung. Der Positionsindex steht zwar verlockend zur Verfügung, ist aber genau das, was Sie nicht wollen: Er ändert sich, sobald sich die Reihenfolge ändert.

25:42 Rendern Sie eine Liste aus Objekten — Aufgaben, Produkte, was Sie mögen. Das Erfolgskriterium ist bewusst an der Browser-Konsole festgemacht: Sie soll keine Warnung zu fehlenden Kennungen zeigen. Gewöhnen Sie sich an, dort während der Entwicklung hinzuschauen; React gibt sehr brauchbare Hinweise, die viele schlicht übersehen.

26:00 Wer weiter will: Bauen Sie eine Schaltfläche zum Löschen eines Eintrags ein und probieren Sie es einmal mit dem Positionsindex als Kennung und einmal mit einer echten. Der Unterschied ist eindrucksvoll. Der Positionsindex als Kennung steht zu Recht an erster Stelle — er funktioniert, solange sich nichts ändert, und bricht genau dann, wenn es interessant wird.

26:22 Beim Umsortieren oder Einfügen ordnet React dann Zustände falsch zu; das äußert sich etwa in Eingabefeldern, deren Inhalt plötzlich beim falschen Eintrag steht. Zweitens: Fehlende Kennungen erzeugen eine Warnung und dieselbe Art subtiler Fehler. Und drittens ein Detail der Platzierung — die Kennung gehört an das äußerste Element innerhalb der Umformung. Steht sie weiter innen, hilft sie nicht.

Conditional Rendering

26:45 Das letzte Kapitel des Tages. Eine echte Oberfläche zeigt nicht immer dasselbe — sie lädt, sie ist leer, sie zeigt einen Fehler oder Inhalte. Wie steuert man das? Bedingtes Rendern heißt: unterschiedliche Oberfläche je nach Zustand. Und weil JSX Ausdrücke einbettet, brauchen Sie dafür keine eigene Sprache. Es sind dieselben JavaScript-Mittel, die Sie ohnehin kennen: der ternäre Operator, das logische Und, oder eine vorab berechnete Variable.

27:14 Das ist ein Unterschied zu anderen Frameworks, die eigene Anweisungen im Markup mitbringen. Der Vorteil: nichts Neues zu lernen. Der Preis: Man kann sich damit auch sehr unleserlichen Code bauen, wenn man es übertreibt. Disziplin ist hier wichtiger als bei einer Vorlagensprache, die Grenzen setzt. Drei Aspekte. Erstens der praktische: Jede reale Oberfläche hat Zustände — lädt, Fehler, leer, gefüllt.

27:40 Diese sauber zu unterscheiden, ist einer der Unterschiede zwischen einer Demo und einer benutzbaren Anwendung. Zweitens: Sie brauchen keinen Vorlagen-Dialekt, sondern nutzen normales JavaScript. Und drittens eine ehrliche Einschränkung, die gleich in den Stolpersteinen wiederkommt: Das bleibt lesbar, solange die Bedingungen klein bleiben.

28:01 Wenn drei Bedingungen ineinander stecken, ist es Zeit, die Komponente aufzuteilen — nicht, cleverer zu formulieren. Hier stehen die drei gängigen Muster nebeneinander. Ganz oben der frühe Ausstieg mit einem `return` — mein Favorit für Lade- und Fehlerzustände, weil danach der Rest der Komponente sich um diese Fälle nicht mehr kümmern muss.

28:21 In der Mitte das logische Und für „zeige das nur, wenn". Und darunter der ternäre Operator für „entweder das oder jenes". Worauf es ankommt, steht in der Fußzeile und ist die klassische Falle: Das logische Und rendert bei einem falschen Wert links nichts — außer bei der Null, die dann tatsächlich auf dem Bildschirm erscheint.

28:40 Bauen Sie eine Komponente, die je nach Zustand einen Lade- oder einen Inhaltszustand anzeigt. Nutzen Sie dabei beide Muster einmal, damit Sie ein Gefühl dafür bekommen, wann welches passt. Und bauen Sie bewusst den Fehler mit der Null nach: Zeigen Sie etwas abhängig von einer Anzahl an und setzen Sie diese auf null. Sie werden eine einsame Null auf dem Bildschirm sehen. Diese Minute Irritation spart Ihnen später eine Stunde Fehlersuche, denn der Fehler sieht im Code völlig harmlos aus.

29:09 Die Null-Falle kennen Sie jetzt — prüfen Sie ausdrücklich auf „größer als null", statt sich auf die Wahrheitswertigkeit zu verlassen. Zweitens: Verschachtelte ternäre Operatoren. Einer ist gut lesbar, zwei sind grenzwertig, drei sind ein Rätsel. Wenn Sie dort ankommen, ziehen Sie die Entscheidung in eine Variable darüber oder teilen die Komponente.

29:29 Und drittens etwas, das man positiv wenden sollte: `null` zurückzugeben ist völlig legitim und rendert bewusst nichts. Das ist oft sauberer, als die Verwendungsstelle mit einer Bedingung zu umgeben. Schauen wir zurück auf den Tag. Sie haben das Fundament: die Architektur, JSX und Komponenten — und wissen, dass hinter alldem normales JavaScript steckt.

29:51 Darauf sitzen Props, Zustand und Ereignisse, mit denen Komponenten dynamisch werden. Und schließlich die Muster, die aus Bausteinen eine echte Oberfläche machen: Listen, Formulare und bedingtes Rendern. Der nächste Schritt ist, das alles in einer kleinen Anwendung zusammenzubringen — und genau da wird die Frage interessant, wo der Zustand eigentlich hingehört.

30:13 Damit beschäftigt sich das nächste Modul.

Danke!

30:16 Damit sind wir am Ende der React-Grundlagen. Alle Materialien liegen in der Freigabe, und ich empfehle Ihnen ausdrücklich, die Übungen noch einmal in Ruhe nachzubauen — React lernt man durch Tippen, nicht durch Zuhören. Bei Fragen erreichen Sie uns unter der angegebenen Adresse. Im nächsten Modul geht es um Zustandsverwaltung: Effekte, geteilter Zustand, Context und die Frage, wann einfacher besser ist.

30:39 Vielen Dank für Ihre Aufmerksamkeit und das Mitmachen.