React

Des interfaces réactives et composables

React est la bibliothèque de référence pour construire des interfaces. Composants, JSX, état et hooks, puis gestion de données, performance et architecture : de votre premier composant jusqu’aux patterns experts.

Fondations

Débutant - les bases, pas à pas

• Pourquoi React, premier composant et JSXDécouvrez ce qu'est React, écrivez votre tout premier composant et apprenez les règles de base du JSX.
• Les props : passer des données à un composantApprenez à rendre vos composants réutilisables en leur transmettant des données grâce aux props.
• L'état local avec useStateDonnez de la mémoire à vos composants avec useState pour afficher des valeurs qui changent au fil des actions.
• Événements et rendu conditionnelRéagissez aux actions de l'utilisateur et affichez ou masquez des éléments selon des conditions.
• Afficher des listes et le rôle des keysTransformez un tableau de données en liste d'éléments à l'écran avec map, et identifiez chaque élément grâce aux keys.

Progression

Intermédiaire - construire de vrais projets

• Formulaires contrôlésApprenez à piloter chaque champ de formulaire depuis l'état React pour valider et soumettre des données fiables.
• useEffect : effets, dépendances, nettoyageSynchronisez vos composants avec le monde extérieur grâce à useEffect, en maîtrisant les dépendances et le nettoyage.
• Faire remonter l'état et partager des donnéesPlacez chaque état dans l'ancêtre commun le plus proche pour partager une donnée entre plusieurs composants sans la dupliquer.
• Composition : children et découpage en composantsConstruisez des composants conteneurs réutilisables avec la prop children et découpez vos écrans en responsabilités claires.
• Appeler une API : fetch, chargement et erreursChargez des données distantes avec fetch dans un effet, en modélisant proprement les états de chargement et d'erreur.

Perfectionnement

Confirmé - patterns avancés et performance

• useReducer pour l'état complexeStructurez les états complexes avec un reducer pur qui centralise les transitions et élimine les combinaisons impossibles.
• Context : partager sans prop drillingFaites circuler des données sans prop drilling grâce au contexte, en maîtrisant ses re-rendus et ses limites.
• Hooks personnalisés : extraire et réutiliser la logiqueExtrayez la logique à état dans des hooks réutilisables, composables et testables.
• Mémoïsation : memo, useMemo, useCallbackSachez quand React.memo, useMemo et useCallback accélèrent vraiment votre application, et quand ils la compliquent pour rien.
• useRef et manipulation du DOMManipulez le DOM et conservez des valeurs d'instance avec useRef, sans casser la pureté du rendu.

Maîtrise

Expert - architecture, internals et cas limites

• Sous le capot : réconciliation, batching, rendu concurrentDécouvrez comment Fiber réconcilie l'arbre, groupe les mises à jour et rend le travail interruptible.
• Suspense, lazy et code splittingMaîtrisez le mécanisme de suspension, le chargement paresseux des composants et le découpage du bundle.
• Patterns experts : compound components, inversion de contrôleConcevez des API de composants flexibles grâce aux compound components, au state reducer et au bon choix entre render props et hooks.
• React moderne : Server Components, use, useTransition, useOptimisticExplorez les composants serveur, la lecture de promesses avec use et les mises à jour optimistes de React 19.
• Qualité : Testing Library, StrictMode, ProfilerTestez le comportement plutôt que l'implémentation, exploitez les doubles invocations de StrictMode et mesurez les rendus avec Profiler.