M2I FORMATION : 06. React JS - Développement d'applications web
Organisme
75012 PARISVoir toutes ses formationsAutres organismes proposant cette formation
Durée
Modalités
- Classe virtuelle
- Présentiel
L’évaluation des acquis se fait en cours de formation, par des études de cas ou des travaux pratiques et, en fin de formation, par un questionnaire
Prix
Public
Développeurs, architectes, chefs de projets…
Pré-requis
Avoir des connaissances pratique du développement Web, maîtrise et pratique de JavaScript (ES5 minimum).
Objectifs pédagogiques
- Connaître les spécificités de ReactJS
- Savoir développer des applications web performantes avec ReactJS
- Concevoir une SPA avec ReactJS et Flux
- Comprendre le subset JavaScript JSX
- Optimiser les performances des RIA
- Être en mesure de comprendre les impacts du choix d'une architecture incluant ce type d'application
Programme détaillé
JOUR 1 Matin
§ 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 œuvre de l'outillage nécessaire au développement d'une application React
JOUR 1 Après-midi
§ 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
JOUR 2 Matin
§ 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
JOUR 2 Après-midi
§ 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
JOUR 3 Matin
§ 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
JOUR 3 Après-midi
§ 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