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.

Warum von Grund auf?

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

Create-Scripts stellen Fragen, die du noch nicht beantworten kannst — TypeScript oder JavaScript? SWC oder Babel? Das verunsichert, wenn man gerade erst anfängt.
Generierte Projekte enthalten Dateien, die du nicht verstehst — vite.config.js, eslint.config.js, package.json-Scripts — alles auf einmal.
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

Erstelle einen neuen Ordner und lege eine minimale package.json an — nur name und type, sonst nichts:

mkdir mein-projekt
cd mein-projekt

{
  "name": "mein-projekt",
  "type": "module"
}

"type": "module" sorgt dafür, dass Node alle .js-Dateien als ES-Module behandelt — das brauchen wir für die modernen import-Syntax.

Erstelle außerdem eine index.html — das ist der Einstiegspunkt für den Browser:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <title>Mein React-Projekt</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Der <div id="root"> ist der Platzhalter, in den React später die UI rendert.

Schritt 2: Vite als Dev-Server

Installiere Vite als Entwicklungsabhängigkeit:

npm install --save-dev vite

Füge ein Start-Script in die package.json ein:

{
  "name": "mein-projekt",
  "type": "module",
  "scripts": {
    "dev": "vite"
  }
}

Starte den Dev-Server:

npm run dev

Vite öffnet einen lokalen Server (standardmäßig http://localhost:5173) und liefert deine index.html aus. Änderungen an Dateien werden sofort im Browser sichtbar — ohne manuellen Reload.

Schritt 3: React installieren

Installiere react und react-dom:

npm install react react-dom

react — die Kernbibliothek mit Hooks, Komponenten-Logik usw.
react-dom — verbindet React mit dem Browser-DOM

Erstelle src/main.jsx — hier startet deine React-App:

import { createRoot } from 'react-dom/client'

const root = createRoot(document.getElementById('root'))
root.render(<h1>Hallo React!</h1>)

Damit Vite diese Datei lädt, muss index.html sie als Skript einbinden:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <title>Mein React-Projekt</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Schritt 4: JSX konfigurieren

Vite kann .jsx-Dateien bereits ohne Plugin verarbeiten. Das Plugin übernimmt aber zwei Dinge, die du sonst manuell konfigurieren müsstest:

Installiere das offizielle React-Plugin für Vite:

npm install --save-dev @vitejs/plugin-react

Erstelle vite.config.js und binde das Plugin ein:

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

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

Das Plugin übernimmt zwei Dinge:

JSX-Konfiguration — die richtige JSX-Einstellung für React, ohne manuellen Konfigurationsaufwand.
Fast Refresh — Komponenten aktualisieren sich im Browser, ohne den State zu verlieren.

Schritt 5: Projektstruktur

Lagere die UI in eine eigene Komponente aus. Konvention: Komponenten kommen in src/, Assets (Bilder, Fonts) in public/.

export default function App() {
  return <h1>Hallo React!</h1>
}

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

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

Die fertige Ordnerstruktur:

mein-projekt/
├── public/
├── src/
│   ├── App.jsx
│   └── main.jsx
├── index.html
├── package.json
└── vite.config.js

Zusammenfassung

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

Werkzeug	Was es tut
npm	Pakete verwalten
Vite	Dev-Server + Bundler
React + ReactDOM	UI-Bibliothek + DOM-Anbindung
@vitejs/plugin-react	JSX-Konfiguration + Fast Refresh