React Projekt erstellen

Bevor du mit React loslegen kannst, brauchst du ein Projekt-Setup. In diesem Tutorial zeigen wir dir, wie du mit Vite in wenigen Minuten ein modernes React-Projekt erstellst.

Voraussetzungen

Bevor du startest, stelle sicher, dass folgende Tools installiert sind:

Node.js

Node.js ist die Laufzeitumgebung, die du fuer die Entwicklung brauchst:

# Pruefe ob Node.js installiert ist
node --version
# Sollte v18 oder hoeher sein

npm --version
# Sollte v9 oder hoeher sein

Falls Node.js nicht installiert ist, lade es von nodejs.org herunter. Waehle die LTS-Version.

Code-Editor

Wir empfehlen Visual Studio Code mit diesen Erweiterungen:

Erweiterung	Zweck
ES7+ React Snippets	Schnelle Code-Vorlagen
Prettier	Automatische Code-Formatierung
ESLint	Code-Qualitaet pruefen
Auto Rename Tag	HTML/JSX-Tags synchron umbenennen

Projekt mit Vite erstellen

Vite (franzoesisch fuer “schnell”) ist der moderne Standard fuer React-Projekte. Es ist blitzschnell und einfach zu konfigurieren.

Schritt 1: Projekt anlegen

Oeffne dein Terminal und fuehre aus:

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

Du kannst auch die interaktive Version nutzen:

npm create vite@latest
# 1. Projektname eingeben: meine-react-app
# 2. Framework waehlen: React
# 3. Variante waehlen: JavaScript (oder JavaScript + SWC)

Schritt 2: Abhaengigkeiten installieren

cd meine-react-app
npm install

Schritt 3: Entwicklungsserver starten

npm run dev

Oeffne deinen Browser unter http://localhost:5173 – du siehst deine erste React-App!

Die Projektstruktur verstehen

Nach der Erstellung sieht dein Projekt so aus:

meine-react-app/
├── node_modules/        # Installierte Pakete (nicht anfassen!)
├── public/              # Statische Dateien (Bilder, Favicon)
│   └── vite.svg
├── src/                 # Dein Quellcode
│   ├── assets/          # Bilder, Schriftarten etc.
│   │   └── react.svg
│   ├── App.css          # Styles fuer App-Komponente
│   ├── App.jsx          # Haupt-Komponente
│   ├── index.css        # Globale Styles
│   └── main.jsx         # Einstiegspunkt der App
├── .gitignore           # Dateien, die Git ignorieren soll
├── index.html           # Die HTML-Datei
├── package.json         # Projekt-Konfiguration
└── vite.config.js       # Vite-Konfiguration

Die wichtigsten Dateien

`index.html` – Der Einstiegspunkt

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Meine React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Das <div id="root"> ist der Container, in den React deine App rendert.

`src/main.jsx` – React starten

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

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

Hier passiert die Magie: React nimmt deine App-Komponente und rendert sie in das root-Element.

`src/App.jsx` – Deine Haupt-Komponente

import { useState } from 'react';
import './App.css';

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

  return (
    <div>
      <h1>Meine erste React App</h1>
      <button onClick={() => setCount(count + 1)}>
        Zaehler: {count}
      </button>
    </div>
  );
}

export default App;

NPM-Scripts verstehen

In der package.json findest du nuetzliche Befehle:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Befehl	Beschreibung
`npm run dev`	Startet den Entwicklungsserver mit Hot Reload
`npm run build`	Erstellt die produktionsreife Version
`npm run preview`	Zeigt die Build-Version lokal an

Erste Aenderungen vornehmen

Lass uns die Standard-App anpassen. Oeffne src/App.jsx und ersetze den Inhalt:

import { useState } from 'react';
import './App.css';

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

  return (
    <div style={{ textAlign: 'center', padding: '2rem' }}>
      <h1>Willkommen bei React!</h1>
      <input
        type="text"
        placeholder="Dein Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
        style={{ padding: '0.5rem', fontSize: '1rem' }}
      />
      {name && <p>Hallo, {name}! React gruetzt dich.</p>}
    </div>
  );
}

export default App;

Speichere die Datei – dank Hot Module Replacement (HMR) siehst du die Aenderung sofort im Browser, ohne die Seite neu zu laden!

Nuetzliche Vite-Konfigurationen

Port aendern

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,        // Anderer Port
    open: true          // Browser automatisch oeffnen
  }
});

Pfad-Aliase einrichten

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
    }
  }
});

Damit kannst du spaeter saubere Imports schreiben:

// Statt:
import Header from '../../../components/Header';

// Schreibst du:
import Header from '@components/Header';

Empfohlene Projektstruktur

Fuer groessere Projekte empfehlen wir diese Struktur:

src/
├── components/          # Wiederverwendbare Komponenten
│   ├── Button.jsx
│   ├── Card.jsx
│   └── Header.jsx
├── pages/               # Seiten-Komponenten
│   ├── Home.jsx
│   └── About.jsx
├── hooks/               # Eigene React Hooks
│   └── useLocalStorage.js
├── utils/               # Hilfsfunktionen
│   └── helpers.js
├── styles/              # CSS-Dateien
│   └── global.css
├── App.jsx
└── main.jsx

Uebungen

Erstelle ein neues React-Projekt mit Vite und starte den Entwicklungsserver
Aendere den Titel in App.jsx und beobachte das Hot Reload
Erstelle einen components-Ordner und verschiebe den Inhalt in eine eigene Komponente
Aendere den Port auf 3000 in der Vite-Konfiguration

Was kommt als Naechstes?

Jetzt, wo dein Projekt steht, lernst du im naechsten Kapitel JSX kennen – die spezielle Syntax, die React so elegant macht. Du wirst verstehen, warum du HTML-aehnlichen Code direkt in JavaScript schreiben kannst.

Zusammenfassung

Vite ist der moderne Standard fuer React-Projekte – schnell und einfach
Mit npm create vite@latest erstellst du ein neues Projekt in Sekunden
Die wichtigsten Dateien sind main.jsx (Einstiegspunkt) und App.jsx (Haupt-Komponente)
Hot Module Replacement aktualisiert deine App sofort bei Aenderungen
Eine saubere Projektstruktur mit Ordnern fuer Komponenten, Seiten und Hooks ist wichtig

Pro-Tipp: Nutze nicht mehr Create React App (CRA) – es wird nicht mehr aktiv gepflegt und ist deutlich langsamer als Vite. Das React-Team empfiehlt offiziell Vite oder ein Meta-Framework wie Next.js fuer neue Projekte.