Was ist React? Ein verständlicher Leitfaden für Nicht-Entwickler

React ist eine JavaScript-Bibliothek zum Bauen von Benutzeroberflächen – dem Teil einer App, den Menschen sehen und anklicken. Du baust Bildschirme aus wiederverwendbaren Teilen, sogenannten Komponenten, etwa einem Button, einer Produktkarte oder einer ganzen Seite, und React hält den Bildschirm mit deinen Daten synchron: Ändern sich die Daten, aktualisiert React die Teile der Seite, die davon abhängen. Es wurde bei Facebook (heute Meta) entwickelt, ist Open Source und gehört zu den meistgenutzten Wegen, Web-Apps zu bauen.

Warum es beim Bauen mit KI wichtig ist

Wenn du eine Web-App mit einem KI-Tool baust, ist sie mit ziemlicher Sicherheit in React geschrieben. Viele KI-App-Builder verwenden React standardmäßig, weil es beliebt und gut dokumentiert ist und KI-Modelle daraus riesige Mengen Code gelernt haben.

Du musst kein React schreiben, um mit KI zu bauen. Ein bisschen Wissen hilft aber:

• Änderungen präzise beschreiben. „Ändere die Komponente ProductCard so, dass der Preis fett ist“ ist klarer als „Hebe die Preise irgendwo hervor“.
• Fehler verstehen. Meldungen wie „Cannot read properties of undefined“ oder „Too many re-renders“ werden verständlicher.
• Sinnvolle Entscheidungen treffen. Reine React-Apps rendern im Browser, was die Sichtbarkeit in Suchmaschinen und die Ladezeit beim ersten Aufruf beeinflusst. Wenn du das weißt, kannst du gezielter nach einem anderen Aufbau fragen.
• Später mit Entwicklern zusammenarbeiten. React ist eine verbreitete Fähigkeit, sodass sich ein Entwickler meist schnell in eine React-Codebasis einarbeiten kann.

Ein Alltagsvergleich

Denk an LEGO. Statt ein ganzes Modell aus einem einzigen Block zu schnitzen, baust du es aus Standardsteinen. Ein paar Steine ergeben ein Rad; vier Räder und ein paar andere Teile ergeben ein Auto. Sollen alle Autos rote Räder haben, änderst du das Radmodell einmal.

React-Komponenten sind diese Steine. Eine Button-Komponente steckt in einer ProductCard, die in einem ProductGrid steckt, das Teil der ShopPage ist. Änderst du Button einmal, ändert sich jeder Button der App.

Zur anderen Hälfte des Vergleichs: Stell dir vor, das LEGO-Modell würde sich selbst neu bauen, sobald du die Anleitung änderst. Genau das ist der zweite Trick von React: Du beschreibst, wie der Bildschirm für die aktuellen Daten aussehen soll, und React ermittelt, was auf der Seite geändert werden muss.

Die Kernideen

Komponenten

Eine Komponente ist eine JavaScript-Funktion, die einen Teil der Oberfläche zurückgibt. Die React-Dokumentation beschreibt eine Komponente als Teil der Oberfläche mit eigener Logik und eigenem Aussehen. Komponentennamen beginnen mit einem Großbuchstaben.

JSX

Komponenten werden meist in JSX geschrieben, das wie HTML aussieht, das in JavaScript eingebettet ist:

function Greeting() {
  return <h1>Willkommen zurück!</h1>;
}

JSX ist optional, aber laut React-Dokumentation nutzen die meisten Projekte es. Es wird in normales JavaScript umgewandelt, bevor der Browser es ausführt.

Props

Props sind die Eingaben, die du einer Komponente übergibst, ähnlich wie Einstellungen an einem wiederverwendbaren Teil:

<ProductCard name="Lavendelkerze" price={24} />

Dieselbe ProductCard kann jedes beliebige Produkt anzeigen.

State

State sind Informationen, die sich eine Komponente merkt und die sich während der App-Laufzeit ändern können – ob ein Menü offen ist, was in einem Suchfeld steht, wie viele Artikel im Warenkorb liegen. Ändert sich der State, rendert React die Komponente neu, damit der Bildschirm wieder stimmt.

Hooks

Hooks sind Funktionen, deren Namen mit use beginnen, etwa useState (einen Wert merken) und useEffect (Code nach dem Rendern ausführen, zum Beispiel um Daten zu laden). Du wirst sie in KI-generiertem React-Code überall sehen.

Ein Beispiel: ein Warenkorbzähler

Nehmen wir an, dein Online-Shop hat einen Button „In den Warenkorb“ und ein Warenkorb-Symbol mit der Anzahl der Artikel. In React sieht das ungefähr so aus:

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Lavendelkerze"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Warenkorb ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>In den Warenkorb</button>
    </div>
  );
}

Was passiert, wenn eine Kundin auf „In den Warenkorb“ klickt:

1. Der onClick des Buttons ruft onAdd auf, das wiederum setCartCount aufruft.
2. React aktualisiert den State cartCount von 0 auf 1.
3. React rendert Shop neu und übergibt count={1} an CartIcon.
4. Die Seite zeigt nun „Warenkorb (1)“. Niemand hat Code geschrieben, der sagt „finde den Warenkorbtext und ändere ihn“ – der Bildschirm folgt den Daten.

Beachte aber auch die Grenzen. Dieser Zähler lebt im Speicher des Browsers. Lädst du die Seite neu, steht er wieder auf 0. Um einen Warenkorb zu behalten, müsstest du ihn dauerhaft speichern – in einem Cookie, im Browser-Speicher oder in einer Datenbank über dein Backend. React kümmert sich um den Bildschirm, es speichert deine Daten nicht.

Wo React in einer Web-App steht

Eine App mit „Vite + React“ rendert im Browser (eine Single-Page-App). Eine Next.js-App kann Seiten zuerst auf dem Server rendern, was Suchmaschinen und die Ladezeit beim ersten Aufruf unterstützt.

Wichtige Begriffe erklärt

Häufige Fehler und Irrtümer

• „React ist eine Programmiersprache.“ Es ist eine Bibliothek, die in JavaScript (oder TypeScript) geschrieben und von dort genutzt wird.
• „React speichert meine Daten.“ State lebt im Browser und verschwindet beim Neuladen. Dauerhafte Daten brauchen ein Backend und eine Datenbank.
• Geheimnisse in den React-Code schreiben. Alles in einer React-App wird an den Browser des Besuchers gesendet. API-Schlüssel dort sind öffentlich. Bewahre sie auf dem Server auf.
• „React-Apps können nicht in der Suche ranken.“ Rein clientseitiges Rendern ist für die Suche schwächer, aber Vorrendern oder serverseitiges Rendern behebt das meiste davon.
• Riesige Komponenten. Eine Komponente mit 1.000 Zeilen ist für Menschen und KI gleichermaßen schwer sicher zu ändern. Bitte um kleinere.
• Annehmen, eine React-Web-App sei eine Handy-App. Sie läuft im Browser, auch auf Handys, ist aber keine App aus dem App Store.

Was du deinen KI-Builder fragen kannst

• „Teile diese Seite in kleine, benannte Komponenten auf und sag mir, in welcher Datei jede liegt.“
• „Mach die Komponente ProductCard wiederverwendbar, mit Name, Preis und Bild als Props.“
• „Speichere den Warenkorb in der Datenbank, damit er ein Neuladen übersteht.“
• „Bewahre alle API-Schlüssel auf dem Server auf; der React-Code soll unsere eigene API aufrufen.“
• „Ergänze Lade- und Fehlerzustände für Daten, die vom Server kommen.“
• „Falls Suchsichtbarkeit für diese Seiten wichtig ist, rendere sie vor oder nutze einen serverseitig gerenderten Aufbau.“
• „Erkläre in einfachem Deutsch, was dieser Fehler bedeutet und aus welcher Komponente er kommt.“

Für das größere Bild siehe Frontend vs. Backend, und um den von der KI geschriebenen Code zu prüfen, wie du KI-generierten Code überprüfst.

React in Mythex

Sofern du nichts anderes verlangst, startet Mythex neue Projekte mit Vite + React + TypeScript + Tailwind, und während du chattest, läuft eine Live-Vorschau. Du kannst in deinem ersten Prompt einen anderen Aufbau nennen – etwa „Verwende Next.js“ oder „einfache statische HTML-Landingpage“ – und Mythex wählt ihn anhand deines Textes; dafür gibt es keinen Einstellungsbildschirm. Die Doku-Seite zu der Auswahl der Technik erklärt die Optionen. Der Code-Editor ist im Free-Tarif nur lesbar; im Pro-Tarif kannst du den React-Code direkt bearbeiten und das Projekt exportieren, um anderswo weiterzuarbeiten.

Fragen