Komponenten, Props und UI-Zustand
"Benutzeroberflächen in wiederverwendbare Bausteine zerlegen."
Konzepte verständlich erklärt (für Einsteiger jeden Alters)
Lernziele
Benutzeroberflächen in wiederverwendbare Bausteine zerlegen. Nach dieser Lektion kannst du das Konzept erklären, ein kleines Beispiel umsetzen und typische Grenzen benennen.
Erklärung
Eine Komponente beschreibt einen Teil der Oberfläche. Props sind Eingaben von außen; State ist veränderlicher Zustand, der die Darstellung beeinflusst. Abgeleitete Werte sollten möglichst berechnet statt doppelt gespeichert werden.
Schrittweises Beispiel
In React sähe eine Komponente etwa so aus: function Badge({ label }) { return <span>{label}</span> }. Props liefern Eingaben; useState verwaltet Zustand. Das Code-Labor führt JavaScript aus, nicht JSX.
const props = { title: "Lernpfad" };
console.log(props.title);
Zusammenfassung
Datenfluss nach unten über Props; Ereignisse melden Änderungen nach oben.
Lerncheck & Übung
Etwa 30 Minuten · beginner
Das lernst du
- Erkläre die Kernidee von „Komponenten, Props und UI-Zustand“ in eigenen Worten.
- Wähle eine passende Technik für einen konkreten Anwendungsfall.
- Erkenne mindestens eine typische Fehlerquelle.
Voraussetzungen
- Keine Zugriffsvoraussetzungen. Vorwissen wird in der Erklärung eingeführt.
Häufige Fehler
- Index als Key in veränderlichen Listen kann Elemente falsch zuordnen. Direkte DOM-Manipulation umgeht Reacts Modell; verschachtelte Komponenten im Render neu definieren kann State zurücksetzen.
Wissenscheck
Praktische Aufgabe
Modelliere die Props einer Überschrift als Datenobjekt und gib den Titel aus.
Das Code-Labor führt JavaScript aus, kompiliert aber weder TypeScript-Typen noch React/JSX. Die Editoraufgabe übt das zugehörige Datenmodell in ausführbarem JavaScript.
Quellen und Einordnung
Prüfe meine Erklärung zu „Komponenten, Props und UI-Zustand“: Nenne eine fehlende Annahme und stelle mir eine Gegenfrage.
Interaktive Übung & lokaler Testlauf
Modelliere die Props einer Überschrift als Datenobjekt und gib den Titel aus.
Hinweise auf Wunsch anzeigen
- Zerlege die Aufgabe in Eingabe, Verarbeitung und erwartete Ausgabe.
- Prüfe auch einen leeren oder ungültigen Fall.