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

• Node.js (mindestens Version 16)
• npm als Paketmanager

Projekt erstellen

1. Öffne dein Terminal und führe folgenden Befehl aus:

   npm create vite@latest mein-react-projekt -- --template react

2. Wechsle in das Projektverzeichnis:

   cd mein-react-projekt

3. Installiere die Abhängigkeiten:

   npm install

4. Starte den Entwicklungsserver:

   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

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

Um eine produktionsreife Version deiner Anwendung zu erstellen:

npm run build

Die gebaute Anwendung befindet sich im dist-Verzeichnis und kann auf einem Webserver bereitgestellt werden.

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).