Summary  
This chapter demonstrates how to scaffold a React codebase with Vite, install dependencies, and start a live-reloading development server.

General domain of usage  
Web application development

Bisher hast du mit isolierten React-Beispielen gearbeitet. In der realen Entwicklung werden React-Anwendungen als **Projekte** mit einer vordefinierten Struktur und entsprechenden Tools erstellt und ausgeführt.

In diesem Kapitel erfährst du, wie du mit **Vite** ein React-Projekt erstellst und startest. Vite ist ein modernes Build-Tool, das schnell, leichtgewichtig und häufig in Produktionsprojekten eingesetzt wird.

## Erstellen eines React-Projekts mit Vite
Um ein neues React-Projekt zu erstellen, öffne das Terminal und führe folgenden Befehl aus:
```
npm create vite@latest
```
Du wirst aufgefordert:
1. Einen **Projektnamen** einzugeben;
2. Ein **Framework** auszuwählen → **React** wählen;
3. Eine **Variante** auszuwählen → **JavaScript** wählen.

Nach Abschluss der Einrichtung in den Projektordner wechseln:
```
cd project-name
```
Die Projektabhängigkeiten installieren:
```
npm install
```

## Starten des Entwicklungsservers
Um den React-Entwicklungsserver zu starten, führe folgenden Befehl aus:
```
npm run dev
```
Nach Ausführung dieses Befehls:
- Vite startet einen lokalen Entwicklungsserver;
- Eine lokale URL (meist `http://localhost:5173`) erscheint im Terminal;
- Beim Öffnen dieser URL im Browser wird deine React-App angezeigt.

Alle Änderungen am Code werden automatisch im Browser aktualisiert.

### Verständnis der gerade abgelaufenen Schritte
Beim Starten des Entwicklungsservers:
- Vite hat deinen React-Code gebündelt;
- React hat die Anwendung im Browser gerendert;
- Die App ist in den **Entwicklungsmodus** gewechselt, optimiert für schnelles Feedback.

**Du hast jetzt ein echtes React-Projekt lokal laufen.**

#### 
- `npm install`: installiert die Projektabhängigkeiten;
- `npm run dev`: startet den Entwicklungsserver;
- `Ctrl/Cmd + C`: stoppt den laufenden Server.

Diese Befehle gehören zum Alltag in der React-Entwicklung.

Häufig verwendete Befehle

Wofür wird Vite hauptsächlich verwendet?

Erkunden Sie die Grundlagen der Erstellung von Benutzeroberflächen mit React. Schwerpunkt auf Komponenten, JSX, Datenfluss, Zustand und Nebenwirkungen, wie sie in alltäglichen React-Anwendungen verwendet werden.

Untersuchung von React und dessen Rendering von Benutzeroberflächen. Schwerpunkt auf Komponenten, JSX-Syntax und der Anzeige von Elementen auf dem Bildschirm.

Vertiefung der Datenübergabe zwischen Komponenten und Steuerung der UI-Ausgabe. Schwerpunkt auf Props, bedingtem Rendern und dem Rendern von Datenlisten.

Erfahren Sie, wie Benutzerinteraktionen und externe Daten die Benutzeroberfläche im Laufe der Zeit verändern. Schwerpunkt auf dem Verwalten von Zustand und dem Umgang mit Seiteneffekten mithilfe von React Hooks.

Untersuchung gängiger Methoden zur Gestaltung von React-Komponenten. Schwerpunkt auf der Anwendung von Stilen mittels Inline-Styles und externer CSS.

Erfahren Sie, wie ein React-Projekt ausgeführt wird und wie dessen Struktur aufgebaut ist. Schwerpunkt auf dem Starten eines Projekts mit Vite und dem Navigieren durch die Projektdateien.

Einrichten und Ausführen Eines React-Projekts Mit Vite

Erstellen eines React-Projekts mit Vite

Starten des Entwicklungsservers

Verständnis der gerade abgelaufenen Schritte