Was ist React?

Alles ist eine Komponente

Eine Komponente ist eine Funktion, die UI zurückgibt. Komponenten lassen sich verschachteln und wiederverwenden — eine Seite entsteht als Baum aus Komponenten.

function Welcome({ name }: { name: string }) {
  return <h1>Hallo {name}</h1>;
}

// Verwendung:
<Welcome name="Luis" />

Props und State

• Props: Daten, die von außen in eine Komponente gegeben werden (read-only)
• State: interne, veränderliche Daten einer Komponente
• Ändert sich State, rendert React die betroffene UI automatisch neu

Wie React die Oberfläche aktualisiert

Der eigentliche Trick von React liegt darin, wie es Änderungen umsetzt. Ändert sich der Zustand einer Komponente, berechnet React zunächst intern, wie die neue Oberfläche aussehen müsste, und vergleicht das Ergebnis mit dem bisherigen Stand. Dann ändert es im echten DOM nur genau die Stellen, die sich wirklich unterscheiden. Dieses gezielte Aktualisieren ist schnell und erspart Entwicklern die fehleranfällige Handarbeit, einzelne Elemente selbst zu manipulieren.

Hooks: Zustand und Effekte in Funktionen

Damit auch einfache Funktionskomponenten Zustand und Logik erhalten, kennt React sogenannte Hooks. Mit useState hält eine Komponente veränderliche Daten, etwa den Inhalt eines Eingabefelds. Mit useEffect reagiert sie auf Ereignisse außerhalb, zum Beispiel um beim Anzeigen Daten von einer API zu laden. Hooks folgen klaren Regeln — sie stehen immer am Anfang der Komponente — und haben React deutlich schlanker und lesbarer gemacht als frühere, klassenbasierte Ansätze.

Wann sich React lohnt

React spielt seine Stärken bei Oberflächen aus, die sich häufig ändern und aus vielen wiederkehrenden Bausteinen bestehen — Dashboards, Shops, interaktive Web-Apps. Für eine einfache, statische Seite ist es dagegen oft überdimensioniert. In der Praxis kommt React selten allein: Frameworks wie Next.js ergänzen Routing, Server-Rendering und SEO-Funktionen und machen aus der Bibliothek eine vollständige Grundlage für professionelle Projekte.

Listen rendern und der key

Sehr oft entsteht eine Oberfläche aus Daten: aus einem Array von Produkten wird eine Liste von Karten. In React erledigt das die Methode map, die jeden Eintrag in eine Komponente übersetzt. Dabei verlangt React eine zusätzliche Angabe, das key-Attribut. Es sagt React, welches gerenderte Element zu welchem Datensatz gehört — nur so erkennt die Bibliothek beim nächsten Durchlauf, ob ein Eintrag neu ist, entfernt wurde oder nur seine Position gewechselt hat. Als key eignet sich eine stabile, eindeutige Kennung aus den Daten, etwa die ID. Der Listenindex ist eine schlechte Wahl, sobald sortiert, gefiltert oder gelöscht wird.

function Produktliste({ produkte }: { produkte: { id: string; name: string }[] }) {
  return (
    <ul>
      {produkte.map((p) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

Daten fließen nach unten

React kennt eine klare Richtung: Daten wandern über Props vom Eltern- zum Kindelement, nie umgekehrt. Soll ein Kind etwas verändern, bekommt es dafür eine Funktion als Prop übergeben und meldet das Ereignis nach oben. Brauchen zwei benachbarte Komponenten denselben Zustand, verschiebt man ihn in die nächste gemeinsame Elternkomponente — das nennt man „State anheben“. Wenn Informationen quer durch die ganze Anwendung benötigt werden, etwa der angemeldete Nutzer oder das Farbschema, reicht man sie nicht durch jede Ebene durch, sondern stellt sie über einen Context bereit. Dieser eindeutige Datenfluss macht nachvollziehbar, woher jeder Wert stammt.

Auch Formulare folgen diesem Prinzip. Statt den Inhalt eines Eingabefelds beim Absenden aus dem DOM auszulesen, hält React ihn im State: Das Feld bekommt seinen angezeigten Wert aus dem State, und bei jeder Eingabe schreibt eine Funktion den neuen Wert dorthin zurück. Man spricht von kontrollierten Feldern. Der Aufwand zahlt sich aus, weil der Zustand des Formulars jederzeit an einer Stelle steht — Eingaben lassen sich sofort prüfen, ein Absende-Button gezielt sperren und Felder abhängig voneinander ein- oder ausblenden, ohne dass irgendwo eine zweite Wahrheit entsteht.