React ist eine Open-Source-JavaScript-Bibliothek zur Entwicklung von Benutzeroberflächen, die 2013 von Meta veröffentlicht wurde. React führte das Konzept der komponentenbasierten UI-Entwicklung in den Mainstream ein: Die Oberfläche wird aus wiederverwendbaren, unabhängigen Komponenten zusammengesetzt, die ihren eigenen Zustand verwalten. React ist heute die meistgenutzte Frontend-Bibliothek der Welt und die Grundlage für Frameworks wie Next.js.
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.
Kostenloses Werkzeug
Mit dem KI-Sichtbarkeits-Check von onlinewachsen.de lässt sich kostenlos und ohne Anmeldung prüfen, ob ChatGPT, Gemini, Claude und Perplexity ein Unternehmen nennen und richtig beschreiben. Eine E-Mail wird nur verschickt, wenn man sie ausdrücklich anfordert.
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.
Das React-Prinzip
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.
Die wichtigsten Konzepte
JSX
JSX
JavaScript XML, eine Syntaxerweiterung, die HTML-ähnlichen Code direkt in JavaScript ermöglicht. JSX wird vom Compiler in reguläres JavaScript übersetzt. Macht Komponentenstruktur lesbar und intuitiv.
Props
Props (Properties)
Daten, die von einer übergeordneten Komponente an eine untergeordnete weitergegeben werden. Props sind unveränderlich, die empfangende Komponente kann sie nur lesen, nicht schreiben.
State
State (Zustand)
Interne, veränderliche Daten einer Komponente. Ändert sich der State, rendert React die Komponente automatisch neu. Verwaltet mit dem Hook useState.
Hooks
Hooks
Funktionen, die Komponenten Zugriff auf React-Funktionalität geben. Die wichtigsten: useState für Zustandsverwaltung, useEffect für Seiteneffekte, useContext für geteilten Zustand.
vDOM
Virtual DOM
Eine im Arbeitsspeicher gehaltene Kopie des echten DOM. React vergleicht bei jeder Zustandsänderung den neuen Virtual DOM mit dem alten und aktualisiert nur die tatsächlich veränderten Teile des echten DOM.
Alles ist eine Komponente
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:
Prinzip
Wiederverwendbarkeit
Eine Komponente wird einmal definiert und beliebig oft eingesetzt. Eine Button-Komponente mit unterschiedlichen Props ergibt unterschiedliche Buttons, ohne Code-Duplikation.
Prinzip
Kapselung
Jede Komponente verwaltet ihre eigene Logik, ihren eigenen Zustand und ihr eigenes Styling. Änderungen an einer Komponente beeinflussen andere Komponenten nicht.
Prinzip
Komposition
Komplexe UIs entstehen durch das Zusammensetzen einfacher Komponenten. Eine Seite ist eine Komponente, die aus Abschnitt-Komponenten besteht, die aus Card-Komponenten bestehen.
Prinzip
Unidirektionaler Datenfluss
Daten fließen immer von oben nach unten, von Eltern- zu Kindkomponenten via Props. Das macht den Zustandsfluss vorhersehbar und leicht nachvollziehbar.
Das React-Ökosystem
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
React im Vergleich zu Alternativen
Stärken von React
Größtes Ökosystem und Community aller Frontend-Bibliotheken
Sehr flexible Architektur, kein erzwungenes Meinungsgerüst
Basis für Next.js, Remix und weitere produktionsreife Frameworks
Erstklassiger TypeScript-Support
React Server Components für serverseitiges Rendering ohne Client-JavaScript
Schwächen von React
Nur eine UI-Bibliothek, kein vollständiges Framework wie Angular
Viele Entscheidungen über Routing, State und Datenabruf bleiben dem Team überlassen
Lernkurve bei fortgeschrittenen Konzepten wie Server Components und Concurrent Mode
Bundle-Größe ohne Optimierung höher als bei Vue oder Svelte
React vs. Vue vs. Svelte
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.
Wann ist React die richtige Wahl?
Komplexe, interaktive Benutzeroberflächen
Dashboards, Web-Apps, SaaS-Produkte und alle Anwendungen mit viel Zustandslogik und Nutzerinteraktion profitieren von Reacts komponentenbasiertem Ansatz.
Projekte mit Next.js
Wer Next.js einsetzt, arbeitet automatisch mit React. Die Kenntnis der React-Grundlagen ist Voraussetzung für effektives Arbeiten mit Next.js.
Teams mit mehreren Entwicklern
Reacts Komponentenstruktur und die klare Trennung von Verantwortlichkeiten erleichtern die parallele Arbeit mehrerer Entwickler an derselben Codebasis.
Langfristig gepflegte Projekte
Reacts starkes Ökosystem, Metas Rückendeckung und die große Community garantieren langfristige Unterstützung und regelmäßige Updates.
Häufige Fragen zu React
Ist React ein Framework oder eine Bibliothek?
+
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.
Was ist der Unterschied zwischen React und React DOM?
+
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.
Was sind Hooks und warum wurden sie eingeführt?
+
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.
Muss ich Redux für die Zustandsverwaltung in React lernen?
+
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.
Was ist der Unterschied zwischen React und React Native?
+
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.
Verwandte Begriffe
HTMLHTML (HyperText Markup Language) ist eine Auszeichnungssprache zur Strukturierung von Webinhalten.
Next.jsNext.js ist ein Open-Source-Framework für React, das von Vercel entwickelt wird.
VercelVercel ist eine Cloud-Plattform für das Hosting und Deployment von Frontend-Anwendungen und serverlosen Funktionen.
Wir verwenden Cookies, um Ihr Nutzungserlebnis auf unserer Website zu verbessern. Durch die Nutzung unserer Website erklären Sie sich mit der Verwendung von Cookies einverstanden.
Cooke Präferenzen
Verwalten Sie Ihre Cookie-Einstellungen unten:
Essential cookies enable basic functions and are necessary for the proper function of the website.
Name
Description
Duration
Cookie Preferences
This cookie is used to store the user's cookie consent preferences.
30 days
Statistics cookies collect information anonymously. This information helps us understand how visitors use our website.
Google Analytics is a powerful tool that tracks and analyzes website traffic for informed marketing decisions.
Wird verwendet, um den Sitzungsstatus des Benutzers zu erhalten.
2 Jahre
_ga
Wird verwendet, um eindeutige Benutzer zu unterscheiden.
2 Jahre
Analyse-Tool von Microsoft, das aufzeichnet, wie Nutzer mit der Website interagieren (z. B. Klicks, Scroll-Bewegungen), um die Benutzerfreundlichkeit zu analysieren und zu verbessern.
In 2 Minuten erfährst du, ob und wie KI-Modelle über deine Marke sprechen.
„5 Sterne sind absolut verdient!Von der ersten Idee bis zur fertigen Website hat alles gepasst. Das Team arbeitet kreativ, modern und mit einem richtig guten Gespür für Design und Markenauftritt. Unsere Website für Running Late ist jung, frisch und genau so geworden, wie wir sie uns vorgestellt haben.Besonders überzeugt hat uns die schnelle Kommunikation, die Zuverlässigkeit und die Fähigkeit, eigene Ideen einzubringen und gleichzeitig unsere Wünsche perfekt umzusetzen.Wer eine Webagentur sucht, die nicht nur schöne Webseiten gestaltet, sondern auch mitdenkt und individuelle Lösungen entwickelt, ist hier genau richtig. Vielen Dank für die tolle Zusammenarbeit. Wir freuen uns schon auf die nächsten gemeinsamen Projekte!“
„Absolut kompetente und kreative Jungs bei onlinewachsen.de. So eine reibungslose und gleichzeitig kreative Zusammenarbeit erlebt man wirklich selten. Man merkt sofort, dass hier Profis am Werk sind, die ihr Handwerk verstehen und mitdenken. Würde ich jederzeit wieder machen und kann ich ohne Einschränkung weiterempfehlen. 10/10 – besser geht's wirklich nicht.“
„Alles sehr zufrieden stellend, kompetent, höflich und korrekt. Macht Freude mit Euch zusammen zu arbeiten. Erlebt man heute leider nicht alle Tage. Weiter so 👍 👍👍👍👍“
„Das Team von onlinewachsen.de hat uns bei der Neugestaltung unserer Website geholfen. Dabei sind wir von Anfang an abgeholt, kompetent beraten und in jeden Gestaltungsprozess eingebunden worden. Darüber hinaus betreut uns das Team nun weiter für die Optimierung der Website, Seo und Geo. Wir sind dankbar für die einwandfreie Zusammenarbeit und empfehlen das Team gerne jederzeit weiter.“
„Wir wurden durch Kreativitat, Herzblut und Professionalität überzeugt. Alle Vorschläge wurden wie besprochen umgesetzt, und das Ergebnis ist genau so geworden, wie wir es uns vorgestellt haben, sogar noch besser! Ein junges, engagiertes Team mit Vision. Klare Empfehlung und ein großes Dankeschön!“
„Sehr gute Beratung, kompetent und wissen wovon sie sprechen. Engagiertes Team die im Sinne des Kunden planen, entwickeln und bestrebt sind für ihre Kunden das Beste herauszuholen.“
„Habe die Seite zu meiner Social-Media Agentur bei ihnen machen lassen, junges dynamisches Team, mit direkten Lösungsvorschlägen. Für jemanden wie mich, der sich noch nie richtig mit Web-Design auseinander gesetzt hat, einfach eine Erleichterung. Preis sowie Vorgehen sehr verständlich erläutert. Danke“
