Projekteinrichtung: Vite, Layout und Dev-Server
Erstellen Sie eine React-App mit Vite (oder einem ähnlichen Werkzeug), verstehen Sie den grundlegenden Ordneraufbau, starten Sie einen Dev-Server und überprüfen Sie das Rendering mit einer kleinen Komponente.
Projekteinrichtung: Vite, Layout und Dev-Server ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 3 Lektionen.
Überblick zur Einrichtung
Ziel: Erstellen Sie schnell ein Projekt, lernen Sie die Ordnerstruktur kennen und führen Sie einen Dev-Server mit Hot Reload aus.
- Projektinitialisierung mit Vite (oder Ähnlichem)
- Wo sich die Dateien befinden
- App starten und überprüfen
Voraussetzungen
Voraussetzungen:
- Node.js LTS und npm installiert
- Terminalzugriff
- Grundlegende CLI-Nutzung (cd, ls)
Mit Vite ein Gerüst erstellen
Erstellen Sie das Projekt mit einem schnellen Tool:
- Gerüst erstellen (z. B. npm create vite@latest)
- React (JavaScript) auswählen
- Abhängigkeiten installieren (npm install)
Wichtige Ordner
Struktur (typisch):
- index.html: enthält
div#root - src/main.jsx: erstellt den Root und rendert App
- src/App.jsx: Ihre Komponente
Dev-Server starten
Dev-Server:
- Starten Sie ihn mit npm run dev
- Öffnen Sie die lokale URL
- Bearbeiten Sie App.jsx; Änderungen werden sofort angezeigt (Hot Reload)
Rendering überprüfen
Rendern Sie eine kleine App, um zu bestätigen, dass die Einrichtung funktioniert, und passen Sie den Text an, um Hot Reload zu sehen.
<div id="root"></div>
Datei mit Mounting-Punkt
Zusammenfassung
Zusammenfassung: Erstellen Sie mit Vite ein Gerüst, lernen Sie, wo sich index.html, main.jsx und App.jsx befinden, starten Sie den Dev-Server und überprüfen Sie das Rendering mit einer kleinen Komponente.
Lerne React mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 88
- Lektionen
- 324
Häufig gestellte Fragen
Ist die Lektion „Projekteinrichtung: Vite, Layout und Dev-Server“ kostenlos?
Ja — der vollständige Text von „Projekteinrichtung: Vite, Layout und Dev-Server“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Projekteinrichtung: Vite, Layout und Dev-Server“?
Erstellen Sie eine React-App mit Vite (oder einem ähnlichen Werkzeug), verstehen Sie den grundlegenden Ordneraufbau, starten Sie einen Dev-Server und überprüfen Sie das Rendering mit einer kleinen Ko… Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um React Academy zu starten?
Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 3.
Wie lange dauert die Lektion „Projekteinrichtung: Vite, Layout und Dev-Server“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?
Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- React-Einstieg: Konzepte und Einrichtung
- Projekteinrichtung: Vite, Layout und Dev-Server
- Erste Komponente und erstes Rendering