Conclusion - Seance 5

Felicitations ! Vous avez termine le cours complet de developpement React.

Ce que vous maitrisez maintenant

Workflow avec l'IA

• Prompts specifiques : Donner des instructions precises avec contexte et contraintes
• Validation du code : Verifier le code genere (function components, hooks, immutabilite)
• Approche iterative : Ameliorer le code etape par etape plutot que tout demander d'un coup

Custom Hooks

• Extraction de logique : useFetch, useLocalStorage, useDebounce, useForm, useToggle
• Regles : Nom prefixe par "use", appeles au top level, retournent des objets/tableaux
• Composition : Les hooks peuvent utiliser d'autres hooks

Hooks supplementaires

• useRef : References DOM et valeurs qui ne declenchent pas de re-render
• useMemo : Memoriser le resultat d'un calcul couteux
• useCallback : Memoriser une fonction pour eviter les re-renders inutiles

Debogage

• React DevTools : Inspecter composants, props, state en temps reel
• Erreurs courantes : Cannot read property of undefined, Too many re-renders, keys manquantes
• Strategies : console.log, debugger, isoler le probleme, lire les stack traces

Deploiement

• Build de production : npm run build, npm run preview pour tester localement
• Vercel : Import du repository GitHub, deploiement automatique a chaque push
• Configuration : vercel.json pour les rewrites SPA, variables d'environnement

Travail avec l'IA

• Vocabulaire technique : Donner des instructions precises (custom hooks, SRP, immutabilite, useRef vs useState)
• Lecture de code React : Valider et corriger le code genere (patterns de hooks, structure de projet, gestion d'erreur)

Patterns fondamentaux

Le pattern custom hook

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
}

Le pattern composition de composants

function Dashboard() {
  return (
    <div>
      <DashboardHeader />
      <StatsCards />
      <UsersList />
    </div>
  );
}

Le pattern immutabilite

// ✅ Ajouter
setItems([...items, newItem]);

// ✅ Modifier
setItems(items.map(item =>
  item.id === id ? { ...item, done: true } : item
));

// ✅ Supprimer
setItems(items.filter(item => item.id !== id));

Comment utiliser l'IA maintenant que vous connaissez ces concepts

✅ Exemples de bons prompts (avec vos connaissances)

❌ Exemples de prompts moins efficaces

Validation des competences

Avant de commencer le projet final, assurez-vous de maitriser ces concepts cles :

Prochaines etapes

Projet Fil Rouge — Rendu final

Votre application Kana est maintenant complète ! Déposez sur Moodle :

• Lien vers votre repository GitHub
• URL de déploiement Vercel
• Description courte de ce que vous avez implémenté

Continuer a apprendre

Conseils pour la suite

Ressources pour aller plus loin