Willkommen zu Ihrem ersten React-Tutorial! Wir bauen gemeinsam, Schritt für Schritt, eine echte Produktkatalog-Website: mit Produktliste, Detailseiten, einem Bewertungsformular, mehreren Unterseiten und einer eigenen kleinen Datenbank im Hintergrund. Am Ende wissen Sie nicht nur WIE man React benutzt, sondern auch WARUM jeder Baustein so funktioniert, wie er funktioniert.

Für wen ist dieses Tutorial?

Für alle, die noch nie mit React gearbeitet haben. Etwas HTML/CSS/JavaScript-Grundwissen hilft, ist aber keine Pflicht – jedes neue Konzept wird an der Stelle erklärt, an der es zum ersten Mal gebraucht wird. Wenn Sie bereits unser React-Native-Tutorial durchgearbeitet haben, werden Ihnen viele Konzepte (Komponenten, Props, State, Hooks) sofort bekannt vorkommen – React für das Web und React Native teilen sich denselben Kern, nur die sichtbaren Bausteine unterscheiden sich.

Was ist React?

React ist eine JavaScript-Bibliothek zum Bauen von Benutzeroberflächen. Statt Schritt für Schritt vorzuschreiben, WIE sich eine Webseite bei einer Änderung aktualisieren soll ("füge dieses Element hinzu", "ändere jenen Text"), beschreiben Sie in React nur, WIE die Oberfläche zu jedem Zeitpunkt aussehen SOLL – React kümmert sich selbst darum, die Webseite effizient auf diesen Zustand zu bringen. Man nennt das "deklarativ" statt "imperativ" programmieren.

Das Problem, das React löst

Um eine Produktliste ohne React anzuzeigen und zu aktualisieren, würden Sie mit purem ("Vanilla") JavaScript direkt das DOM (die Baumstruktur der Webseite im Browser) manipulieren:

<ul id="produktliste"></ul>
<script>
  const liste = document.getElementById('produktliste');
  function produkteAnzeigen(produkte) {
    liste.innerHTML = ''; // alles löschen
    produkte.forEach((produkt) => {
      const li = document.createElement('li');
      li.textContent = produkt.name + ' – ' + produkt.price + ' €';
      liste.appendChild(li);
    });
  }
</script>

Das funktioniert bei einer kleinen Liste noch gut. Sobald aber mehrere Teile der Seite gleichzeitig von denselben Daten abhängen (die Liste selbst, ein Zähler "12 Produkte gefunden", ein Warenkorb-Symbol im Header), müssen Sie an jeder einzelnen Stelle manuell dafür sorgen, dass sie synchron bleibt. Das wird schnell unübersichtlich und fehleranfällig – genau dieses Problem löst React: Sie beschreiben die Oberfläche einmal in Abhängigkeit von Ihren Daten, und React hält jede betroffene Stelle automatisch aktuell, egal wie oft und wo sich die Daten ändern.

Warum React (und nicht einfach mehr Vanilla JavaScript)?

• Komponenten: Die Oberfläche wird aus kleinen, unabhängigen, wiederverwendbaren Bausteinen zusammengesetzt, statt aus einer einzigen großen Datei mit DOM-Manipulationscode.
• Automatische Aktualisierung: Sie ändern Daten, React aktualisiert die betroffenen Stellen der Oberfläche – Sie müssen nie manuell nachrechnen, was sich alles ändern muss.
• Riesiges Ökosystem: Für praktisch jedes Problem (Formulare, Routing, Datum-Bibliotheken, ...) gibt es bereits eine fertige, gut getestete Lösung.
• Wird von Meta entwickelt und in extrem großen, echten Anwendungen eingesetzt (Facebook, Instagram, aber auch unzählige andere Firmen) – kein Nischen-Experiment.
• Dieselben Konzepte wie React Native: Komponenten, Props, State und Hooks funktionieren in beiden praktisch identisch – was Sie hier lernen, hilft auch beim mobilen Tutorial (und umgekehrt).

Was wir gemeinsam bauen

Eine Produktkatalog-Website namens produktkatalog-web: eine durchsuchbare Produktliste (Daten aus einer echten Produkt-API), Detailseiten mit Bewertungsformular, mehrere Unterseiten mit echtem Routing, ein einfacher Login-Bereich, und – als eigene kleine Erweiterung abseits der reinen Produktdaten – eine selbst gebaute Bewertungs-Funktion mit eigenem Server und eigener Datenbank in Docker. Jedes Kapitel baut direkt auf den Dateien der vorherigen Kapitel auf.