Framework · Seit 2013

React

React ist eine JavaScript-Bibliothek für Benutzeroberflächen aus Komponenten: Sie beschreiben das gewünschte UI, React aktualisiert nur das Geänderte.

Anleitung starten Diskussionen

React ist eine Bibliothek für Benutzeroberflächen, die bei Meta (damals Facebook) entstand und 2013 als Open Source veröffentlicht wurde. Die Oberfläche wird in kleine Funktionskomponenten zerlegt, und jede beschreibt mit JSX, wie sie für ihre Props und ihren Zustand (State) aussehen soll. Ändern sich die Daten, vergleicht React das neue Ergebnis mit dem vorherigen und überträgt nur die tatsächlichen Unterschiede ins DOM.

Seine Stärken zeigt React bei stark interaktiven Oberflächen mit Buttons, Formularen und Listen. Es wird für Single-Page-Anwendungen, Dashboards, Admin-Oberflächen und Designsysteme eingesetzt, und dasselbe Denkmodell gilt auch für serverseitig gerenderte Websites mit Frameworks wie Next.js oder für mobile Apps mit React Native. Das große Ökosystem aus Routern, Bibliotheken für Datenabfragen und Testwerkzeugen erlaubt es, passende Bausteine zu kombinieren.

Für den Einstieg eignen sich der Quick Start und das Tic-Tac-Toe-Tutorial auf react.dev. Die offizielle Dokumentation empfiehlt für neue Produkte ein Framework wie Next.js, zum Lernen ist ein einfaches Vite-Projekt jedoch übersichtlicher. Wer modernes JavaScript wie Array-Methoden, Destrukturierung und Module beherrscht, versteht JSX und Hooks deutlich schneller.

Besonderheiten

Komponentenbasierter Aufbau

Die Oberfläche wird in unabhängige Funktionskomponenten zerlegt, Daten fließen über Props, und kleine Teile ergeben ganze Ansichten.

Deklaratives UI mit JSX

Statt das DOM selbst zu ändern, beschreiben Sie in JSX das Ergebnis für den aktuellen Zustand, und React aktualisiert nur das Geänderte.

Zustand und Effekte mit Hooks

Hooks wie useState, useEffect, useRef und useContext verwalten Zustand, Seiteneffekte, DOM-Referenzen und geteilte Daten in normalen Funktionen.

Breites Ökosystem

Mit Next.js, React Router, TanStack Query, React Native und weiteren bewährten Werkzeugen arbeiten Sie vom Web bis zur Mobil-App nach demselben Prinzip.

Einsatzgebiete

Single-Page-Anwendungen (SPAs)
Dashboards und Admin-Oberflächen
Designsysteme und wiederverwendbare UI-Komponenten
Web- und Mobil-Apps mit Next.js oder React Native

Installation

1
Node.js vorbereiten
Die React-Werkzeuge laufen auf Node.js. Installieren Sie die LTS-Version von nodejs.org und prüfen Sie, ob node und npm ihre Versionen ausgeben.
```
node --version && npm --version
```
2
Projekt mit Vite anlegen
Mit der Vorlage react-ts von Vite entsteht ein React-Projekt mit TypeScript. Für reines JavaScript verwenden Sie stattdessen die Vorlage react.
```
npm create vite@latest my-app -- --template react-ts
```
3
Entwicklungsserver starten
Wechseln Sie in den Projektordner, installieren Sie die Abhängigkeiten und starten Sie den Entwicklungsserver. Öffnen Sie die im Terminal angezeigte Adresse (standardmäßig http://localhost:5173) im Browser.
```
cd my-app && npm install && npm run dev
```

Dein erstes Programm

Ihre erste Komponente

Die Funktion App in src/App.tsx ist eine Komponente, die JSX für die Darstellung zurückgibt. Mit dem Hook useState legt sie den Zustand count an, und ein Klick auf den Button ändert ihn über setCount. Ändert sich der Zustand, ruft React App erneut auf und aktualisiert nur die Zahl auf dem Bildschirm. Solange der Entwicklungsserver läuft, aktualisiert sich der Browser bei jedem Speichern sofort.

src/App.tsx

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <main>
      <h1>Hello, React!</h1>
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </main>
  );
}

npm create vite@latest my-app -- --template react-ts && cd my-app && npm install && npm run dev

Wichtige Werkzeuge

Vite: Ein Frontend-Build-Werkzeug mit schnellem Entwicklungsserver und optimierten Produktions-Builds. Es bietet offizielle React-Vorlagen.
React Developer Tools: Eine Browser-Erweiterung, mit der Sie den Komponentenbaum, Props und Zustand jeder Komponente untersuchen und die Render-Leistung messen.
ESLint: Ein Linter. Mit eslint-plugin-react-hooks findet er Verstöße gegen die Hook-Regeln und fehlende Abhängigkeiten in Effekten.
Vitest: Ein Test-Runner, der die Vite-Konfiguration weiterverwendet. Zusammen mit der React Testing Library testet er Komponenten aus Sicht der Nutzer.

Schritt-für-Schritt-Anleitung

Sechs Kapitel führen dich von der Installation bis zu den Kernkonzepten von React.

Offizielle Dokumentation und Ressourcen

Sprachen

Diskussionen

Diskussion starten

Stelle Fragen, teile Erfahrungen und tausche Meinungen zu React aus.

Noch keine Diskussionen. Starte die erste.