Was ist React? Die JavaScript UI-Bibliothek erklärt

React ist eine JavaScript-Bibliothek, mit der du Benutzeroberflächen aus Komponenten baust. Du beschreibst, wie der Bildschirm für die aktuellen Daten aussehen soll, und wenn sich die Daten ändern, passt React die Seite an. React, React JS und ReactJS sind dasselbe: eine Open-Source-Bibliothek, die bei Facebook (heute Meta) entstanden ist.

import { useState } from 'react';

function Counter({ label }) {
    const [count, setCount] = useState(0);

    return (
        <p>
            {label}: {count}{' '}
            <button onClick={() => setCount(count + 1)}>Add one</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <h3>Fruit basket</h3>
            <Counter label="Apples" />
            <Counter label="Pears" />
        </div>
    );
}

Klicke auf beide Buttons. Jeder Counter behält seine eigene Zahl, weil jeder eine eigene Kopie der Komponente mit eigenem State ist. Füge eine dritte Zeile hinzu, <Counter label="Plums" />, und ein neuer, unabhängiger Zähler erscheint.

Dieses kurze Beispiel zeigt schon die drei Ideen, auf denen React aufbaut: Komponenten (Counter und App sind Funktionen, die UI zurückgeben), JSX (die HTML-ähnliche Syntax im return) und State (count, ein Wert, bei dessen Änderung React die Komponente neu zeichnet).

Das Problem, das React löst

Eine Benutzeroberfläche ist ein Bild bestimmter Daten. Wenn sich die Daten ändern, muss sich auch das Bild ändern, und jeder Teil des Bildschirms, der von diesen Daten abhängt, muss mitziehen. Ohne Bibliothek schreibst du diesen Code von Hand: jedes Element finden und dann selbst seinen Text, seine Klasse oder seine Sichtbarkeit setzen. Jedes neue Feature fügt eine weitere Stelle hinzu, an deren Update du denken musst.

React dreht das um. Du schreibst eine Funktion, die sagt, wie der Bildschirm für einen bestimmten State aussehen soll, und React findet heraus, welche Teile der Seite sich ändern müssen. Das nennt man deklarative UI, im Gegensatz zu imperativem Code, der jede DOM-Änderung Schritt für Schritt auflistet. Hier sind beide Stile nebeneinander in einem Beispiel:

import { useEffect, useRef, useState } from 'react';

function ByHand() {
    const boxRef = useRef(null);

    useEffect(() => {
        // Plain DOM code: no React state, no JSX.
        const box = boxRef.current;
        box.innerHTML = 'By hand: <span class="num">0</span> is <span class="parity">even</span> <button>+1</button>';
        let count = 0;
        const button = box.querySelector('button');

        function handleClick() {
            count += 1;
            box.querySelector('.num').textContent = count;
            box.querySelector('.parity').textContent = count % 2 === 0 ? 'even' : 'odd';
        }

        button.addEventListener('click', handleClick);
        return () => button.removeEventListener('click', handleClick);
    }, []);

    return <p ref={boxRef} />;
}

function Declarative() {
    const [count, setCount] = useState(0);

    return (
        <p>
            Declarative: {count} is {count % 2 === 0 ? 'even' : 'odd'}{' '}
            <button onClick={() => setCount(count + 1)}>+1</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <ByHand />
            <Declarative />
        </div>
    );
}

ByHand überlässt seinen Absatz reinem DOM-Code (der Effekt führt diesen Code erst aus, nachdem React den Absatz erstellt hat). Er hält die Zahl in einer Variablen, findet jedes Element mit querySelector und setzt seinen Text von Hand. Declarative sagt nur: „Zeig den Zähler und zeig, ob er gerade ist.“ Lösche in handleClick die Zeile, die .parity setzt, und klicke ein paar Mal: Die erste Zeile behauptet jetzt, 3 sei gerade, während die zweite nicht aus dem Takt geraten kann, weil der Text bei jedem Render aus count berechnet wird.

Wie React die Seite aktualisiert

Wenn sich State ändert, ruft React deine Komponentenfunktion erneut auf. Dieser Aufruf ist ein Render. Die Funktion gibt eine frische Beschreibung der UI zurück, React vergleicht sie mit der vorherigen und ändert dann nur die Teile der echten Seite, die sich unterscheiden. Diese Beschreibung im Speicher wird oft virtuelles DOM genannt.

import { useState } from 'react';

export default function App() {
    const [name, setName] = useState('');

    console.log('App rendered, name is', JSON.stringify(name));

    return (
        <div>
            <input
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Type your name"
            />
            <p>Hello, {name || 'stranger'}!</p>
        </div>
    );
}

Öffne die Konsole unter der Vorschau und tippe ein paar Buchstaben. Jeder Tastendruck loggt einen Render mit dem neuen Wert. Das Eingabefeld behält seinen Fokus und die Cursorposition, weil React nur den Text des Absatzes und den Wert des Eingabefelds angefasst hat, nicht die ganze Seite. Die Seite zum Rendern erklärt genau, wann eine Komponente erneut rendert.

Komponenten, JSX und State im Überblick

Komponenten sind JavaScript-Funktionen, deren Namen mit einem Großbuchstaben beginnen. Sie geben zurück, was auf dem Bildschirm erscheinen soll, und du verwendest sie wie HTML-Tags: <Counter />. Eine Seite ist ein Baum aus Komponenten, von kleinen wie einem Button bis zu großen wie einem ganzen Einstellungsbildschirm. Siehe Komponenten.

JSX ist die Syntax, mit der du Markup in JavaScript schreibst. Geschweifte Klammern führen zurück in JavaScript, also zeigt {count} einen Wert und {items.map(...)} macht aus einem Array eine Liste. Ein Build-Tool kompiliert JSX in normale Funktionsaufrufe, bevor der Browser es ausführt.

State sind Daten, die sich eine Komponente zwischen Renders merkt. Du erstellst ihn mit dem Hook useState, und mit dem Aufruf seines Setters sagst du React, dass sich etwas geändert hat. Daten fließen über Props von Eltern zu Kindern nach unten, das sind die Argumente einer Komponente.

Dieses Beispiel nutzt alles davon: eine Liste, die aus einem Array im State gerendert wird, und ein Formular, das etwas hinzufügt.

import { useState } from 'react';

function TaskList({ tasks }) {
    if (tasks.length === 0) return <p>Nothing to do.</p>;
    return (
        <ul>
            {tasks.map((task) => (
                <li key={task}>{task}</li>
            ))}
        </ul>
    );
}

export default function App() {
    const [tasks, setTasks] = useState(['Learn JSX', 'Learn props']);
    const [draft, setDraft] = useState('');

    function addTask() {
        if (draft.trim() === '') return;
        setTasks([...tasks, draft.trim()]);
        setDraft('');
    }

    return (
        <div>
            <input value={draft} onChange={(e) => setDraft(e.target.value)} />
            <button onClick={addTask}>Add</button>
            <TaskList tasks={tasks} />
            <p>{tasks.length} tasks</p>
        </div>
    );
}

Füge eine Aufgabe hinzu, und zwei Dinge ändern sich gleichzeitig: die Liste und die Anzahl darunter. Du hast der Anzahl nie gesagt, dass sie sich aktualisieren soll. Beide lesen aus tasks, also folgen beide. Ändere das Start-Array zu [], dann zeigt die Liste stattdessen „Nothing to do.“

Was React nicht ist

React ist eine Bibliothek, kein vollständiges Framework. Sie deckt Komponenten, State und deren Umwandlung in UI ab und lässt bewusst einige Dinge weg, die eine komplette App braucht:

• Routing. Es gibt keinen eingebauten Weg, URLs auf Seiten abzubilden. React Router und die Router von Frameworks füllen diese Lücke.
• Daten laden und Server-Rendering. React gibt dir Werkzeuge wie Effekte und Suspense, aber keine Meinung dazu, woher Daten kommen oder wie Seiten auf einem Server rendern.
• Ein Build-Setup. Browser verstehen kein JSX, also brauchst du ein Tool wie Vite, das es kompiliert.

Frameworks bauen auf React auf, um diese Teile zu liefern. Next.js und der Framework-Modus von React Router ergänzen Routing, Server-Rendering und das Laden von Daten, und das React-Team empfiehlt, eine vollständige App mit einem davon zu beginnen. Für eine clientseitige App oder zum Lernen ist Vite mit reinem React ein kleiner und schneller Einstieg; siehe wie du React installierst.

React vs. React Native

React selbst beschreibt nur Komponenten und wie sie sich ändern. Ein separater Renderer macht daraus etwas Sichtbares. React DOM rendert in Webseiten, und das nutzt jedes Beispiel auf dieser Seite. React Native rendert dieselbe Art von Komponenten in native Views für iOS und Android, also schreibst du <View> und <Text> statt <div> und <p>, und es gibt keine HTML- oder CSS-Datei. Komponenten, Props, State und Hooks funktionieren in beiden gleich, also lässt sich das, was du hier lernst, direkt übertragen.

Wann du React lernen solltest

Lerne React nach den JavaScript-Grundlagen, denn alles in React ist JavaScript. Bevor du anfängst, solltest du sicher umgehen können mit:

• Variablen, Funktionen und Arrow Functions
• Arrays und ihren Methoden map und filter
• Objekten, Destrukturierung und der Spread-Syntax (...)
• import und export
• Promises und async/await zum Laden von Daten

Wenn dir das vertraut vorkommt, beginne mit JSX und Komponenten, dann Props und State. Effekte, Refs, Context und Performance-Werkzeuge kommen später, sobald sich das Bauen kleiner interaktiver Komponenten natürlich anfühlt.