Bisher wurden isolierte React-Beispiele verwendet. In der realen Entwicklung werden React-Anwendungen als Projekte mit vordefinierter Struktur und Werkzeugen erstellt und ausgeführt.

In diesem Kapitel wird erläutert, wie ein React-Projekt mit Vite erstellt und ausgeführt wird – einem modernen 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, das Terminal öffnen und folgenden Befehl ausführen:

npm create vite@latest

Anschließend werden folgende Angaben abgefragt:

1. Projektname eingeben;
2. Framework auswählen → React wählen;
3. Variante auswä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, folgenden Befehl ausführen:

npm run dev

Nach Ausführung dieses Befehls:

• Startet Vite einen lokalen Entwicklungsserver;
• Eine lokale URL (in der Regel http://localhost:5173) erscheint im Terminal;
• Beim Öffnen dieser URL im Browser wird die React-Anwendung 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 nun ein echtes React-Projekt lokal laufen.