Kapitel 4: React-Projekt erstellen

In diesem Kapitel lernen wir, wie man ein React-Projekt erstellt und die Projektstruktur versteht.

---

4.1 Zwei Erstellungsmethoden

🔧 Methode 1: Create React App (CRA) - Traditionell

Vorteile:

• Offiziell von React-Team unterstützt
• Viele Tutorials und Ressourcen verfügbar

Nachteil:

• Langsam bei der Entwicklung
• Große Bundle-Größe

Erstellung:

# Mit npx (empfohlen)
npx create-react-app mein-projekt

# Mit npm
npm init react-app mein-projekt

# Mit yarn
yarn create react-app mein-projekt

# In das Projektverzeichnis wechseln
cd mein-projekt

# Entwicklungsserver starten
npm start

---

⚡ Methode 2: Vite - Modern und schnell (EMPFOHLEN!)

Vorteile:

• Extrem schnell (Entwicklung und Build)
• Moderne Build-Tools
• Bessere Performance

Erstellung:

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

# Mit pnpm (empfohlen)
pnpm create vite mein-projekt -- --template react

# In das Projektverzeichnis wechseln
cd mein-projekt

# Abhängigkeiten installieren
pnpm install

# Entwicklungsserver starten
pnpm dev

Warum Vite?

• Sehr schneller Hot Module Replacement (HMR)
• Schnellere Build-Zeiten
• Bessere Entwicklererfahrung

---

4.2 Projektbefehle

📝 Wichtige Befehle

# Entwicklungsserver starten
npm start        # CRA
pnpm dev         # Vite

# Projekt für Produktion bauen
npm run build    # CRA
pnpm build       # Vite

# Tests ausführen (wenn konfiguriert)
npm test

# Projekt beenden
# Drücken Sie Strg + C im Terminal

🌐 Entwicklungsserver

Nach dem Starten sehen Sie:

Local:   http://localhost:3000  (CRA)
Local:   http://localhost:5173  (Vite)

Öffnen Sie diese URL in Ihrem Browser!

---

4.3 Projektverzeichnisstruktur

📂 Vite React-Projektstruktur

mein-projekt/
├── node_modules/       # Installierte Pakete
├── public/            # Statische Assets
│   └── vite.svg      # Favicon
├── src/               # QUERQUELLE (WICHTIG!)
│   ├── App.css        # Stile für App-Komponente
│   ├── App.jsx        # Hauptkomponente
│   ├── index.css      # Globale Stile
│   ├── main.jsx       # Einstiegspunkt
│   └── assets/        # Bilder, Schriften, etc.
├── .gitignore         # Dateien, die Git ignorieren soll
├── index.html         # HTML-Einstiegspunkt
├── package.json       # Projektkonfiguration
├── README.md          # Projektdokumentation
└── vite.config.js    # Vite-Konfiguration

📂 Create React App (CRA) Struktur

mein-projekt/
├── node_modules/
├── public/
│   ├── index.html     # HTML-Einstiegspunkt
│   └── favicon.ico
├── src/               # QUERQUELLE (WICHTIG!)
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js       # Einstiegspunkt
│   ├── logo.svg
│   └── reportWebVitals.js
├── .gitignore
├── package.json
└── README.md

---

4.4 Wichtige Dateien verstehen

📦 package.json

{
  "name": "mein-projekt",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",           // Entwicklungsserver starten
    "build": "vite build",   // Produktions-Build
    "preview": "vite preview" // Produktions-Build lokal testen
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.0.0",
    "vite": "^4.3.9"
  }
}

🚪 Einstiegspunkt: main.jsx (Vite) / index.js (CRA)

Vite (main.jsx):

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

CRA (index.js):

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

🏠 Hauptkomponente: App.jsx / App.js

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
      </div>
    </div>
  )
}

export default App

---

📝 Zusammenfassung

In diesem Kapitel haben wir gelernt:

• ✅ Zwei Methoden zur React-Projekterstellung (CRA vs. Vite)
• ✅ Vite wird empfohlen (schneller)
• ✅ Projektbefehle (start, build, test)
• ✅ Projektverzeichnisstruktur
• ✅ Wichtige Dateien (package.json, main.jsx, App.jsx)

---

🎯 Nächste Schritte

Im nächsten Kapitel werden wir:

• JSX-Syntax im Detail lernen
• Verstehen, wie man HTML in React schreibt
• Ausdrücke in JSX verwenden

Bereit für JSX? → Kapitel 5: JSX-Syntax