Séance 3
Interactivité & Formulaires
Gestion d'état avec useState, événements et formulaires contrôlés
Ce que vous allez apprendre
- •Gérer les événements utilisateur (clics, saisies, soumissions)
- •Utiliser le hook useState pour la gestion d'état
- •Comprendre la différence entre state et props
- •Créer des formulaires contrôlés en React
- •Valider les données saisies dans les formulaires (manuel et Zod)
- •Remonter l'état entre composants (lifting state up)
- •Construire des interfaces utilisateur interactives
Parcours de la séance
Introduction à l'interactivité
Rendre vos composants réactifs aux actions utilisateur
Gestion des événements
onClick, onChange, onSubmit et autres événements React
Le hook useState
Ajouter de la mémoire à vos composants
Formulaires contrôlés
Gérer les inputs, checkboxes, selects et textarea
Validation de formulaires
Vérifier et valider les données saisies
Validation avec Zod
Type-safe validation avec le standard de l'industrie
Lifting State Up
Partager l'état entre plusieurs composants
Conclusion
Récapitulatif et prochaines étapes
Exercices pratiques
Compteur, Todo List, Formulaire de contact et plus
Projet Fil Rouge
Application d'apprentissage du japonais (Séances 2 à 5)
Quiz de validation
Testez vos connaissances sur l'interactivité