React-App mit Vite erstellen
Vite ist ein modernes, schnelles Build-Tool für Frontend-Projekte und bietet eine ausgezeichnete Alternative zu Create React App. Hier ist eine Schritt-für-Schritt-Anleitung, um ein React-Projekt mit Vite zu erstellen
Voraussetzungen
Abschnitt betitelt „Voraussetzungen“- Node.js (mindestens Version 16)
- npm als Paketmanager
Projekt erstellen
Abschnitt betitelt „Projekt erstellen“-
Öffne dein Terminal und führe folgenden Befehl aus:
Terminal-Fenster npm create vite@latest mein-react-projekt -- --template react -
Wechsle in das Projektverzeichnis:
Terminal-Fenster cd mein-react-projekt -
Installiere die Abhängigkeiten:
Terminal-Fenster npm install -
Starte den Entwicklungsserver:
Terminal-Fenster npm run dev
Nach dem Ausführen wird der Entwicklungsserver gestartet und die Anwendung ist unter http://localhost:5173 verfügbar. Prüfe zur Sicherheit den verwendeten Port im Terminal.
Projektstruktur
Abschnitt betitelt „Projektstruktur“Die Struktur eines mit Vite erstellten React-Projekts sieht so aus:
Directorymein-react-projekt/
Directorynode_modules/
- …
Directorypublic/
- vite.svg
Directorysrc/
Directoryassets/
- react.svg
- App.css
- App.jsx
- index.css
- main.jsx
- .eslintrc.cjs
- .gitignore
- index.html
- package.json
- vite.config.js
- README.md
Build für Produktion
Abschnitt betitelt „Build für Produktion“Um eine produktionsreife Version deiner Anwendung zu erstellen:
npm run buildDie gebaute Anwendung befindet sich im dist-Verzeichnis und kann auf einem Webserver bereitgestellt werden.
Vorteile von Vite gegenüber Create React App
Abschnitt betitelt „Vorteile von Vite gegenüber Create React App“- Deutlich schnellere Startzeit des Entwicklungsservers
- Schnellere Hot Module Replacement (HMR)
- Bessere Unterstützung für TypeScript und JSX
- Unterstützung für verschiedene Frontend-Frameworks (nicht nur React)
- Moderne Build-Technologie basierend auf ESBuild und Rollup
Falls Sie weitere Anpassungen oder zusätzliche Pakete benötigen, könen Sie diese jederzeit über npm installieren.
Öffne das Projekt nun mit Visual Code oder einer anderen IDE (Integrated Development Environment).