Conclusion - Séance 3

Félicitations ! Vous avez maîtrisé l'interactivité en React et la gestion des formulaires.

Ce que vous maîtrisez maintenant

Information

Vous avez acquis les compétences pour créer des applications interactives avec React. Chaque concept vous permettra de gérer l'état, capturer les événements utilisateur et valider des formulaires.

Interactivité

Événements React : onClick, onChange, onSubmit, event.target, event.preventDefault()
Hook useState : Ajouter de la mémoire aux composants, gérer l'état local
State vs Props : Comprendre la différence et quand utiliser l'un ou l'autre
Flux de données unidirectionnel : Props descendent, événements remontent

Formulaires

Composants contrôlés : Input, textarea, select, checkbox, radio - tous contrôlés par React avec le pattern value + onChange
Validation manuelle : Vérifier les champs requis, formats, longueurs avec regex
Validation avec Zod : Type-safe validation, schémas, inférence de types, messages d'erreur clairs

Architecture

Lifting State Up : Partager l'état entre composants via le parent commun
State placement : Placer l'état au niveau le plus bas possible, mais aussi haut que nécessaire

Pourquoi ces concepts sont essentiels

Vous êtes maintenant équipé(e) pour

1. Créer des interfaces utilisateur interactives

Capturer et gérer les événements utilisateur
Créer des composants qui réagissent aux actions
Construire des formulaires complets et fonctionnels

2. Gérer l'état efficacement

Savoir quand et où placer le state
Comprendre la différence entre state et props
Partager l'état entre composants

3. Valider les données utilisateur

Validation manuelle avec des regex
Validation type-safe avec Zod
Afficher des messages d'erreur clairs
Améliorer l'expérience utilisateur

Patterns fondamentaux de l'interactivité

Le pattern du composant contrôlé

jsx

function ControlledInput() {
  // 1. Créer le state
  const [value, setValue] = useState('');

  // 2. Lier input au state
  return (
    <input
      value={value}
      onChange={e => setValue(e.target.value)}
    />
  );
}

Pattern essentiel

Ce pattern est utilisé dans tous les formulaires React :

La valeur vit dans le state
onChange met à jour le state
React contrôle l'input

Le pattern lifting state up

jsx

// État dans le parent
function Parent() {
  const [data, setData] = useState('');

  return (
    <>
      <ChildA value={data} onChange={setData} />
      <ChildB value={data} />
    </>
  );
}

// Enfants reçoivent via props
function ChildA({ value, onChange }) {
  return <input value={value} onChange={e => onChange(e.target.value)} />;
}

function ChildB({ value }) {
  return <p>{value}</p>;
}

Règle d'or

Placez l'état au niveau le plus bas possible, mais aussi haut que nécessaire.

Si deux composants doivent partager des données, remontez l'état dans leur parent commun.

Le pattern validation avec Zod

tsx

// 1. Définir le schéma
const schema = z.object({
  email: z.string().email(),
  age: z.number().min(18)
});

// 2. Valider les données
function handleSubmit(data) {
  const result = schema.safeParse(data);

  if (result.success) {
    // Données valides
    console.log(result.data);
  } else {
    // Erreurs de validation
    console.log(result.error.errors);
  }
}

Zod est le standard

Zod est utilisé par les plus grandes entreprises tech :

Vercel (créateurs de Next.js)
Clerk (authentification)
Prisma (ORM)
tRPC (API type-safe)

C'est le standard de l'industrie pour la validation TypeScript !

Comment utiliser l'IA maintenant que vous connaissez les formulaires

✅ Exemples de bons prompts (avec vos connaissances)

✅ Bon prompt

"Crée un formulaire contrôlé avec un input email et validation Zod. Affiche les erreurs sous chaque champ."

➜ Précis, mentionne les techniques (contrôlé, Zod), indique l'UX souhaitée

✅ Bon prompt

"Implémente lifting state up pour partager searchTerm entre SearchBar et ProductList"

➜ Utilise le vocabulaire technique précis, indique le pattern

✅ Bon prompt

"Ajoute useState pour gérer l'ouverture/fermeture d'un menu dropdown avec onClick"

➜ Mentionne le hook, l'événement et le cas d'usage

❌ Exemples de prompts moins efficaces (sans connaissances)

❌ Prompt vague

"Fais un formulaire qui fonctionne"

➜ Pas de détails sur les champs, la validation, le type de formulaire

❌ Prompt imprécis

"Fais que les deux composants partagent la même variable"

➜ Ne mentionne pas lifting state up, confusion entre state et props

❌ Prompt sans contexte technique

"Vérifie que l'email est bon"

➜ Ne précise pas la méthode (Zod? regex? HTML5?), pas de détails sur l'affichage des erreurs

Validation des compétences

Avant de passer à la Séance 4 (useEffect & Routing), assurez-vous de maîtriser ces concepts clés :

🎯

Je sais utiliser useState pour gérer l'état

C'est le hook le plus important de React

🎯

Je comprends la différence entre state et props

Fondamental pour structurer vos composants

🎯

Je sais créer des formulaires contrôlés

Tous les formulaires React utilisent ce pattern

🎯

Je maîtrise la validation avec Zod

Le standard de l'industrie pour la validation

🎯

Je sais partager l'état entre composants (lifting state up)

Pattern essentiel pour les applications React

🎯

Je comprends les événements React

onClick, onChange, onSubmit et event.preventDefault()

Besoin de réviser ?

Si vous n'êtes pas à l'aise avec l'un de ces concepts :

Relisez le chapitre correspondant
Refaites les exercices (compteur, todo list, formulaire)
Testez le code dans votre projet React
Posez des questions (en cours ou sur Moodle)

Ne passez pas aux effets et au routing sans maîtriser useState et les formulaires - vous seriez perdu(e) !

Prochaines étapes

Séance 4 : Effets et Routing

Maintenant que vous maîtrisez l'interactivité et les formulaires, vous êtes prêt(e) pour :

useEffect : gérer les effets de bord (API, timers, subscriptions)
Data Fetching : récupérer des données depuis une API
React Router : créer une application multi-pages
Routes dynamiques : pages avec paramètres d'URL
Combiner : effets + routing pour des applications complètes

Tous les concepts de cette séance seront utilisés quotidiennement dans vos projets React !

Conseils pour la suite

Mindset pour réussir

1. Pratiquez avec des projets réels

Créez une todo list complète avec validation
Construisez un formulaire de contact multi-étapes
Implémentez un système de filtres de recherche
Faites un calculateur interactif

2. Maîtrisez les patterns

Composant contrôlé : pattern de base des formulaires
Lifting state up : partage de données entre composants
Validation avec Zod : standard professionnel
Flux unidirectionnel : philosophie React

3. Utilisez l'IA intelligemment

Précisez le pattern à utiliser (contrôlé, lifting, etc.)
Mentionnez Zod si vous voulez de la validation type-safe
Indiquez le type d'événement (onClick, onChange, onSubmit)
Demandez des explications sur le state management

4. Consultez la documentation

Ressources pour aller plus loin

React Docs - Managing State

Guide officiel sur la gestion d'état en React

Documentation

Zod Documentation

Documentation complète de Zod

Documentation

React Hook Form

Bibliothèque pour gérer des formulaires complexes

Tutoriel

Bravo !

Vous avez maîtrisé l'interactivité et les formulaires en React

Vous êtes maintenant capable de créer des interfaces utilisateur interactives et de gérer des formulaires complexes !

→ Faire le quiz de validation