Ein React-Projekt starten ist heute trivial. Drei Commands, fünf Minuten, fertig. Das war nicht immer so. Webpack-Konfiguration, Babel-Setup, ESLint-Integration – früher dauerte das Stunden oder Tage. Heute: Ein Command.
Das moderne React-Setup basiert auf Vite (französisch für “schnell”). Vite ist kein Build-Tool wie Webpack, sondern ein Dev-Server, der ES Modules nativ im Browser nutzt. Kein Bundling im Dev-Modus, kein Warten, kein Rebuild bei jedem File-Save. Instant.
Dieses Kapitel zeigt den praktischen Setup-Prozess: Installation, Projekterstellung, Struktur verstehen, erste Komponente schreiben. Kein Philosophieren, sondern Hands-On.
React läuft im Browser, aber das Development-Tooling läuft in Node.js. Sie brauchen Node.js installiert.
Download: https://nodejs.org
Installieren Sie die LTS-Version (Long Term Support). Nicht die “Current”-Version. LTS ist stabil, getestet, produktionsreif.
Überprüfen:
node --version
# v20.11.0 oder höher
npm --version
# 10.2.4 oder höhernpm (Node Package Manager) kommt automatisch mit Node.js. Sie brauchen nichts extra installieren.
Alternative Package Manager:
Für dieses Kapitel verwenden wir npm. Wenn Ihr Team pnpm oder yarn
nutzt, ersetzen Sie npm durch pnpm oder
yarn in allen Commands.
npm create vite@latest my-app -- --template react-tsDas war’s. Dieser Command: 1. Lädt das neueste Vite 2. Erstellt ein Projekt namens “my-app” 3. Verwendet das React-TypeScript-Template
Vite fragt Sie nach Namen und Template, wenn Sie -- und
--template weglassen. Interaktiv, aber langsamer.
Was passiert:
✔ Project name: my-app
✔ Select a framework: React
✔ Select a variant: TypeScript
Scaffolding project in /path/to/my-app...
Done. Now run:
cd my-app
npm install
npm run devVite erstellt das Projekt-Verzeichnis mit Basis-Struktur und Konfiguration.
cd my-app
npm installnpm install liest package.json, lädt alle
Dependencies, speichert sie in node_modules/.
Das dauert 1-2 Minuten, abhängig von Ihrer Internet-Verbindung.
Was wird installiert: - React & React-DOM - TypeScript - Vite - ESLint (TypeScript-Plugin) - Type Definitions
Keine Überraschungen, kein Bloat. Nur Essentials.
npm run devVite startet den Development-Server. Output:
VITE v5.0.11 ready in 345 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show helpÖffnen Sie http://localhost:5173/ im Browser. Sie sehen die Vite + React Starter-Page.
Ändern Sie Code:
Öffnen Sie src/App.tsx, ändern Sie Text, speichern Sie.
Der Browser aktualisiert sofort. Kein Reload, kein Flackern. Hot Module
Replacement (HMR) – Änderungen werden live injiziert.
Das ist Vite. Instant Feedback.
my-app/
├── node_modules/ # Dependencies (generiert, nicht committen)
├── public/ # Statische Assets
│ └── vite.svg
├── src/ # Source Code
│ ├── assets/
│ │ └── react.svg
│ ├── App.css
│ ├── App.tsx # Root-Komponente
│ ├── index.css # Globale Styles
│ └── main.tsx # Entry Point
├── .gitignore
├── index.html # HTML Entry Point
├── package.json # Dependencies, Scripts
├── tsconfig.json # TypeScript Config
├── tsconfig.node.json # TypeScript für Build-Tools
└── vite.config.ts # Vite ConfigWichtige Dateien:
index.html – Der Entry Point. Vite lädt
main.tsx von hier.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>main.tsx – React bootstrappen. Rendert
<App /> in #root.
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)App.tsx – Ihre erste Komponente.
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
function App() {
const [count, setCount] = useState(0)
return (
<>
<div>
<a href="https://vite.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
</div>
</>
)
}
export default Apppackage.json – Projekt-Metadaten.
{
"name": "my-app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@vitejs/plugin-react": "^4.2.1",
"typescript": "^5.2.2",
"vite": "^5.0.8"
}
}vite.config.ts – Vite-Konfiguration. Minimal per Default.
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
})1. Aufräumen
Löschen Sie das Starter-Template. Behalten Sie Struktur, entfernen Sie Beispiel-Code.
// App.tsx - Clean Slate
function App() {
return (
<div>
<h1>My App</h1>
</div>
)
}
export default App2. Erste eigene Komponente
Erstellen Sie src/components/Button.tsx:
interface ButtonProps {
text: string;
onClick: () => void;
}
export function Button({ text, onClick }: ButtonProps) {
return <button onClick={onClick}>{text}</button>;
}Verwenden Sie sie in App.tsx:
import { Button } from './components/Button'
function App() {
const handleClick = () => {
alert('Clicked!');
};
return (
<div>
<h1>My App</h1>
<Button text="Click me" onClick={handleClick} />
</div>
)
}
export default AppSpeichern. Browser aktualisiert sofort. Das ist Ihr erstes React-Projekt.
Vite’s React-Template nutzt TypeScript per Default. Kein Zufall. TypeScript ist heute Standard in professionellen React-Projekten.
Warum: - Typsicherheit zur Build-Zeit - Autocomplete in IDEs - Refactoring-Support - Selbst-dokumentierender Code
// Ohne TypeScript
function Greeting(props) {
return <h1>Hello {props.name}</h1>;
}
// Was ist props? Welche Properties hat es? Keine Ahnung.
// Mit TypeScript
interface GreetingProps {
name: string;
age?: number;
}
function Greeting({ name, age }: GreetingProps) {
return (
<h1>
Hello {name}
{age && ` (${age} years old)`}
</h1>
);
}
// Klar: name ist required, age ist optional, beide haben Typen.IDEs zeigen Fehler sofort:
<Greeting name="Alice" /> // ✓
<Greeting name="Bob" age={30} /> // ✓
<Greeting /> // ❌ Fehler: 'name' fehlt
<Greeting name="Charlie" age="30" /> // ❌ Fehler: age sollte number seinZur Build-Zeit, nicht zur Runtime. Bugs werden verhindert, bevor Sie den Browser öffnen.
tsconfig.json konfiguriert TypeScript. Vite’s Default ist gut. Sie müssen nichts ändern, außer Sie wissen genau, was Sie tun.
Vite hat zwei Modi: Development und Production.
Development (npm run dev): - Kein
Bundling – native ES Modules - Source Maps – debuggen Sie Original-Code
- Hot Module Replacement – sofortige Updates - Verbose Errors –
hilfreiche Fehlermeldungen
Production (npm run build): - Bundling
mit Rollup - Minification – kleiner Code - Tree Shaking – toten Code
entfernen - Code Splitting – mehrere Chunks - Asset Optimization –
Bilder, CSS optimiert
npm run buildOutput:
vite v5.0.11 building for production...
✓ 32 modules transformed.
dist/index.html 0.45 kB │ gzip: 0.30 kB
dist/assets/react-CHdo91hT.svg 4.13 kB │ gzip: 2.14 kB
dist/assets/index-DiwrgTda.css 1.42 kB │ gzip: 0.74 kB
dist/assets/index-BhLLGNu4.js 143.42 kB │ gzip: 46.11 kB
✓ built in 1.23sDer dist/-Ordner enthält optimierte Production-Files.
Deploybar auf jeden Static-Hosting-Service (Netlify, Vercel, GitHub
Pages).
Preview:
npm run previewStartet einen lokalen Server, der den Production-Build serviert. Testen Sie, wie die App in Production aussieht.
"scripts": {
"dev": "vite", // Dev-Server
"build": "tsc && vite build", // TypeScript Check + Build
"preview": "vite preview" // Preview Production-Build
}npm run dev – Development npm run build –
Production-Build npm run preview – Preview
Sie können eigene Scripts hinzufügen:
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"lint": "eslint . --ext ts,tsx",
"format": "prettier --write \"src/**/*.{ts,tsx}\""
}Dann: npm run lint, npm run format.
Für kleine Projekte:
src/
├── components/
│ ├── Button.tsx
│ ├── Header.tsx
│ └── Footer.tsx
├── App.tsx
└── main.tsxFür mittlere Projekte (Feature-basiert):
src/
├── features/
│ ├── auth/
│ │ ├── Login.tsx
│ │ ├── Signup.tsx
│ │ └── authSlice.ts
│ └── todos/
│ ├── TodoList.tsx
│ ├── TodoItem.tsx
│ └── todosSlice.ts
├── components/
│ ├── Button.tsx
│ └── Input.tsx
├── App.tsx
└── main.tsxFür große Projekte (Atomic Design):
src/
├── components/
│ ├── atoms/
│ │ ├── Button/
│ │ └── Input/
│ ├── molecules/
│ │ ├── FormField/
│ │ └── Card/
│ ├── organisms/
│ │ ├── Header/
│ │ └── LoginForm/
│ └── templates/
│ └── PageLayout/
├── pages/
├── App.tsx
└── main.tsxWählen Sie die Struktur, die zu Ihrer Team-Größe passt. Bleiben Sie konsistent.
Create React App (CRA) war lange Standard. Ist es nicht mehr.
CRA-Probleme: - Langsamer Dev-Server (30s+ Startup) - Langsames HMR (3-5s Updates) - Veraltete Dependencies - Keine aktive Maintenance
Vite-Vorteile: - Instant Startup (<1s) - Instant HMR (<100ms) - Moderne Dependencies - Aktiv maintained
React selbst empfiehlt Vite in der offiziellen Dokumentation. CRA ist legacy.
Alternativen zu Vite:
Next.js – Wenn Sie Server-Side Rendering brauchen Remix – Wenn Sie moderne Routing + Data Loading wollen Astro – Wenn Sie Content-Sites mit React-Islands bauen
Für reine Client-Side React-Apps: Vite.
Problem: “Cannot find module ‘react’”
Lösung: Dependencies installieren.
npm installProblem: “Port 5173 is already in use”
Lösung: Anderer Dev-Server läuft. Killen Sie ihn oder ändern Sie den Port.
// vite.config.ts
export default defineConfig({
plugins: [react()],
server: {
port: 3000
}
})Problem: TypeScript-Fehler ignorieren
Lösung: Nicht. Fixen Sie den Fehler. TypeScript hilft Ihnen.
Wenn Sie TypeScript wirklich deaktivieren wollen (nicht empfohlen):
npm create vite@latest my-app -- --template reactVerwendet JavaScript statt TypeScript. Aber: Nicht tun. TypeScript ist besser.
Problem: “Module not found” nach Import
Lösung: Pfad überprüfen. TypeScript ist case-sensitive.
// ❌ Falsch
import { Button } from './Components/Button' // Großes C
// ✓ Richtig
import { Button } from './components/Button' // Kleines cProblem: Änderungen werden nicht erkannt
Lösung: Dev-Server neu starten.
# Ctrl+C zum Stoppen
npm run devManchmal cached Vite. Neustart hilft immer.
Vite unterstützt .env-Dateien:
# .env
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My AppNur Variablen mit VITE_-Präfix sind im Client-Code
zugänglich.
const apiUrl = import.meta.env.VITE_API_URL;
const title = import.meta.env.VITE_APP_TITLE;Wichtig: Secrets gehören NICHT in .env!
Client-Code ist öffentlich einsehbar. API-Keys, Passwörter, Tokens
gehören auf den Server.
Build erstellen:
npm run builddist/-Ordner deployen auf:
Netlify:
npm install -g netlify-cli
netlify deploy --prod --dir=distVercel:
npm install -g vercel
vercel --prodGitHub Pages:
Installieren Sie gh-pages:
npm install --save-dev gh-pagesFügen Sie Script hinzu:
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
}Deploy:
npm run deployVite erstellt statische Files. Jeder Static-Hosting-Service funktioniert.
Sie haben jetzt: - Ein funktionierendes React-Projekt - TypeScript-Support - Instant Hot Module Replacement - Production-Build-Pipeline - Eine klare Projekt-Struktur
Das ist alles, was Sie brauchen, um React zu lernen und Apps zu bauen. Keine komplexe Konfiguration, keine stundenlangen Setup-Sessions. Drei Commands, fünf Minuten, fertig.
Vite ist nicht perfekt, aber es ist das beste Tool für React-Entwicklung, das wir heute haben. Schnell, einfach, modern. Der neue Standard.