Les objectifs pédagogiques

• Connaître ReactJS et son fonctionnement
• Ecrire des composants en ES2015
• Développer une application à l’aide d’un environnement de développement

Contenu détaillé de la formation

Présentation de React JS

• 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) :
La mise en oeuvre de l’outillage nécessaire au développement d’une application React

Composants React JS

• 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

Exemple 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 travaux 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 reminter l’état : Lifting State Up
• Le pattern Décorateur de ReactJS : Higher-Order Components

Redux

• Présentation du workflow
• Présentation de flux
• Elements 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

Pour s’inscrire à la formation, contactez caroline.ardon@spn.asso.fr