React installieren: React-App mit Vite einrichten

Um React zu installieren, erstellst du ein neues Projekt mit Vite: Führe npm create vite@latest my-app -- --template react aus, dann cd my-app, npm install und npm run dev. Vorher muss Node.js installiert sein. Vite richtet React, die JSX-Kompilierung und einen Dev-Server ein, der die Seite beim Speichern neu lädt.

Zum Lernen brauchst du nichts davon. Der Editor unten führt React direkt auf dieser Seite aus; er ist eine vereinfachte Version der Datei App.jsx, die Vite für dich generiert.

import { useState } from 'react';

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

    return (
        <div style={{ textAlign: 'center' }}>
            <h1>Get started</h1>
            <p>
                Edit <code>src/App.jsx</code> and save to test <code>HMR</code>
            </p>
            <button type="button" onClick={() => setCount((count) => count + 1)}>
                Count is {count}
            </button>
        </div>
    );
}

Klicke auf den Button und ändere dann den Text der Überschrift: Die Vorschau aktualisiert sich beim Tippen, genau wie der Dev-Server von Vite deine Änderungen einsetzt, ohne die Seite neu zu laden (das bedeutet „HMR“, Hot Module Replacement).

Voraussetzungen: Node.js

Die Tools, die eine React-App bauen, laufen auf Node.js, und npm (sein Paketmanager) ist mit dabei. Installiere das aktuelle LTS-Release von der Node.js-Website oder mit einem Versionsmanager wie nvm und prüfe es dann im Terminal:

node -v
npm -v

Beide Befehle sollten eine Versionsnummer ausgeben. Wenn node -v eine alte Version zeigt, aktualisiere: Vite 8 braucht Node.js 20.19 oder neuer (22.12 oder neuer in der 22er-Reihe) und gibt bei älteren Releases eine Warnung aus.

Eine React-App mit Vite erstellen

Führe diese vier Befehle in dem Ordner aus, in dem du deine Projekte ablegst:

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

• npm create vite@latest lädt den neuesten Projektgenerator herunter. my-app ist der Ordnername, und --template react wählt reines React mit JavaScript. Das zusätzliche -- reicht die Template-Option über npm an den Generator weiter.
• npm install lädt React, React DOM, Vite und die anderen in package.json aufgeführten Abhängigkeiten nach node_modules.
• npm run dev startet den Entwicklungsserver und gibt eine lokale Adresse aus, meist http://localhost:5173. Öffne sie im Browser.

Der Generator stellt dann zwei Fragen: welchen Linter er einrichten soll (Oxlint oder ESLint) und ob er die App jetzt installieren und starten soll. Wenn du die zweite mit Ja beantwortest, führt er npm install und npm run dev für dich aus, und du kannst die letzten beiden Befehle überspringen. Für TypeScript nimmst du stattdessen --template react-ts; siehe React mit TypeScript.

Die Dateien, die Vite erstellt

my-app/
├── index.html
├── package.json
├── vite.config.js
├── README.md
├── public/
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── App.css
    ├── index.css
    └── assets/

Drei davon sind am wichtigsten:

index.html ist die Seite, die der Browser lädt. Ihr Body enthält ein leeres Element, <div id="root"></div>, und ein Script-Tag, das src/main.jsx lädt. React zeichnet die ganze App in dieses div.

src/main.jsx ist der Einstiegspunkt. Er verbindet React mit der Seite:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
    <StrictMode>
        <App />
    </StrictMode>,
);

createRoot nimmt das Element #root und macht React für alles darin verantwortlich. render(<App />) zeichnet dort deine oberste Komponente. StrictMode ist ein Helfer für die Entwicklung, der einige zusätzliche Prüfungen ausführt; im Produktions-Build hat er keine Wirkung (siehe Strict Mode). Diese Datei musst du selten bearbeiten.

src/App.jsx ist deine erste Komponente und die Datei, die du bearbeitest. Die Version von Vite importiert drei Bilder (ein Hero-Bild sowie die Logos von Vite und React) und App.css und endet mit export default App. Das ist dasselbe, wie oben export default function App() zu schreiben, die Form, die die Beispiele auf diesen Seiten verwenden.

Deine erste Änderung

Öffne src/App.jsx, lösche den Inhalt und ersetze ihn durch deine eigene Komponente. Speichere, und der Browser aktualisiert sich. Hier ist eine kleine erste App zum Abtippen; probiere sie zuerst hier aus:

import { useState } from 'react';

function Greeting({ name }) {
    return <h2>Hello, {name}!</h2>;
}

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

    return (
        <div>
            <Greeting name={name} />
            <label>
                Your name:{' '}
                <input value={name} onChange={(e) => setName(e.target.value)} />
            </label>
        </div>
    );
}

Tippe in das Feld, und die Überschrift folgt. Füge dann unter der ersten ein zweites <Greeting name="Vite" /> hinzu: Komponenten sind wiederverwendbar, und jede Kopie bekommt ihren eigenen name.

Wenn App.jsx wächst, verschiebe Komponenten in eigene Dateien wie src/Greeting.jsx, exportiere sie und importiere sie dort, wo du sie nutzt. Die Seite zu Komponenten zeigt, wie das geht.

Build für die Produktion

Der Dev-Server ist zum Arbeiten an deinem Code da. Wenn du veröffentlichen willst, baue die App:

npm run build
npm run preview

npm run build kompiliert JSX, bündelt und minifiziert deinen Code und schreibt statische Dateien in einen Ordner dist/. npm run preview stellt diesen Ordner lokal bereit, damit du den echten Build prüfen kannst. Lade dist/ auf einen beliebigen statischen Host hoch. Im Build schaltet React außerdem in seinen Produktionsmodus, der schneller ist und die Warnungen der Entwicklung weglässt.

Create React App ist veraltet

Jahrelang war npx create-react-app my-app der Standardweg zum Einstieg. Im Februar 2025 hat das React-Team Create React App als veraltet markiert, es wird nicht mehr gepflegt. Viele ältere Tutorials nutzen es noch, also siehst du dort react-scripts start und eine Einstiegsdatei src/index.js; die Komponenten selbst funktionieren in einem Vite-Projekt genauso.

Was du stattdessen nimmst:

• Vite für eine clientseitige App, ein Lernprojekt oder ein Widget: das Setup oben.
• Ein Framework, wenn du Routing, Server-Rendering oder das Laden von Daten eingebaut brauchst. Next.js und der Framework-Modus von React Router sind die üblichen Optionen:

npx create-next-app@latest my-app
npx create-react-router@latest my-app

Um ein bestehendes Create-React-App-Projekt auf Vite umzustellen, sind das die wichtigsten Schritte: vite und @vitejs/plugin-react installieren und react-scripts entfernen; eine vite.config.js anlegen, die das React-Plugin lädt; index.html aus public/ ins Projektverzeichnis verschieben, die Platzhalter %PUBLIC_URL% entfernen und ein Tag <script type="module" src="/src/index.jsx"> für deine Einstiegsdatei hinzufügen; Dateien mit JSX in .jsx umbenennen; Umgebungsvariablen mit REACT_APP_ in VITE_ umbenennen und aus import.meta.env lesen; und die Befehle mit react-scripts in package.json durch vite, vite build und vite preview ersetzen.

React zu einer bestehenden Seite hinzufügen

React muss nicht die ganze Seite besitzen. Du kannst es in ein einzelnes Element einer bestehenden Website rendern, etwa ein Warenkorb-Widget in einem serverseitig gerenderten Shop. Einen Bundler wie Vite, der JSX kompiliert, brauchst du trotzdem. Installiere die zwei Pakete:

npm install react react-dom

Erstelle dann einen Root auf dem Element, das React steuern soll:

import { createRoot } from 'react-dom/client';
import Cart from './Cart.jsx';

const container = document.getElementById('cart');
createRoot(container).render(<Cart />);

Alles außerhalb von #cart bleibt, wie es war. Du kannst mehrere Roots auf einer Seite erstellen, einen pro Element, und jeder läuft unabhängig.