Kapitel 3: Entwicklungsumgebung einrichten

In diesem Kapitel richten wir die Entwicklungsumgebung für React ein.

---

3.1 Entwicklungswerkzeuge installieren

🛠️ VS Code (Visual Studio Code)

Warum VS Code?

• Kostenlos und Open Source
• Hervorragende React-Unterstützung
• Viele nützliche Erweiterungen

Download:

• Offizielle Webseite: https://code.visualstudio.com/

🔌 Empfohlene VS Code Erweiterungen

1. ESLint - Code-Überprüfung
2. Prettier - Code-Formatierung
3. React Developer Tools - React-Debugging
4. JavaScript (ES6) Code Snippets - Code-Snippets
5. Auto Rename Tag - Tag automatisch umbenennen
6. GitLens - Git-Integration

Installation:

• Öffnen Sie VS Code
• Klicken Sie auf das Erweiterungs-Symbol (links)
• Suchen Sie nach dem Namen
• Klicken Sie auf "Installieren"

---

3.2 Umgebungskonfiguration: Node.js + npm/pnpm/yarn

📦 Node.js installieren

Was ist Node.js?

• JavaScript-Laufzeitumgebung
• Erlaubt das Ausführen von JavaScript außerhalb des Browsers
• Benötigt für React-Entwicklung

Installation:

1. Besuchen Sie: https://nodejs.org/
2. Laden Sie die LTS-Version herunter (empfohlen)
3. Führen Sie das Installationsprogramm aus
4. Folgen Sie den Anweisungen

Überprüfung:

# Überprüfen Sie die Node.js-Version
node -v

# Überprüfen Sie die npm-Version
npm -v

📦 Paketmanager: npm / pnpm / yarn

npm (Standard)

# Paket installieren
npm install paket-name

# Paket global installieren
npm install -g paket-name

# Projektabhängigkeiten installieren
npm install

pnpm (EMPFOHLEN - schneller)

# pnpm installieren
npm install -g pnpm

# Paket installieren
pnpm add paket-name

# Projektabhängigkeiten installieren
pnpm install

yarn (Alternative)

# yarn installieren
npm install -g yarn

# Paket installieren
yarn add paket-name

# Projektabhängigkeiten installieren
yarn install

Empfehlung: Verwenden Sie pnpm (schneller und platzsparender).

---

3.3 Browser-Debugging-Tools: React Developer Tools

🔧 React Developer Tools installieren

Chrome:

1. Öffnen Sie den Chrome Web Store
2. Suchen Sie nach "React Developer Tools"
3. Klicken Sie auf "Zur Chrome-Umgebung hinzufügen"

Firefox:

1. Öffnen Sie den Firefox Add-ons Store
2. Suchen Sie nach "React Developer Tools"
3. Klicken Sie auf "Hinzufügen"

🎯 Verwendung

1. Öffnen Sie eine React-Website
2. Öffnen Sie die Browser-Entwicklungstools (F12)
3. Sie sehen zwei neue Tabs:
   • Components: Zeigt die React-Komponentenstruktur
   • Profiler: Analysiert die Leistung

---

3.4 Erstes React-Programm: Online-Editor (CodeSandbox)

🌐 CodeSandbox (Keine Installation erforderlich!)

Vorteile:

• Keine lokale Installation erforderlich
• Sofortiger Einstieg
• Teilen von Code ist einfach

Schritte:

1. Besuchen Sie: https://codesandbox.io/
2. Klicken Sie auf "Create Sandbox"
3. Wählen Sie "React" aus
4. CodeSandbox erstellt automatisch ein React-Projekt

📝 Erstes React-Programm (CodeSandbox)

App.js:

import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Hallo React!</h1>
      <p>Mein erstes React-Programm</p>
    </div>
  );
}

export default App;

Was passiert hier?

• Wir definieren eine Funktion App
• Die Funktion gibt JSX zurück (HTML-ähnliche Syntax)
• className wird anstelle von class verwendet

Ausgabe:

Hallo React!
Mein erstes React-Programm

---

📝 Zusammenfassung

In diesem Kapitel haben wir gelernt:

• ✅ VS Code und Erweiterungen installieren
• ✅ Node.js und Paketmanager (npm/pnpm/yarn) einrichten
• ✅ React Developer Tools installieren
• ✅ Erstes React-Programm in CodeSandbox erstellen

---

🎯 Nächste Schritte

Im nächsten Kapitel werden wir:

• React-Projekte lokal erstellen (create-react-app / Vite)
• Projektstruktur verstehen
• Entwicklungsserver starten

Bereit für echte Projekte? → Kapitel 4: React-Projekt erstellen