Module 1 — Comprendre l’écosystème React.js
- Positionnement de React.js dans l’écosystème front-end moderne.
- Différences entre bibliothèque, framework et application monopage.
- Compréhension du DOM, du Virtual DOM et du principe de rendu déclaratif.
- Lecture de l’architecture générale d’une application React.
- Identification des principaux cas d’usage en contexte métier.
- Prise en main de l’environnement de développement et des outils associés..
Module 2 — Créer ses premiers composants React
- Syntaxe JSX et règles d’écriture des composants.
- Différences entre composants fonctionnels et logique de composition.
- Gestion des propriétés (props) pour transmettre des données.
- Structuration de l’interface en composants réutilisables.
- Intégration de contenus dynamiques dans le rendu.
- Mise en application encadrée sur la création d’une interface simple en composants.
Module 3 — Gérer les interactions et l’état de l’application
- Compréhension de la notion de state et de ses usages.
- Utilisation des hooks essentiels, notamment useState et useEffect.
- Gestion des événements utilisateur dans une interface React.
- Mise à jour de l’affichage en fonction des actions et des données.
- Distinction entre données locales, données partagées et données dérivées.
- Prévention des erreurs fréquentes liées aux rendus et aux dépendances.
Module 4 — Structurer l’affichage et les flux de données
- Rendu conditionnel selon les contextes d’usage.
- Affichage de listes et gestion des clés de rendu.
- Communication entre composants parents et enfants.
- Partage de logique et factorisation du code.
- Introduction à la levée d’état et à la circulation des données.
- Mise en application encadrée sur la structuration d’un écran métier interactif.
Module 5 — Gérer les formulaires et la saisie utilisateur
- Construction de formulaires contrôlés et non contrôlés.
- Gestion des champs, des sélections et des validations.
- Traitement des erreurs de saisie et amélioration de l’expérience utilisateur.
- Organisation du code pour des formulaires lisibles et évolutifs.
- Introduction aux bibliothèques courantes de gestion de formulaires.
- Bonnes pratiques d’accessibilité et de clarté dans les interfaces de saisie..
Module 6 — Mettre en place la navigation et les échanges de données
- Principes de navigation dans une application React.
- Mise en œuvre d’un routage avec gestion des vues.
- Chargement et affichage de données issues d’API.
- Gestion des états de chargement, de succès et d’erreur.
- Sécurisation des échanges côté interface et gestion des comportements attendus.
- Mise en application encadrée sur une interface connectée à une source de données externe..
Module 7 — Organiser un projet React dans une logique professionnelle
- Structuration des dossiers, composants, pages, hooks et services.
- Mise en place de conventions de nommage et de bonnes pratiques d’équipe.
- Séparation des responsabilités entre logique métier, affichage et accès aux données.
- Introduction à la gestion d’état global selon les besoins du projet.
- Réutilisation, modularité et maintenabilité du code.
- Critères de qualité pour faciliter les évolutions et la collaboration.
Module 8 — Optimiser, tester et fiabiliser une application React
- Repérage des causes courantes de baisse de performance.
- Optimisation des rendus et des composants lorsque nécessaire.
- Débogage avec les outils de développement React et navigateur.
- Introduction aux tests unitaires et aux tests de composants.
- Vérification des comportements critiques d’une interface.
- Bonnes pratiques de robustesse avant diffusion ou déploiement.
Module 9 — Préparer la mise en production et faire évoluer une application React
- Construction d’une version prête pour la production.
- Compréhension des enjeux de bundling, d’optimisation et d’environnement.
- Gestion des variables de configuration et des différents contextes de déploiement.
- Maintenance corrective et évolutive d’une application existante.
- Documentation minimale utile pour faciliter la reprise et les évolutions.
- Méthodes pour faire progresser un projet React vers des architectures plus avancées..
