Was ist React? Leitfaden für Einsteiger

01Was ist React und wofür braucht man es?

Die kürzeste Antwort auf die Frage »Was ist React?«: eine JavaScript-Bibliothek zum Bau von Benutzeroberflächen, die im Browser laufen. Teile einer Webseite wie Menü, Produktkarte, Warenkorb oder Formular definieren Sie einzeln und setzen daraus dann die ganze Seite zusammen.

React ist kein Framework, sondern eine Bibliothek. Für Routing, Datenabruf oder serverseitige Aufgaben braucht es zusätzliche Werkzeuge. Dank dieser Flexibilität lässt sich React in jeder Größenordnung einsetzen, vom kleinen Widget bis zum großen Verwaltungsbereich.

Um React zu verstehen, sollte man zuerst die Sprache selbst kennen. Fehlen die Grundlagen, empfehlen wir Ihnen, mit unserem Beitrag Was ist JavaScript? zu beginnen; alles, was Sie in React schreiben, ist am Ende JavaScript.

02Wofür wird React verwendet?

Die eigentliche Stärke von React ist, dass die Oberfläche automatisch aktualisiert wird, sobald sich Daten ändern. Wird ein Produkt in den Warenkorb gelegt, steigt der Zähler; wird ein Filter gewählt, aktualisiert sich die Liste. Entwickler müssen diese Aktualisierungen nicht einzeln von Hand schreiben.

Ein weiterer Gewinn ist die Wartbarkeit. Weil die Oberfläche in Komponenten aufgeteilt ist, ändern Sie das Aussehen einer Schaltfläche in nur einer Datei; die Änderung wirkt überall, wo die Komponente verwendet wird. In großen Teams kann jeder an einer anderen Komponente arbeiten, wodurch auch die Aufgabenverteilung klarer wird.

Auch die große Community von React ist ein praktischer Vorteil. Für Anforderungen wie Datumsauswahl, Tabellen, Diagramme oder Formularvalidierung gibt es ausgereifte Open-Source-Pakete; jede Abhängigkeit bringt jedoch Wartungsaufwand ins Projekt, die Paketauswahl sollte daher bewusst erfolgen.

Deshalb spielt React seine Stärken bei Bildschirmen mit intensiver Nutzerinteraktion aus. Typische Einsatzgebiete sind:

• Verwaltungsbereiche und Reporting-Ansichten
• Produktlisten, Filter und Warenkorb-Abläufe im E-Commerce
• Mehrstufige Abläufe wie Reservierungs-, Termin- und Angebotsformulare
• Live-Ansichten mit Echtzeitdaten (Bestellungen, Lager, Messaging)
• Mobile Apps mit React Native (dasselbe Denkmodell, andere Plattform)

03Wie funktioniert die Komponentenstruktur von React?

In React ist alles eine Komponente (Component). Eine Komponente ist eine Funktion, die einen Teil der Oberfläche samt Verhalten enthält. Eine Komponente »Produktkarte« schreiben Sie einmal und verwenden sie hundertfach mit unterschiedlichen Daten auf der Seite.

Komponenten erhalten Daten von außen über Props und halten sich ändernde Informationen intern im State. Props sind wie die Parameter einer Funktion; State ist das Gedächtnis der Komponente. Ändert sich der State, zeichnet React die Komponente neu.

import { useState } from "react";

function Sayac({ baslik }) {
  const [adet, setAdet] = useState(0);

  return (
    <div>
      <h3>{baslik}</h3>
      <p>Adet: {adet}</p>
      <button onClick={() => setAdet(adet + 1)}>Erhöhen</button>
    </div>
  );
}

export default Sayac;

Was ist JSX?

Der HTML-ähnliche Teil im obigen Beispiel ist JSX. JSX ist eine Syntax, mit der Sie die Oberfläche innerhalb von JavaScript gut lesbar beschreiben können. Der Browser versteht JSX nicht direkt; Build-Werkzeuge übersetzen es in gewöhnliche JavaScript-Aufrufe.

Was bringen Hooks?

Hooks wie useState und useEffect geben Funktionskomponenten die Fähigkeit, Zustand zu halten, Daten abzurufen und Nebeneffekte zu verwalten. Für Einsteiger genügt es, zunächst useState und useEffect gut zu verstehen.

04Virtueller DOM und Performance

Die Seitenstruktur im Browser heißt DOM, und häufige Änderungen am DOM sind aufwendig. React hält eine leichte Kopie der Oberfläche im Speicher; sie wird virtueller DOM genannt. Ändern sich Daten, vergleicht React die neue Kopie mit der alten und wendet nur den Unterschied auf den echten DOM an.

Dieser Ansatz erspart Entwicklern einzelne DOM-Operationen. Der virtuelle DOM allein ist jedoch keine Geschwindigkeitsgarantie. Eine große Paketgröße, unnötige Neuzeichnungen und nicht optimierte Bilder können auch eine React-Seite ausbremsen.

Die vom Nutzer empfundene Geschwindigkeit wird mit den Core Web Vitals gemessen: LCP ≤ 2,5 s, INP ≤ 200 ms und CLS ≤ 0,1 gelten als gut. Um diese Schwellenwerte zu erreichen, sollte die Speed- und Performance-Optimierung unabhängig von der Technologie als eigener Arbeitsposten behandelt werden.

05Für welche Projekte eignet sich React?

Nicht jede Website braucht React. Für einen Auftritt mit wenigen Seiten sind schlichtes HTML, CSS und etwas JavaScript oft schneller und wirtschaftlicher. Der Wert von React zeigt sich, je mehr Interaktion und Daten im Spiel sind.

Die folgende Tabelle bietet einen groben Rahmen für die Entscheidung:

06React lernen: Der Fahrplan

Der häufigste Fehler beim React-Lernen ist, direkt zur Bibliothek zu springen, bevor die JavaScript-Grundlagen sitzen. Die folgende Reihenfolge bietet einen soliden Weg für nachhaltiges Lernen:

1. Lernen Sie mit HTML und CSS das Seitengerüst und die Layoutlogik.
2. Verstehen Sie in JavaScript Variablen, Arrays, Objekte, Funktionen, map/filter und async/await.
3. Wenden Sie Komponenten, Props und State mit dem Tutorial in der offiziellen Dokumentation an.
4. Bauen Sie ein kleines Projekt: eine To-do-Liste, eine Wetteranzeige oder einen Produktfilter.
5. Gehen Sie zu Formularverwaltung, Datenabruf und Routing über.
6. Ergänzen Sie in wachsenden Projekten TypeScript für Typsicherheit.

Das erste Projekt starten

Für ein neues React-Projekt ist es üblich, ein Build-Werkzeug wie Vite zu nutzen. Auf Ihrem Rechner sollte die aktuelle LTS-Version von Node.js installiert sein. Aktuelle Empfehlungen finden Sie in der offiziellen Dokumentation unter react.dev.

npm create vite@latest ilk-react-projem -- --template react
cd ilk-react-projem
npm install
npm run dev

07React, TypeScript und Ökosystem

React ist für sich genommen nur die Oberflächenschicht; in einem echten Projekt werden auch die umgebenden Werkzeuge ausgewählt. Häufig genutzt werden Frameworks wie Next.js für serverseitiges Rendering und Routing, TypeScript für Typsicherheit und Werkzeuge wie die Testing Library zum Testen.

Wächst das Team, wird TypeScript fast zum Standard; welche Props eine Komponente erwartet, steht klar im Code, und Fehler werden schon beim Kompilieren erkannt. Details finden Sie in unserem Beitrag Was ist TypeScript?.

Wichtig ist auch zu klären, auf welcher Ebene React im Projekt steht. Die Oberfläche ist das Frontend, Datenbank und Geschäftslogik sind das Backend; die Grenze zwischen beiden haben wir im Beitrag Frontend und Backend im Vergleich erklärt.

08Für eine gute Oberfläche reicht React nicht

React ist ein guter Weg, Oberflächen zu programmieren; es legt aber nicht fest, was wem in welcher Reihenfolge gezeigt wird. Diese Entscheidungen sind Aufgabe des User-Experience-Designs. Einen Bildschirm mit unklarem Ablauf in modernster Technologie zu schreiben bedeutet nur, das Problem schneller zu produzieren.

Deshalb werden in Projekten zuerst Nutzerreise, Screen-Entwürfe und Komponentenbibliothek geplant; der Code baut darauf auf. Die Arbeit am UI/UX-Design liefert zugleich die natürliche Landkarte der React-Komponenten.

Bei Seiten, für die die Sichtbarkeit in der Suche wichtig ist, müssen technische Basis und Inhaltsstruktur gemeinsam gedacht werden. Beim Ansatz des SEO-optimierten Webdesigns werden Überschriftenhierarchie, serverseitig erzeugtes HTML und Geschwindigkeit gleichzeitig behandelt.