Formation React.js

Programme détaillé

9 modules, construits autour de vos cas réels.

Durée recommandée ≈ 21 à 35 heures, modulable selon le rythme du groupe et vos contraintes intra-entreprise.

1. 01Comprendre l'écosystème React.js

   Chapitres

   • Situer React.js parmi les bibliothèques et frameworks front-end actuels.
   • Distinguer bibliothèque, framework et application monopage.
   • Comprendre le DOM, le Virtual DOM et le principe de rendu déclaratif.
   • Lire l'architecture générale d'une application React.
   • Identifier les principaux cas d'usage en contexte métier.
   • Prendre en main l'environnement de développement, Node, npm et les outils associés.
2. 02Créer ses premiers composants React

   Chapitres

   • Maîtriser la syntaxe JSX et les règles d'écriture des composants.
   • Écrire des composants fonctionnels et appliquer la logique de composition.
   • Transmettre des données entre composants avec les props.
   • Structurer l'interface en composants réutilisables.
   • Intégrer des contenus dynamiques dans le rendu et construire une interface simple en composants.
3. 03Gérer les interactions et l'état de l'application

   Chapitres

   • Comprendre la notion de state et ses usages.
   • Utiliser les hooks essentiels useState et useEffect.
   • Gérer les événements utilisateur dans une interface React.
   • Mettre à jour l'affichage selon les actions et les données.
   • Distinguer données locales, données partagées et données dérivées.
   • Prévenir les erreurs fréquentes liées aux rendus et aux tableaux de dépendances.
4. 04Structurer l'affichage et les flux de données

   Chapitres

   • Mettre en place le rendu conditionnel selon les contextes d'usage.
   • Afficher des listes et gérer les clés de rendu.
   • Organiser la communication entre composants parents et enfants.
   • Factoriser le code et partager la logique entre composants.
   • Appliquer la levée d'état et structurer un écran métier interactif.
5. 05Gérer les formulaires et la saisie utilisateur

   Chapitres

   • Construire des formulaires contrôlés et non contrôlés.
   • Gérer les champs, les sélections et les validations.
   • Traiter les erreurs de saisie et soigner le retour utilisateur.
   • Organiser le code pour des formulaires lisibles et évolutifs.
   • Identifier les bibliothèques courantes de gestion de formulaires.
   • Appliquer les bonnes pratiques d'accessibilité dans les interfaces de saisie.
6. 06Mettre en place la navigation et les échanges de données

   Chapitres

   • Comprendre les principes de navigation dans une application React.
   • Mettre en œuvre un routage avec gestion des vues.
   • Charger et afficher des données issues d'API.
   • Gérer les états de chargement, de succès et d'erreur.
   • Sécuriser les échanges côté interface et construire une interface connectée à une source de données externe.
7. 07Organiser un projet React dans une logique professionnelle

   Chapitres

   • Structurer les dossiers composants, pages, hooks et services.
   • Mettre en place des conventions de nommage partagées en équipe.
   • Séparer la logique métier, l'affichage et l'accès aux données.
   • Aborder la gestion d'état global selon les besoins du projet.
   • Soigner la réutilisation, la modularité et la maintenabilité du code.
   • Définir des critères de qualité qui facilitent les évolutions et la collaboration.
8. 08Optimiser, tester et fiabiliser une application React

   Chapitres

   • Repérer les causes courantes de baisse de performance.
   • Optimiser les rendus et la mémorisation des composants quand c'est utile.
   • Déboguer avec les outils React DevTools et ceux du navigateur.
   • Écrire des tests unitaires et des tests de composants.
   • Vérifier les comportements critiques d'une interface avant diffusion.
9. 09Préparer la mise en production et faire évoluer une application React

   Chapitres

   • Construire une version prête pour la production.
   • Comprendre les enjeux de bundling, d'optimisation et d'environnement.
   • Gérer les variables de configuration et les contextes de déploiement.
   • Assurer la maintenance corrective et évolutive d'une application existante.
   • Rédiger la documentation minimale utile à la reprise du projet.
   • Faire progresser un projet React vers des architectures plus avancées.