Toolchain from Scratch

Create-Scripts wie npm create vite@latest sind praktisch — aber sie stellen Fragen, die Einsteiger oft nicht beantworten können, und erzeugen Projekte mit Dateien, deren Zweck unklar bleibt. Diese Seite baut ein vollständiges React-Dev-Setup von einem leeren Ordner aus auf — Schritt für Schritt, Werkzeug für Werkzeug.

Hinweis

Diese Seite wird iterativ in Trainings ausgebaut. Die Struktur steht — der Code folgt nach und nach.

Warum von Grund auf?

Drei Gründe, warum es sich lohnt, ein React-Projekt einmal manuell aufzusetzen:

1. Create-Scripts stellen Fragen, die du noch nicht beantworten kannst — TypeScript oder JavaScript? SWC oder Babel? Das verunsichert, wenn man gerade erst anfängt.
2. Generierte Projekte enthalten Dateien, die du nicht verstehst — vite.config.js, eslint.config.js, package.json-Scripts — alles auf einmal.
3. Von Grund auf bauen = jede Schicht verstehen — Du fügst ein Werkzeug nach dem anderen hinzu und siehst genau, was es tut.

Schritt 1: Ein leeres Projekt

Ausgangspunkt: ein leerer Ordner mit einer minimalen package.json (nur name und type) und einer index.html. Hier passiert noch nichts Besonderes — nur die Basis, auf der alles aufbaut.

Schritt 2: Vite als Dev-Server

Vite installieren, eine minimale Konfiguration erstellen und mit npx vite starten. Was ein Dev-Server macht: Dateien ausliefern, Module auflösen und bei Änderungen den Browser automatisch aktualisieren (Hot Module Replacement).

Schritt 3: React installieren

react und react-dom installieren, eine main.jsx erstellen und die React-Root mit dem DOM verbinden.

Schritt 4: JSX konfigurieren

Warum .jsx-Dateien mit Vite einfach funktionieren: Vite nutzt intern esbuild für die Transpilation. Das React-Plugin (@vitejs/plugin-react) ergänzt zwei Dinge: Fast Refresh (Komponenten aktualisieren sich im Browser, ohne den State zu verlieren) und die automatische JSX-Runtime (kein import React mehr nötig).

Schritt 5: Projektstruktur

Dateien in src/ und public/ organisieren. Konventionen, die in fast jedem React-Projekt gelten: Komponenten in eigenen Dateien, Assets getrennt von Code.

Zusammenfassung

Am Ende hast du dasselbe Ergebnis wie npm create vite@latest — aber du verstehst jede Datei und jede Abhängigkeit. Hier eine Übersicht:

Werkzeug	Was es tut
npm	Pakete verwalten
Vite	Dev-Server + Bundler
React + ReactDOM	UI-Bibliothek + DOM-Anbindung
@vitejs/plugin-react	Optimale Vite-Konfiguration für React