Objectifs pédagogiques / Compétences visées
- Décrire ReactJS et son fonctionnement
- Ecrire des composants en ES2015
- Développer une application à l'aide d'un environnement de développement.
Niveau requis
Avoir une très bonne connaissance de JavaScript et de ses aspects avancés.
Public concerné
Développeurs ayant à réaliser des applications Web.
Programme
Présentation de ReactJS
- Positionnement de ReactJS
- Virtual DOM avec ReactJS
- Mise en place des outils de développement
- Tour d'horizon des outils de développement et d'intégration actuelle
- Création d'une application React avec le script "create-react-app"
Exemple de travaux pratiques (à titre indicatif)
- Mise en oeuvre de l'outillage nécessaire au développement d'une application React
Composants ReactJS
- Création d'un composant ReactJS
- Amélioration des fonctionnalités du composant développé
- Etats d'un composant et cycle de vie
- Gestion de l'état d'un composant
- Propriétés d'un composant
- Présentation de JSX et ES2015, que choisir ?
- Présentation approfondie du Virtual DOM
Exemples de travaux pratiques (à titre indicatif)
- Création pas à pas d'une application à base de composants React
- Mise en oeuvre des propriétés et état d'un composant
Communication inter-composants avec ReactJS
- Communication inter-composants
- Gestion des évènements
- Autobinding
- Composants de formulaire
- Manipulation du DOM
- Présentation de la propagation des données
- Flux des données
- Présentation des vues et contrôleurs dans ReactJS
- Création d'une application Single Page Application (SPA) avec ReactJS
Exemple de travaux pratiques (à titre indicatif)
- Création de plusieurs composants d'interface graphique, permettant de montrer l'interaction entre composants et l'UI
Echanges avec le serveur
- Présentation de l'architecture REST
- Echanges entre l'application React et un serveur via REST
Exemple de tarvaux pratiques (à titre indicatif)
- Appel de services REST et exploitation des données en JSON dans l'application React
Les Hooks
- Présentation des Hooks
- Utiliser la state dans une fonction
- Les fonctions useState et useEffect
Exemple de travaux pratiques (à titre indicatif)
- Utiliser les Hooks dans l'application ReactJS
Améliorer une application ReactJS
- Gestion des erreurs avec les "Error Boundaries"
- Préserver la structure de l'arbre DOM avec les fragments
- Utiliser le contexte pour s'affranchir de la structure de l'arbre DOM
- Développer une application React avec TypeScript
Quelques patterns ReactJS
- Faire remonter l'état : Lifting State Up
- Le pattern Décorateur de ReactJS : Higher-Order Components
Redux
- Présentation du workflow
- Présentation de flux
- Eléments composants Redux
- Intégration de Redux dans React
- Les Hooks de Redux
Exemple de travaux pratiques (à titre indicatif)
- Mise en oeuvre de Redux
Plus loin avec React
- Les tests unitaires dans ReactJS
- ReactJS côté serveur : les applications isomorphiques
- Développer une application native pour Android et iOS
Certification (en option)
- Prévoir l'achat de la certification en supplément
- L'examen (en français) sera passé le dernier jour, à l'issue de la formation et s'effectuera en ligne
- Il s'agit d'un QCM dont la durée moyenne est d'1h30 et dont le score obtenu attestera d'un niveau de compétence
- La certification n'est plus éligible au CPF depuis le 31/12/2021, mais permettra néanmoins de valider vos acquis
Modalités d’évaluation des acquis
- En cours de formation, par des études de cas ou des travaux pratiques
- Et, en fin de formation, par un questionnaire d'auto-évaluation ou une certification (M2i ou éditeur)