Cours React 19 : créer des interfaces web modernes
React est un cours de niveau avancé de 6 leçons (environ 3 h 22), avec 18 exercices et 18 questions de quiz. Prérequis : JavaScript asynchrone (promesses, fetch, API). Les exercices s'exécutent dans le navigateur, sans installation.
- Front-end
- Avancé
- 6 leçons
- 3 h 22
- 18 exercices
- Exercices exécutés dans le navigateur
Le cours en bref
Ce cours vous apprend à concevoir des interfaces web avec React 19, la bibliothèque de référence du front-end. Vous écrirez des composants réutilisables, gérerez l'état et les événements, chargerez des données avec les effets, partagerez l'état avec Context et useReducer, puis utiliserez les Actions de formulaire de React 19. La logique pure est testée automatiquement et les composants sont accompagnés de tests de style React Testing Library.
Ce que tu sauras faire
- Concevoir une interface en composants réutilisables avec JSX, props et children
- Gérer l'état local et les événements en respectant l'immutabilité
- Afficher des listes et partager l'état entre composants en évitant les états redondants
- Synchroniser un composant avec l'extérieur avec useEffect, nettoyage et annulation des requêtes
- Structurer un état global avec useReducer, Context et des hooks personnalisés
- Soumettre des formulaires avec les Actions de React 19 (useActionState, useFormStatus, useOptimistic)
Programme des 6 leçons
- Écrire des composants fonctionnels qui renvoient du JSX
- Passer des données aux composants avec les props et children
- Appliquer les règles du JSX (expressions, attributs, fragments)
- 02
L'état avec useState et les événements
- Ajouter un état local à un composant avec useState
- Réagir aux événements utilisateur
- Mettre à jour objets et tableaux de façon immuable et gérer un champ contrôlé
- 03
Listes, rendu conditionnel et état partagé
- Afficher des listes avec map et des clés stables
- Choisir la bonne forme de rendu conditionnel
- Remonter l'état vers un parent commun et calculer les données dérivées pendant le rendu
- 04
Effets, synchronisation et chargement de données
- Utiliser useEffect pour se synchroniser avec un système externe
- Écrire une fonction de nettoyage et gérer les dépendances
- Charger des données avec gestion du chargement, des erreurs et des réponses obsolètes
- 05
useReducer, Context et hooks personnalisés
- Centraliser une logique d'état complexe avec useReducer
- Partager des données sans prop drilling grâce au Context
- Extraire une logique réutilisable dans un hook personnalisé
- 06
Formulaires et Actions avec React 19
- Soumettre un formulaire avec une Action (prop action d'un <form>)
- Gérer résultat, erreurs et état d'attente avec useActionState et useFormStatus
- Afficher une mise à jour optimiste avec useOptimistic
Actions de formulaireuseActionState et useFormStatususeOptimistic
Projet final
Mini-boutique React avec panier et commande
Réalisez une petite boutique en React 19 avec Vite : catalogue chargé depuis une API (simulée ou réelle) avec recherche et filtres, fiche produit, panier global géré par Context et useReducer et persisté dans le localStorage, et formulaire de commande utilisant une Action avec useActionState. L'interface gère les états de chargement et d'erreur et reste utilisable au clavier.
Livrables
- Le code source du projet Vite (composants, hooks, reducer, contexte)
- Un reducer de panier pur accompagné de tests unitaires
- Un hook useProduits gérant chargement, erreur et annulation
- Un formulaire de commande avec useActionState, useFormStatus et messages accessibles
- Au moins cinq tests de composants avec React Testing Library
- Un README expliquant l'architecture et les choix d'état
Critères d'évaluation
- Composants petits, purs et réutilisables
- Aucune mutation d'état et aucune donnée dérivée stockée inutilement
- Effets limités à la synchronisation externe, avec nettoyage
- Utilisation correcte des API de React 19 pour les formulaires
- États de chargement, d'erreur et de succès visibles et accessibles
- Tests pertinents qui passent
Questions fréquentes
Quel niveau faut-il pour suivre ce cours React ?
Il faut être à l'aise avec JavaScript moderne : fonctions fléchées, déstructuration, map et filter, modules et asynchrone (promesses, fetch). Le cours JavaScript asynchrone est le prérequis direct.
Le cours couvre-t-il React 19 ?
Oui, dans sa version 19.3. En plus des hooks fondamentaux, il présente les nouveautés de React 19 : Actions de formulaire, useActionState, useFormStatus, useOptimistic, use, le contexte utilisé directement comme fournisseur et useEffectEvent pour les effets.
Faut-il apprendre TypeScript avant React ?
Non, le cours est écrit en JavaScript (JSX). TypeScript est recommandé pour les projets professionnels et s'apprend en parallèle dans le cours TypeScript du même parcours.
Avec quel outil créer un projet React aujourd'hui ?
Create React App est abandonné. Pour apprendre, Vite est le plus simple ; pour une application complète avec routage et rendu serveur, on utilise un framework comme Next.js ou React Router.
Ce cours, raconté pour ton métier
Dis ce que tu veux savoir faire : « React » prend sa place dans ton parcours, avec des exemples de ton secteur. Les notions restent celles du cours.