Quickstart

Du hast gesehen, wie React unter der Haube funktioniert — von createElement bis JSX. Jetzt wird es Zeit, ein echtes Projekt aufzusetzen.

Wenn du auf react.dev schaust, empfiehlt React selbst den Einstieg über Frameworks wie Next.js oder Remix. Der Grund: React Server Components, serverseitiges Rendering, Routing — alles out of the box. Für Produktions-Apps ist das oft der richtige Weg.

Aber: In diesem Kurs lernst du die React-Bibliothek — die Grundlagen, auf denen alles aufbaut. Dafür starten wir mit einem schlanken Client-Side-Setup: Vite.

Projekt erstellen mit Vite

Vite ist ein Build-Tool mit blitzschnellem Dev-Server. Der einfachste Weg zu einem neuen React-Projekt:

npm create vite@latest

Der Befehl startet einen interaktiven Assistenten:

1. Project name — z.B. my-app
2. Framework — wähle React
3. Variant — wähle JavaScript (nicht TypeScript — das kommt später)
4. Install with npm and start now? — wähle Yes

Vite installiert die Abhängigkeiten, startet den Dev-Server und zeigt dir die URL (meistens http://localhost:5173). Öffne sie im Browser — du siehst die Vite + React Startseite.

Alternativ kannst du alles in einem Befehl angeben:

npm create vite@latest my-app -- --template react

Falls du bei der letzten Frage No gewählt hast oder den One-Liner benutzt hast, musst du manuell installieren und starten:

cd my-app
npm install
npm run dev

Mit pnpm oder yarn

Falls du einen anderen Paketmanager bevorzugst:

pnpm:

pnpm create vite my-app --template react
cd my-app
pnpm install
pnpm dev

yarn:

yarn create vite my-app --template react
cd my-app
yarn install
yarn dev

Was steckt in einem Vite-Projekt?

Das generierte Projekt enthält einige Dateien. Die vier wichtigsten:

index.html — Der Einstiegspunkt. Enthält einen leeren Container und lädt das JavaScript:

<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>

src/main.jsx — Erstellt die React-Root und rendert die App:

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

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

src/App.jsx — Deine erste Komponente. Hier startest du mit dem Bauen deiner UI.

vite.config.js — Minimale Konfiguration mit dem React-Plugin:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

Kommt dir das bekannt vor?

Das ist exakt das Muster aus Von HTML zu React: Eine HTML-Datei mit einem leeren <div>, ein JavaScript-Einstiegspunkt, der createRoot aufruft, und React-Komponenten, die die UI beschreiben. create-vite generiert dieses Setup einfach für dich — mit sinnvollen Defaults und einem fertig konfigurierten Dev-Server.

Alternativen

Vite ist nicht die einzige Option. Je nach Anwendungsfall gibt es andere Wege:

Parcel — Ein Zero-Config-Bundler. Wenn du möglichst wenig konfigurieren willst:

npm create parcel@latest -- --template react-client

Parcel erkennt React automatisch und braucht keine Config-Datei.

Frameworks (Next.js, Remix, etc.) — Wenn du serverseitiges Rendering, dateibasiertes Routing oder integriertes Data-Fetching brauchst. React selbst empfiehlt diesen Weg für Produktions-Apps. In diesem Kurs fokussieren wir uns aber auf die Bibliothek — Frameworks kommen danach.

Nächster Schritt: Toolchain verstehen

npm create vite@latest nimmt dir viele Entscheidungen ab — das ist praktisch. Aber was, wenn du verstehen willst, was jedes einzelne Teil macht? Oder wenn dich die vielen Optionen im Assistenten überfordern?

Die nächste Seite — Toolchain from Scratch — baut ein React-Setup von einem leeren Ordner aus auf. Schritt für Schritt, Werkzeug für Werkzeug.