State mit useState (Das Kurzzeitgedächtnis einer Komponente)

💡 Die Kernidee im Alltag:

"Normalerweise vergisst eine Funktion alles, sobald sie fertig ist. Mit 'State' bekommt deine Komponente ein Kurzzeitgedächtnis – z.B. um mitzuzählen, wie oft ein Button geklickt wurde."

Wie es wirklich funktioniert (Erklärt für 12-Jährige)

Der klassische Zähler (Counter) in React:

import { useState } from 'react';

function Zaehler() {
  // count = die aktuelle Zahl, setCount = die Funktion zum Ändern
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Aktueller Stand: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Klick mich (+1)
      </button>
    </div>
  );
}

KI-Power-Tipp für Entwickler

Empfohlener Assistent: Claude 3.5 Sonnet

Golden Prompt für deinen Editor:

Erstelle einen Warenkorb-State mit useState, bei dem Produkte hinzugefügt und deren Menge erhöht werden können, ohne den State direkt zu mutieren.

Qualitäts-Prüfung: Prüfe, ob der State immutabel aktualisiert wird (z.B. mit dem Spread-Operator `[...prev, neu]`).

State mit useState (Das Kurzzeitgedächtnis einer Komponente)

Wie es wirklich funktioniert (Erklärt für 12-Jährige)

Interaktive Übung & lokaler Testlauf