Funktionskomponenten

In modernem React sind Funktionskomponenten der Standard. Seit der Einfuehrung von Hooks gibt es keinen Grund mehr, Klassenkomponenten zu verwenden. In diesem Tutorial vertiefst du dein Wissen ueber Funktionskomponenten und lernst wichtige Patterns kennen.

Funktionskomponenten im Detail

Eine Funktionskomponente ist eine regulaere JavaScript-Funktion:

// Arrow Function (beliebt und kompakt)
const Greeting = () => {
  return <h1>Hallo!</h1>;
};

// Regulaere Funktion (auch voellig in Ordnung)
function Greeting() {
  return <h1>Hallo!</h1>;
}

// Arrow Function mit implizitem Return (fuer einfache Komponenten)
const Greeting = () => <h1>Hallo!</h1>;

Alle drei Varianten sind gleichwertig. Waehle den Stil, der dir am besten gefaellt, und bleibe konsistent.

Komponenten mit Logik

Funktionskomponenten koennen beliebig viel JavaScript-Logik enthalten:

function UserProfile() {
  // JavaScript-Logik vor dem Return
  const firstName = 'Max';
  const lastName = 'Mustermann';
  const fullName = `${firstName} ${lastName}`;
  const currentHour = new Date().getHours();

  let greeting;
  if (currentHour < 12) {
    greeting = 'Guten Morgen';
  } else if (currentHour < 18) {
    greeting = 'Guten Tag';
  } else {
    greeting = 'Guten Abend';
  }

  // JSX-Rueckgabe
  return (
    <div>
      <h1>{greeting}, {fullName}!</h1>
      <p>Es ist {currentHour} Uhr.</p>
    </div>
  );
}

Hilfsfunktionen in Komponenten

Du kannst Funktionen innerhalb deiner Komponente definieren:

function PriceDisplay() {
  const price = 29.99;
  const taxRate = 0.19;

  function calculateTax(amount) {
    return amount * taxRate;
  }

  function formatCurrency(amount) {
    return amount.toFixed(2).replace('.', ',') + ' Euro';
  }

  const tax = calculateTax(price);
  const total = price + tax;

  return (
    <div>
      <p>Preis: {formatCurrency(price)}</p>
      <p>MwSt: {formatCurrency(tax)}</p>
      <p><strong>Gesamt: {formatCurrency(total)}</strong></p>
    </div>
  );
}

Funktionen, die nicht von Komponenten-Daten abhaengen, kannst du auch ausserhalb definieren:

// Hilfsfunktion ausserhalb - wird nicht bei jedem Render neu erstellt
function formatCurrency(amount) {
  return new Intl.NumberFormat('de-DE', {
    style: 'currency',
    currency: 'EUR'
  }).format(amount);
}

function PriceTag({ price }) {
  return <span className="price">{formatCurrency(price)}</span>;
}

Komponentenkomposition

Das wichtigste Pattern in React: Komponenten zusammensetzen (Komposition):

function Avatar({ name, size = 40 }) {
  const initial = name.charAt(0).toUpperCase();

  return (
    <div style={{
      width: size,
      height: size,
      borderRadius: '50%',
      backgroundColor: '#3498db',
      color: 'white',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontSize: size * 0.4
    }}>
      {initial}
    </div>
  );
}

function UserInfo({ name, role }) {
  return (
    <div>
      <strong>{name}</strong>
      <p style={{ color: '#666', margin: 0 }}>{role}</p>
    </div>
  );
}

function UserCard({ name, role }) {
  return (
    <div style={{
      display: 'flex',
      alignItems: 'center',
      gap: '1rem',
      padding: '1rem',
      border: '1px solid #eee',
      borderRadius: '8px'
    }}>
      <Avatar name={name} />
      <UserInfo name={name} role={role} />
    </div>
  );
}

// Verwendung
function TeamPage() {
  return (
    <div>
      <h1>Unser Team</h1>
      <UserCard name="Max" role="Frontend" />
      <UserCard name="Anna" role="Backend" />
      <UserCard name="Tom" role="Design" />
    </div>
  );
}

Bedingtes Rendern in Komponenten

Es gibt mehrere Wege, Inhalte bedingt anzuzeigen:

Fruehes Return

function AdminPanel({ user }) {
  // Fruehes Return - Komponente zeigt nichts an
  if (!user) {
    return null;
  }

  if (!user.isAdmin) {
    return <p>Zugriff verweigert.</p>;
  }

  return (
    <div>
      <h1>Admin-Bereich</h1>
      <p>Willkommen, {user.name}!</p>
    </div>
  );
}

Mehrere Returns

function StatusMessage({ status }) {
  if (status === 'loading') {
    return <p>Laden...</p>;
  }

  if (status === 'error') {
    return <p style={{ color: 'red' }}>Fehler aufgetreten!</p>;
  }

  if (status === 'empty') {
    return <p>Keine Daten vorhanden.</p>;
  }

  return <p>Daten erfolgreich geladen!</p>;
}

Pure Components

Funktionskomponenten sollten pure sein – bei gleichen Eingaben immer die gleiche Ausgabe liefern:

// Pure - gleiche Props = gleiches Ergebnis
function Greeting({ name }) {
  return <h1>Hallo, {name}!</h1>;
}

// Nicht pure - Ergebnis haengt von externer Variable ab
let callCount = 0;
function Counter() {
  callCount++; // Seiteneffekt!
  return <p>Aufrufe: {callCount}</p>;
}

Seiteneffekte (wie API-Aufrufe oder DOM-Manipulationen) gehoeren in Hooks wie useEffect – dazu spaeter mehr.

Default Parameter

Du kannst Standardwerte fuer deine Komponenten-Parameter definieren:

function Button({ text = 'Klick mich', color = '#3498db', size = 'medium' }) {
  const sizes = {
    small: { padding: '4px 8px', fontSize: '0.8rem' },
    medium: { padding: '8px 16px', fontSize: '1rem' },
    large: { padding: '12px 24px', fontSize: '1.2rem' }
  };

  return (
    <button style={{
      backgroundColor: color,
      color: 'white',
      border: 'none',
      borderRadius: '6px',
      cursor: 'pointer',
      ...sizes[size]
    }}>
      {text}
    </button>
  );
}

// Verwendung
<Button />                              // Standardwerte
<Button text="Senden" />                // Eigener Text
<Button text="Loeschen" color="red" size="small" />  // Alles angepasst

Komponenten-Checkliste

Bevor du eine Komponente fertigstellst, pruefe:

Kriterium	Frage
Benennung	Beginnt der Name mit einem Grossbuchstaben?
Single Responsibility	Hat die Komponente nur eine Aufgabe?
Wiederverwendbarkeit	Koennte man sie an anderer Stelle nutzen?
Props	Sind die Parameter sinnvoll benannt?
Pure	Ist sie frei von Seiteneffekten?
Export	Ist die Komponente exportiert?

Uebungen

1. Erstelle eine Alert-Komponente mit den Varianten “success”, “warning” und “error” – jeweils mit unterschiedlichen Farben
2. Baue ein NavigationMenu aus mehreren kleineren Komponenten zusammen (NavItem, NavLink, NavBar)
3. Erstelle eine WeatherCard-Komponente, die je nach Temperatur verschiedene Anzeigen rendert

Was kommt als Naechstes?

Du beherrschst jetzt die Grundlagen der Funktionskomponenten. Im naechsten Kapitel lernst du Props kennen – den Mechanismus, mit dem Komponenten Daten empfangen und untereinander kommunizieren.

Zusammenfassung

• Funktionskomponenten sind der Standard in modernem React
• Du kannst beliebige JavaScript-Logik vor dem Return verwenden
• Komposition ist das wichtigste Pattern – baue grosse UIs aus kleinen Komponenten
• Komponenten sollten pure sein – gleiche Eingaben, gleiche Ausgabe
• Nutze Default Parameter fuer sinnvolle Standardwerte

---