Pana acum, pagina ta de prezentare este o pagina statica frumoasa — arata grozav dar nu face nimic. In aceasta lectie o facem interactiva. Cand cineva isi tasteaza emailul si apasa "Submit", vor incepe sa se intample lucruri.
Ce este "State"?
Concept
State este memoria pe termen scurt a aplicatiei. Cand un utilizator tasteaza intr-un camp de formular, aplicatia trebuie sa retina ce a tastat. Cand apasa submit, aplicatia trebuie sa retina daca trimiterea a reusit sau a esuat. Aceste valori temporare, care se schimba, sunt "state."In React (biblioteca din spatele Next.js), state-ul este gestionat cu un instrument numit useState. Nu trebuie sa scrii acest cod — Claude o va face — dar intelegerea conceptului te ajuta sa il directionezi mai bine pe Claude.
De exemplu, formularul tau de inscriere va avea state pentru:
- Textul emailului pe care il tasteaza utilizatorul
- Daca formularul este in curs de trimitere (loading)
- Daca trimiterea a reusit sau a esuat
- Orice mesaje de eroare de afisat
Construirea formularului de inscriere
Hai sa upgradizam formularul placeholder din Lectia 5 intr-unul real, interactiv:
Incearca
In Claude Code, tasteaza:"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 va crea sau actualiza componenta de formular cu toata aceasta logica. Verifica browserul — incearca sa trimiti cu un email valid si unul invalid pentru a vedea ambele scenarii functionand.
Gestionarea trimiterii formularului
Acum, formularul arata un mesaj de succes dupa o intarziere simulata. Nu trimite de fapt emailul nicaieri — il vom conecta la un backend real in Lectia 7.
Iata ce se intampla in spatele scenei:
- Utilizatorul isi tasteaza emailul (state-ul se actualizeaza cu fiecare tasta)
- Utilizatorul apasa Submit (state-ul se schimba la "loading")
- Formularul valideaza formatul emailului
- Daca e valid: simuleaza o cerere de retea, apoi afiseaza starea de succes
- Daca e invalid: afiseaza starea de eroare
Concept
Acest sablon — capturare input, validare, trimitere, afisare rezultat — este modul in care functioneaza fiecare formular din fiecare aplicatie din lume. Tocmai ai construit unul descriindu-l in limba naturala.Adaugarea animatiilor si a finisajelor
Putina animatie face mult pentru ca aplicatia ta sa para profesionala:
Incearca
Incearca aceste prompturi unul cate unul 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%."
Probleme frecvente si cum sa le rezolvi
Ca incepator, vei intampina probleme. Iata cum sa folosesti Claude pentru a le rezolva:
"Formularul nu face nimic cand apas submit" Spune-i lui 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?"
"Pagina arata stricata pe mobil" Spune-i lui Claude: "The form looks broken on mobile — the input and button are overlapping. Fix the responsive layout."
"Am primit o eroare in terminal" Copiaza mesajul exact de eroare si lipeste-l la Claude: "I'm getting this error: [paste error]. What's wrong and how do I fix it?"
Pro Tip
Cand faci debugging, partajeaza intotdeauna mesajul exact de eroare cu Claude. Nu il parafraza. Textul erorii contine informatii specifice de care Claude are nevoie pentru a diagnostica problema."Pagina e goala / arata un ecran alb" Asta inseamna de obicei ca exista o eroare JavaScript. Deschide Developer Tools in browser (F12), mergi la tabul Console si partajeaza ce vezi cu Claude.
Git Checkpoint
Formularul tau e interactiv, validat si animat. Salveaza progresul:
git add .
git commit -m "interactive signup form with validation and animations"
Nota sincera
Functionalitatile interactive sunt punctul in care lucrurile pot deveni complicate. Trimiterea simulata pe care am construit-o functioneaza perfect in dezvoltare, dar conectarea la un server real (lectia urmatoare) introduce provocari noi: erori de retea, conexiuni lente, conditii de concurenta. AI-ul gestioneaza bine majoritatea acestora, dar intelegerea faptului ca aceste provocari exista te va ajuta sa ii pui lui Claude intrebarile corecte.Concluzia cheie
Functionalitatile interactive sunt momentul in care aplicatiile prind viata. Acum construiesti ceva care raspunde la inputul utilizatorului — valideaza emailuri, afiseaza stari de loading, prezinta rezultate. Si ai facut asta avand o conversatie cu AI-ul.