Einrichten und Ausführen Eines React-Projekts Mit Vite

Bisher haben Sie 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 erfahren Sie, wie Sie mit Vite ein React-Projekt erstellen und ausführen. 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, öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus:

npm create vite@latest

Sie werden aufgefordert:

1. Einen Projektnamen einzugeben;
2. Ein Framework auszuwählen → wählen Sie React;
3. Eine Variante auszuwählen → wählen Sie JavaScript.

Nach Abschluss der Einrichtung wechseln Sie in den Projektordner:

cd project-name

Installieren Sie die Projektabhängigkeiten:

npm install

Starten des Entwicklungsservers

Um den React-Entwicklungsserver zu starten, führen Sie folgenden Befehl aus:

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;
• Wenn Sie diese URL im Browser öffnen, wird Ihre React-App angezeigt.

Alle Änderungen am Code werden automatisch im Browser aktualisiert.

Was gerade passiert ist verstehen

Als Sie den Entwicklungsserver gestartet haben:

• Vite hat Ihren React-Code gebündelt;
• React hat die Anwendung im Browser gerendert;
• Die App ist in den Entwicklungsmodus gewechselt, optimiert für schnelles Feedback.

Sie haben nun ein echtes React-Projekt lokal laufen.