Entwicklungsumgebung einrichten

Eine gut konfigurierte Entwicklungsumgebung ist essenziell für effizientes Arbeiten mit React. In diesem Kapitel führen wir Sie durch die notwendigen Schritte, um Ihre Arbeitsumgebung mit Vite optimal einzurichten.

Grundvoraussetzungen

Bevor Sie mit React entwickeln können, benötigen Sie:

1. Einen modernen Webbrowser (vorzugsweise Chrome oder Firefox)
2. Einen Code-Editor oder eine IDE (Visual Studio Code wird empfohlen)
3. Node.js und npm (Node Package Manager)

Installation der Grundlagen

1. Installieren Sie Node.js und npm

Node.js ist eine JavaScript-Laufzeitumgebung, die es Ihnen ermöglicht, JavaScript ausserhalb eines Browsers auszuführen. npm ist der zugehörige Paketmanager.

1. Besuchen Sie nodejs.org
2. Laden Sie die LTS-Version (Long Term Support) herunter
3. Folgen Sie den Installationsanweisungen für Ihr Betriebssystem

Überprüfen Sie die Installation mit den folgenden Befehlen in Ihrem Terminal oder der Kommandozeile:

node --version
npm --version

Beide Befehle sollten eine Versionsnummer zurückgeben.

2. Installieren Sie einen Code-Editor

Wir empfehlen Visual Studio Code (VS Code) aufgrund seiner hervorragenden Integration mit React:

1. Besuchen Sie code.visualstudio.com
2. Laden Sie den Editor herunter und installieren Sie ihn
3. Installieren Sie nützliche Erweiterungen für React-Entwicklung:
   • ESLint (für Code-Qualität)
   • Prettier (für Code-Formatierung)
   • ES7+ React/Redux/React-Native snippets (für Code-Snippets)
   • JavaScript (ES6) code snippets

React-Anwendung mit Vite erstellen

Vite (französisch für “schnell”) ist ein modernes Build-Tool, das von Evan You, dem Schöpfer von Vue.js, entwickelt wurde. Vite bietet gegenüber anderen Tools wie Create React App mehrere Vorteile:

• Schnellere Startzeiten durch den Einsatz nativer ES-Module
• Effizientere Entwicklung mit nahezu sofortigem Hot Module Replacement (HMR)
• Optimierte Production Builds für bessere Leistung

Schritt-für-Schritt-Anleitung zur Installation

1. Öffnen Sie Ihr Terminal oder die Kommandozeile

2. Führen Sie den folgenden Befehl aus, um ein neues Vite-Projekt zu erstellen:

   npm create vite@latest meine-react-app -- --template react

3. Folgen Sie den Anweisungen in der Konsole

4. Wechseln Sie in das Projektverzeichnis:

   cd meine-react-app

5. Installieren Sie die Projektabhängigkeiten:

   npm install

6. Starten Sie den Entwicklungsserver:

   npm run dev

Vite startet nun einen lokalen Entwicklungsserver, in der Regel unter http://localhost:5173. Ihr Browser öffnet sich automatisch und zeigt Ihre neue React-Anwendung an.

Projektstruktur verstehen

Nach der Erstellung Ihrer React-Anwendung mit Vite werden Sie eine Verzeichnisstruktur ähnlich der folgenden sehen:

meine-react-app/
  ├── node_modules/
  ├── public/
  │   └── vite.svg
  ├── src/
  │   ├── assets/
  │   │   └── react.svg
  │   ├── App.css
  │   ├── App.jsx
  │   ├── index.css
  │   └── main.jsx
  ├── .eslintrc.cjs
  ├── .gitignore
  ├── index.html
  ├── package.json
  ├── package-lock.json
  └── vite.config.js

Die wichtigsten Verzeichnisse und Dateien:

• src/: Hier befindet sich Ihr Quellcode
• main.jsx: Der Einstiegspunkt Ihrer Anwendung (entspricht index.js in CRA)
• App.jsx: Die Hauptkomponente Ihrer Anwendung
• public/: Statische Assets, die direkt kopiert werden
• index.html: Die HTML-Vorlage (liegt bei Vite im Hauptverzeichnis)
• vite.config.js: Konfigurationsdatei für Vite
• package.json: Abhängigkeiten und Skripte für Ihr Projekt

Wichtige npm-Befehle für Vite-Projekte

• npm run dev: Startet den Entwicklungsserver
• npm run build: Erstellt eine optimierte Version für die Produktion
• npm run preview: Startet einen lokalen Server für die Vorschau der Build-Version

Übung: Umgebung einrichten und testen

Aufgabe: Erste Schritte mit Vite und React

Führen Sie folgende Schritte aus, um Ihre React-Entwicklungsumgebung mit Vite einzurichten und zu testen:

1. Erstellen Sie eine neue React-Anwendung mit Vite wie oben beschrieben
2. Starten Sie den Entwicklungsserver mit npm run dev
3. Öffnen Sie die Datei src/App.jsx in Ihrem Code-Editor
4. Ändern Sie den Text in der Komponente, zum Beispiel die Überschrift
5. Speichern Sie die Datei und beobachten Sie, wie die Änderungen sofort im Browser erscheinen
6. Fügen Sie eine neue Komponente hinzu:

• Erstellen Sie eine neue Datei src/components/Greeting.jsx
• Implementieren Sie eine einfache Komponente, die einen Gruss anzeigt
• Importieren und verwenden Sie diese Komponente in App.jsx

Bonus: Installieren Sie die React Developer Tools-Erweiterung für Ihren Browser und untersuchen Sie die Komponentenstruktur Ihrer Anwendung.

Zusammenfassung

Eine moderne Entwicklungsumgebung mit Vite bietet einen schnellen und effizienten Einstieg in die React-Entwicklung. Mit seinen schnellen Startzeiten und dem effizienten Hot Module Replacement beschleunigt Vite Ihren Entwicklungsprozess erheblich. Die übersichtliche Projektstruktur erleichtert den Einstieg, und die optimierten Production Builds sorgen für leistungsstarke Anwendungen. Mit den grundlegenden Werkzeugen - Node.js, npm, VS Code und Vite - sind Sie bestens gerüstet, um Ihre ersten React-Komponenten zu entwickeln und die moderne Webentwicklung in vollem Umfang zu erleben.