Jusqu'ici, ta landing page est une belle page statique — elle est superbe mais ne fait rien. Dans cette lecon, on la rend interactive. Quand quelqu'un tape son email et clique sur "Envoyer", des choses vont se passer.
Qu'est-ce que le "state" ?
Concept
Le state (etat) est la memoire a court terme de l'application. Quand un utilisateur tape dans un champ de formulaire, l'application doit se souvenir de ce qu'il a tape. Quand il clique sur envoyer, l'application doit se souvenir si l'envoi a reussi ou echoue. Ces valeurs temporaires et changeantes sont le "state".En React (la bibliotheque derriere Next.js), le state est gere avec un outil appele useState. Tu n'as pas besoin d'ecrire ce code — Claude le fera — mais comprendre le concept t'aide a mieux diriger Claude.
Par exemple, ton formulaire d'inscription aura un state pour :
- Le texte de l'email que l'utilisateur est en train de taper
- Si le formulaire est en cours d'envoi (chargement)
- Si l'envoi a reussi ou echoue
- Les messages d'erreur a afficher
Construire le formulaire d'inscription
Transformons le formulaire provisoire de la Lecon 5 en un vrai formulaire interactif :
Essaie
Dans Claude Code, tape :"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 creera ou mettra a jour le composant formulaire avec toute cette logique. Verifie ton navigateur — essaie d'envoyer avec un email valide et invalide pour voir les deux cas fonctionner.
Gerer l'envoi du formulaire
Pour l'instant, le formulaire affiche un message de succes apres un faux delai. Il n'envoie pas encore vraiment l'email quelque part — nous le connecterons a un vrai backend dans la Lecon 7.
Voici ce qui se passe sous le capot :
- L'utilisateur tape son email (le state se met a jour a chaque frappe)
- L'utilisateur clique sur Envoyer (le state passe a "chargement")
- Le formulaire valide le format de l'email
- Si valide : simule une requete reseau, puis affiche l'etat de succes
- Si invalide : affiche l'etat d'erreur
Concept
Ce pattern — capturer la saisie, valider, envoyer, afficher le resultat — c'est ainsi que chaque formulaire dans chaque application au monde fonctionne. Tu viens d'en construire un en le decrivant en francais.Ajouter des animations et du polish
Un peu d'animation fait une grande difference pour donner un aspect professionnel a ton application :
Essaie
Essaie ces prompts un par un dans 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%."
Problemes courants et comment les resoudre
En tant que debutant, tu vas rencontrer des problemes. Voici comment utiliser Claude pour les corriger :
"Le formulaire ne fait rien quand je clique sur envoyer" Dis a 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?"
"La page est cassee sur mobile" Dis a Claude : "The form looks broken on mobile — the input and button are overlapping. Fix the responsive layout."
"J'ai une erreur dans le terminal" Copie le message d'erreur exact et colle-le a Claude : "I'm getting this error: [colle l'erreur]. What's wrong and how do I fix it?"
Astuce pro
Pour le debogage, partage toujours le message d'erreur exact avec Claude. Ne le paraphrase pas. Le texte de l'erreur contient des informations specifiques dont Claude a besoin pour diagnostiquer le probleme."La page est vide / affiche un ecran blanc" Cela signifie generalement qu'il y a une erreur JavaScript. Ouvre les Outils de developpement de ton navigateur (F12), va dans l'onglet Console, et partage ce que tu vois avec Claude.
Checkpoint Git
Ton formulaire est interactif, valide et anime. Sauvegarde ta progression :
git add .
git commit -m "interactive signup form with validation and animations"
Note honnete
Les fonctionnalites interactives sont la ou les choses peuvent devenir delicates. L'envoi simule que nous avons construit fonctionne parfaitement en developpement, mais le connecter a un vrai serveur (prochaine lecon) introduit de nouveaux defis : erreurs reseau, connexions lentes, conditions de concurrence. L'IA gere la plupart de ca bien, mais comprendre que ces defis existent t'aidera a poser les bonnes questions a Claude.Point cle
Les fonctionnalites interactives sont la ou les applications prennent vie. Tu construis maintenant quelque chose qui repond aux saisies des utilisateurs — validation d'emails, affichage d'etats de chargement, affichage de resultats. Et tu l'as fait en ayant une conversation avec l'IA.