React : concevoir des interfaces web en composants
Maîtriser les fondamentaux de React : JSX, composants, état, hooks, formulaires, routage et premiers tests.
- Durée
- 21 h · 3 jours
- Niveau
- Intermédiaire
- Format
- Présentiel · Distanciel · Mixte
- Effectif max.
- 12 participants
Présentation
Ce programme apprend à construire une application React moderne. On part des composants et du JSX, on gère l’état local avec les hooks, on construit listes et formulaires, puis on organise la navigation avec un routeur. La dernière demi-journée aborde l’état partagé et une première approche des tests de composants, pour que les participants repartent avec une base de projet saine.
À qui s’adresse ce programme
- Développeurs web front-end
- Développeurs full stack voulant structurer leurs interfaces
- Équipes qui migrent vers une approche par composants
Prérequis
- Très bonne connaissance de JavaScript (ES6+)
- Bases du développement web (HTML, CSS)
Objectifs pédagogiques
- Créer un projet React avec Vite
- Écrire des composants et du JSX
- Passer des données avec les props et gérer l’état local
- Utiliser useState, useEffect et créer ses propres hooks
- Construire listes, formulaires et rendu conditionnel
- Mettre en place la navigation avec React Router
- Découvrir l’état centralisé et les tests de composants
Programme détaillé
6 modules · 21 h · 3 jours
Outils et premiers composants
- Rappels ES6+ utiles à React
- Créer un projet avec Vite
- Principe du rendu déclaratif et du DOM virtuel
- JSX : expressions, attributs et fragments
- Composants fonctionnels et organisation des fichiers
Props, état et événements
- Passer des données avec les props, dont children
- État local avec useState
- Gérer les événements
- Rendu conditionnel
- Communication parent-enfant
Construire un catalogue de produits avec filtres.
Hooks, listes et formulaires
- useEffect et cycle de vie
- Règles des hooks et hooks personnalisés
- Afficher des listes et gérer les clés
- Formulaires contrôlés et validation
- Charger des données depuis une API
Créer un formulaire d’ajout et une liste alimentée par une API.
Immutabilité et partage d’état
- Immutabilité et mise à jour d’objets et de tableaux
- Remonter l’état dans un parent
- Context API : cas d’usage et limites
- Préparer l’arrivée d’un gestionnaire d’état
- Structurer les dossiers d’un projet
Navigation avec React Router
- Routes, liens et paramètres d’URL
- Routes imbriquées et mise en page
- Redirections et pages d’erreur
- Charger des données par route
- Protéger des routes
Ajouter la navigation à l’application du projet fil rouge.
État centralisé et tests
- Store, actions et reducers : principes
- Utiliser un store avec des hooks
- Tester un composant avec Testing Library
- Lancer les tests avec Vitest
- Aperçu du rendu côté serveur et de React Native
Outils et technologies
Méthodes pédagogiques
- Alternance d’exposés courts et de travaux pratiques
- Démonstrations en direct par le formateur
- Projet fil rouge construit au fil des modules
- Corrections collectives et échanges sur les bonnes pratiques
Évaluation
- Exercices pratiques corrigés à chaque module
- Mini-projet réalisé en fin de formation
- Quiz de validation des acquis
Matériel requis
- Un ordinateur avec une connexion internet
- Un éditeur de code et Node.js installés
Ressources fournies
- Support de cours et dépôt d’exercices corrigés
Débouchés
- Une application monopage fonctionnelle
- Les réflexes de conception en composants
- Autonomie pour poursuivre avec les sujets avancés
Les cours vidéo associés
Mes cours en vidéo qui accompagnent ce programme : pour préparer la formation ou réviser ensuite. Accès gratuit avec un compte.
