React hat die Art, wie Benutzeroberflächen gebaut werden, grundlegend verändert. Statt Seiten von Hand zu manipulieren, beschreibt man den gewünschten Zustand – React kümmert sich um den Rest.
Vor React wurde die DOM-Manipulation direkt mit JavaScript oder jQuery vorgenommen. Das bedeutete: Entwickler mussten selbst verfolgen, welche Teile der Seite sich bei welchem Ereignis wie ändern. Bei komplexen Anwendungen wurde das schnell unübersichtlich und fehleranfällig.
React dreht diesen Ansatz um. Statt zu beschreiben wie sich die UI ändern soll, beschreibt man was die UI zu einem bestimmten Zeitpunkt darstellen soll. React berechnet dann selbst, welche Änderungen im DOM notwendig sind – über den sogenannten Virtual DOM.
UI = f(state). Die Benutzeroberfläche ist eine Funktion des aktuellen Zustands. Ändert sich der Zustand, berechnet React automatisch die minimalen notwendigen DOM-Änderungen und rendert die betroffenen Komponenten neu. Entwickler denken nicht mehr in DOM-Operationen, sondern in Zustandsübergängen.
In React wird jede UI-Einheit als Komponente modelliert – von einem einzelnen Button bis zur gesamten Seite. Komponenten können ineinandergeschachtelt werden und bilden so einen Komponentenbaum:
Eine Komponente wird einmal definiert und beliebig oft eingesetzt. Eine Button-Komponente mit unterschiedlichen Props ergibt unterschiedliche Buttons – ohne Code-Duplikation.
Jede Komponente verwaltet ihre eigene Logik, ihren eigenen Zustand und ihr eigenes Styling. Änderungen an einer Komponente beeinflussen andere Komponenten nicht.
Komplexe UIs entstehen durch das Zusammensetzen einfacher Komponenten. Eine Seite ist eine Komponente, die aus Abschnitt-Komponenten besteht, die aus Card-Komponenten bestehen.
Daten fließen immer von oben nach unten – von Eltern- zu Kindkomponenten via Props. Das macht den Zustandsfluss vorhersehbar und leicht nachvollziehbar.
React selbst ist bewusst schlank gehalten. Für alles, was über reine UI-Darstellung hinausgeht, gibt es ein breites Ökosystem etablierter Bibliotheken:
| Aufgabe | Populäre Lösung | Hinweis |
|---|---|---|
| Routing | React Router, Next.js App Router | Bei Next.js eingebaut – kein separates Paket nötig |
| Globaler Zustand | Zustand, Redux Toolkit, Jotai | Zustand empfohlen für neue Projekte – einfach und performant |
| Server-State / Datenabruf | TanStack Query, SWR | Caching, Refetching und Loading-States out of the box |
| Formulare | React Hook Form, Formik | React Hook Form hat weniger Re-renders und bessere Performance |
| Styling | Tailwind CSS, CSS Modules, styled-components | Tailwind CSS dominiert neue Projekte |
| Komponentenbibliotheken | shadcn/ui, Radix UI, MUI | shadcn/ui ist kopierbasiert – kein Paket, volle Kontrolle |
Vue ist zugänglicher und hat eine klarere Konvention – gut für Teams ohne React-Erfahrung. Svelte kompiliert zu nativem JavaScript ohne Virtual DOM und erzeugt kleinere Bundles. React gewinnt durch Ökosystem, Jobmarkt und Framework-Unterstützung. Für professionelle Webprojekte mit Wachstumsambitionen ist React heute die sicherste Wahl.
React ist offiziell eine Bibliothek – genauer gesagt eine UI-Bibliothek. Es löst gezielt ein Problem: die Darstellung und Aktualisierung von Benutzeroberflächen. Alles andere – Routing, Datenabruf, Zustandsverwaltung – überlässt React dem Entwickler oder spezialisierten Bibliotheken. Ein vollständiges Framework wie Angular oder Next.js trifft diese Entscheidungen hingegen selbst und gibt eine Gesamtstruktur vor.
React ist der Kern – es enthält die Logik für Komponenten, Hooks und den Virtual DOM. React DOM ist das Paket, das React mit dem Browser-DOM verbindet und das Rendering im Browser übernimmt. Diese Trennung ermöglicht es, React auch für andere Ziele einzusetzen – etwa React Native für mobile Apps, das statt React DOM eine eigene native Rendering-Schicht verwendet.
Hooks wurden mit React 16.8 eingeführt und ermöglichen es, Zustand und andere React-Funktionen in Funktionskomponenten zu nutzen – ohne Klassen schreiben zu müssen. Vor Hooks mussten zustandsbehaftete Komponenten als Klassen implementiert werden, was umständlich und fehleranfällig war. Heute sind Funktionskomponenten mit Hooks der Standard – Klassenkomponenten gelten als veraltet, werden aber weiterhin unterstützt.
Nein. Redux war lange der Standard für globalen Zustand in React-Anwendungen, gilt aber heute als übermäßig komplex für die meisten Projekte. Moderne Alternativen wie Zustand oder Jotai sind deutlich schlanker und für neue Projekte empfehlenswerter. Für Server-State – also Daten, die von einer API abgerufen werden – ist TanStack Query die bessere Lösung. Redux Redux Toolkit bleibt relevant für sehr große, komplexe Anwendungen mit strengen Anforderungen an Vorhersehbarkeit.
React ist für Webanwendungen im Browser. React Native überträgt das gleiche Komponentenmodell auf native mobile Apps für iOS und Android. Statt HTML-Elemente rendert React Native native UI-Elemente des jeweiligen Betriebssystems. Der Code ist nicht identisch, aber die Konzepte – Komponenten, Props, State, Hooks – sind dieselben. Wer React beherrscht, hat eine deutlich flachere Lernkurve bei React Native.