Chapitre 9 : Context API
1. Le problème du "Prop Drilling"
Parfois, vous devez passer des données à un composant très profond dans l'arborescence. Passer les props manuellement à travers chaque niveau s'appelle le "Prop Drilling" et rend le code difficile à maintenir.
2. Solution : Context
Le Context API permet de partager des valeurs (comme le thème ou l'utilisateur connecté) à tous les composants qui en ont besoin, sans passer par les props.
3. Utilisation (useContext)
const UserContext = React.createContext();
// Dans un parent
<UserContext.Provider value={user}>
<App />
</UserContext.Provider>
// Dans un enfant
const user = useContext(UserContext);
4. Section Quiz
Testez vos connaissances sur le Context API.
Exercice
Créez un simple Context pour un thème ("clair" ou "sombre") et consommez-le dans un composant enfant.
Quiz du chapitre 9
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — Comprendre les bases : Le Context API
Atelier #1Expliquez avec vos mots le concept principal de ce chapitre, puis illustrez-le par un exemple simple.
Consulter la solution type du formateur
#2 — Application guidée
Atelier #2Réalisez un exercice pratique en reprenant la structure vue dans le cours et en modifiant au moins 2 paramètres.
Consulter la solution type du formateur
#3 — Mini défi
Atelier #3Concevez une petite solution personnelle liée à 'Le Context API' et justifiez vos choix techniques.