Bisher ist deine Landingpage eine schoene statische Seite -- sie sieht toll aus, aber tut nichts. In dieser Lektion machen wir sie interaktiv. Wenn jemand eine E-Mail eingibt und auf "Absenden" klickt, passiert etwas.
Was ist "State"?
Konzept
State ist das Kurzzeitgedaechtnis der App. Wenn ein Benutzer in ein Formularfeld tippt, muss sich die App merken, was getippt wurde. Wenn er auf Absenden klickt, muss sich die App merken, ob die Uebermittlung erfolgreich war oder fehlgeschlagen ist. Diese temporaeren, sich aendernden Werte sind "State."In React (der Bibliothek hinter Next.js) wird State mit einem Tool namens useState verwaltet. Du musst diesen Code nicht schreiben -- Claude uebernimmt das -- aber das Konzept zu verstehen hilft dir, Claude besser anzuleiten.
Zum Beispiel wird dein Anmeldeformular State haben fuer:
- Den E-Mail-Text, den der Benutzer gerade tippt
- Ob das Formular gerade uebermittelt wird (Laden)
- Ob die Uebermittlung erfolgreich war oder fehlgeschlagen ist
- Eventuelle Fehlermeldungen zur Anzeige
Das Anmeldeformular bauen
Lass uns das Platzhalter-Formular aus Lektion 5 zu einem echten, interaktiven Formular upgraden:
Probier es aus
Tippe in Claude Code:"Update the email signup form in the hero section to be fully interactive. It should: - Validate that the email is a real email format before submitting - Show a loading spinner on the submit button while processing - After 'submission' (just simulate it with a 1-second delay for now), show a green checkmark icon and the message 'Thanks! You're on the list.' - If the email is invalid, show a red error message below the input: 'Please enter a valid email address.' - The input should clear after successful submission - Make the form a client component (add 'use client' at the top)"
Claude erstellt oder aktualisiert die Formular-Komponente mit all dieser Logik. Schau in deinem Browser nach -- probiere das Absenden mit einer gueltigen und einer ungueltigen E-Mail, um beide Pfade zu testen.
Formularuebermittlung handhaben
Im Moment zeigt das Formular nach einer gefaelschten Verzoegerung eine Erfolgsmeldung an. Es sendet die E-Mail noch nirgendwohin -- wir verbinden es in Lektion 7 mit einem echten Backend.
Das passiert unter der Haube:
- Benutzer tippt seine E-Mail (State aktualisiert sich mit jedem Tastendruck)
- Benutzer klickt auf Absenden (State wechselt zu "Laden")
- Formular validiert das E-Mail-Format
- Wenn gueltig: simuliert eine Netzwerkanfrage, zeigt dann den Erfolgsstatus
- Wenn ungueltig: zeigt den Fehlerstatus
Konzept
Dieses Muster -- Eingabe erfassen, validieren, absenden, Ergebnis anzeigen -- ist die Funktionsweise jedes Formulars in jeder App der Welt. Du hast gerade eines gebaut, indem du es auf Englisch beschrieben hast.Animationen und Feinschliff hinzufuegen
Ein bisschen Animation bewirkt viel, damit sich deine App professionell anfuehlt:
Probier es aus
Probiere diese Prompts nacheinander in Claude Code:1. "Add a subtle fade-in animation when the page loads. Each section should fade in with a slight delay."
2. "Make the submit button have a hover effect — slightly brighter color and a subtle shadow lift."
3. "When the success message appears, animate it with a smooth fade-in and scale-up from 95% to 100%."
Haeufige Probleme und wie du sie behebt
Als Anfaenger wirst du auf Probleme stossen. So nutzt du Claude, um sie zu loesen:
"Das Formular tut nichts, wenn ich auf Absenden klicke" Sag Claude: "The form submit button doesn't seem to work. Can you check the onClick/onSubmit handler and make sure it's wired up correctly?"
"Die Seite sieht auf dem Handy kaputt aus" Sag Claude: "The form looks broken on mobile — the input and button are overlapping. Fix the responsive layout."
"Ich bekomme einen Fehler im Terminal" Kopiere die exakte Fehlermeldung und fuege sie bei Claude ein: "I'm getting this error: [Fehler einfuegen]. What's wrong and how do I fix it?"
Pro-Tipp
Beim Debugging teile immer die exakte Fehlermeldung mit Claude. Paraphrasiere sie nicht. Der Fehlertext enthaelt spezifische Informationen, die Claude zur Diagnose des Problems braucht."Die Seite ist leer / zeigt einen weissen Bildschirm" Das bedeutet normalerweise, dass ein JavaScript-Fehler vorliegt. Oeffne die Developer Tools deines Browsers (F12), gehe zum Console-Tab und teile Claude mit, was du siehst.
Git Checkpoint
Dein Formular ist interaktiv, validiert und animiert. Speichere deinen Fortschritt:
git add .
git commit -m "interactive signup form with validation and animations"
Ehrlicher Hinweis
Interaktive Features sind der Punkt, an dem es knifflig werden kann. Die simulierte Uebermittlung, die wir gebaut haben, funktioniert perfekt in der Entwicklung, aber die Verbindung mit einem echten Server (naechste Lektion) bringt neue Herausforderungen mit sich: Netzwerkfehler, langsame Verbindungen, Race Conditions. KI handhabt das meiste davon gut, aber zu verstehen, dass diese Herausforderungen existieren, hilft dir, Claude die richtigen Fragen zu stellen.Wichtigste Erkenntnis
Interaktive Features sind das, was Apps lebendig macht. Du baust jetzt etwas, das auf Benutzereingaben reagiert -- E-Mails validiert, Ladezustaende zeigt, Ergebnisse anzeigt. Und du hast es geschafft, indem du ein Gespraech mit KI gefuehrt hast.