Kapitel 6: React-Komponenten

Komponenten sind das Herz von React. Alles in React besteht aus Komponenten.

---

6.1 Was sind Komponenten?

📖 Definition

Eine Komponente ist ein wiederverwendbares UI-Teil, das eigenen Zustand und Logik kapselt.

✅ Vorteile von Komponenten

1. Wiederverwendbarkeit: Einmal schreiben, überall verwenden
2. Wartbarkeit: Kleine, fokussierte Teile
3. Testbarkeit: Einfach zu testen
4. Kapselung: Logik und UI zusammen

🎯 Beispiel

┌─────────────────────────────┐
│        App (Root)          │
│  ┌─────────────────────┐  │
│  │    Header            │  │
│  └─────────────────────┘  │
│  ┌─────────────────────┐  │
│  │    Main Content     │  │
│  │  ┌───────────────┐  │  │
│  │  │   PostCard    │  │  │
│  │  └───────────────┘  │  │
│  │  ┌───────────────┐  │  │
│  │  │   PostCard    │  │  │
│  │  └───────────────┘  │  │
│  └─────────────────────┘  │
│  ┌─────────────────────┐  │
│  │    Footer            │  │
│  └─────────────────────┘  │
└─────────────────────────────┘

---

6.2 Zwei Arten von Komponenten

1️⃣ Funktionskomponenten (EMPFOHLEN!)

// Einfache Funktionskomponente
function Welcome() {
  return <h1>Hallo!</h1>;
}

// Mit Pfeilfunktion
const Welcome = () => {
  return <h1>Hallo!</h1>;
};

// Exportieren
export default Welcome;

Vorteile:

• Einfacher und kürzer
• Kein this Problem
• Hooks verwenden (useState, useEffect, etc.)
• Moderner Standard

---

2️⃣ Klassenkomponenten (ALT - nur zum Verständnis)

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hallo!</h1>;
  }
}

export default Welcome;

Nachteile:

• Mehr Boilerplate-Code
• this Probleme
• Schwieriger zu lesen

Empfehlung: Verwenden Sie Funktionskomponenten!

---

6.3 Komponenten definieren, importieren und verwenden

📦 Komponente definieren

Willkommen.jsx:

function Welcome() {
  return <h1>Willkommen!</h1>;
}

export default Welcome;

📥 Komponente importieren

App.jsx:

import Welcome from './Willkommen'; // Importieren

function App() {
  return (
    <div>
      <Welcome /> {/* Verwenden */}
    </div>
  );
}

export default App;

🎯 Komponenten verschachteln

function Header() {
  return <h1>Header</h1>;
}

function Main() {
  return <p>Hauptinhalt</p>;
}

function App() {
  return (
    <div>
      <Header />
      <Main />
    </div>
  );
}

---

6.4 Props (Daten von Eltern zu Kind)

📥 Props empfangen

Kindkomponente:

function Welcome(props) {
  return <h1>Hallo, {props.name}!</h1>;
}

// Oder mit Destrukturierung
function Welcome({ name }) {
  return <h1>Hallo, {name}!</h1>;
}

📤 Props übergeben

Elternkomponente:

function App() {
  return (
    <div>
      <Welcome name="Max" />
      <Welcome name="Anna" />
    </div>
  );
}

🔢 Mehrere Props

function User({ name, age, city }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Alter: {age}</p>
      <p>Stadt: {city}</p>
    </div>
  );
}

// Verwendung
<User name="Max" age={25} city="Berlin" />

🧠 props sind schreibgeschützt (Unveränderlich)

// ❌ Falsch: Props ändern
function Welcome(props) {
  props.name = "Neu"; // FEHLER!
  return <h1>{props.name}</h1>;
}

// ✅ Richtig: Nur lesen
function Welcome(props) {
  return <h1>{props.name}</h1>;
}

---

6.5 State (Zustand einer Komponente)

🎯 Was ist State?

State ist ein Objekt, das Daten speichert, die sich über die Zeit ändern können.

📦 useState Hook (WICHTIG!)

import { useState } from 'react';

function Counter() {
  // Deklaration: [aktueller Wert, Setter-Funktion]
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Zähler: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Erhöhen
      </button>
    </div>
  );
}

🔧 useState Grundlagen

// Syntax
const [state, setState] = useState(initialValue);

// Beispiel
const [name, setName] = useState("Max");
const [age, setAge] = useState(25);
const [isLoggedIn, setIsLoggedIn] = useState(false);

⚠️ Wichtige Regeln

1. State direkt ändern verboten!

// ❌ Falsch
const [count, setCount] = useState(0);
count = count + 1; // FEHLER!

// ✅ Richtig
setCount(count + 1);

2. Bei Objekten: Alle Felder kopieren!

const [user, setUser] = useState({ name: "Max", age: 25 });

// ❌ Falsch: Überschreibt das ganze Objekt
setUser({ age: 26 });

// ✅ Richtig: Alte Werte kopieren
setUser({ ...user, age: 26 });

3. Bei Arrays: Neues Array erstellen!

const [fruits, setFruits] = useState(["Apfel", "Banane"]);

// ❌ Falsch
fruits.push("Orange");
setFruits(fruits);

// ✅ Richtig
setFruits([...fruits, "Orange"]);

---

📝 Zusammenfassung

In diesem Kapitel haben wir gelernt:

• ✅ Was Komponenten sind und ihre Vorteile
• ✅ Funktionskomponenten (empfohlen) vs. Klassenkomponenten
• ✅ Komponenten definieren, importieren und verwenden
• ✅ Props (Daten von Eltern zu Kind)
• ✅ useState Hook (Zustand einer Komponente)

---

🎯 Nächste Schritte

Im nächsten Kapitel werden wir lernen:

• Event-Handling in React
• Formular-Bindung (Controlled Components)
• Events wie onClick, onChange verwenden

Bereit für Events? → Kapitel 7: Event-Handling und Formulare