Formulare, Listen und nutzerfreundliche Zustände
"Eingaben und Ladezustände barrierefrei darstellen."
Konzepte verständlich erklärt (für Einsteiger jeden Alters)
Lernziele
Eingaben und Ladezustände barrierefrei darstellen. Nach dieser Lektion kannst du das Konzept erklären, ein kleines Beispiel umsetzen und typische Grenzen benennen.
Erklärung
Kontrollierte Eingaben erhalten ihren Wert aus React-State. Listen brauchen stabile Keys aus der Identität des Elements. Interfaces sollten Lade-, Leer-, Erfolgs- und Fehlerzustand ausdrücken. Formular-Labels, Fokusführung und verständliches Feedback sind Teil der Funktion. Das Code-Labor demonstriert die Datenverarbeitung in JavaScript; es kompiliert kein JSX.
Schrittweises Beispiel
Beim Absenden event.preventDefault() verwenden, Eingaben validieren und einen klaren Fehler neben dem Feld anzeigen. Bei asynchronem Speichern Submit-Button während des Requests deaktivieren.
const items = [{ id: "a", label: "Erster" }, { id: "b", label: "Zweiter" }];
console.log(items.map(({ id, label }) => ({ key: id, text: label })));
Zusammenfassung
Gute UI zeigt, was passiert, was schiefging und was der nächste Schritt ist.
Lerncheck & Übung
Etwa 30 Minuten · beginner
Das lernst du
- Erkläre die Kernidee von „Formulare, Listen und nutzerfreundliche Zustände“ 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
- Nur Buttonfarben ändern reicht nicht als Feedback. Fehler ausschließlich per Farbe sind nicht zugänglich. Asynchrone Ergebnisse müssen gegen veraltete Requests geschützt werden.
Wissenscheck
Praktische Aufgabe
Mappe stabile IDs und Labels aus einer Liste in eine neue Datenliste.
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 „Formulare, Listen und nutzerfreundliche Zustände“: Nenne eine fehlende Annahme und stelle mir eine Gegenfrage.
Interaktive Übung & lokaler Testlauf
Mappe stabile IDs und Labels aus einer Liste in eine neue Datenliste.
Hinweise auf Wunsch anzeigen
- Zerlege die Aufgabe in Eingabe, Verarbeitung und erwartete Ausgabe.
- Prüfe auch einen leeren oder ungültigen Fall.