Description
Le framework de développement « frontend » promu par Facebook fait partie de l’outillage incontournable dans la production d’interfaces et d’applications web aujourd’hui. A l’instar d’Angular, React vous permettra de créer rapidement des éléments d’une interface web, et de faire interagir ces éléments entre eux par l’intermédiaire d’un gestionnaire d’états Redux.
Vous profiterez des modules compagnons pour communiquer avec un backend et optimiserez vos applications grâce aux principes d’immutabilité des composants et à la programmation fonctionnelle (hooks et custom hooks) promus par React.
Vous pourrez en outre approcher la programmation native d’applications grâce à React Native et profiter des sous-systèmes mobiles.
A l’issue de la formation, vous serez capable de développer des interfaces utilisateurs avec la bibliothèque ReactJS.
Objectifs
- Comprendre les concepts clés de ReactJS et ses spécificités
- Créer des composants fonctionnels
- Maîtriser la syntaxe JSX
- Utiliser Flux et gérer les bugs
- Tester son développement
Récapitulatif
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)
Méthodes et modalités pédagogiques
Formation réalisée en Présentiel, Distanciel ou Dual-Learning selon la formule retenue.
Moyens et supports pédagogiques
Mise à disposition d'un poste de travail sur nos formations en Présentiel.
Mise à disposition de nos environnements de visio sur nos formations en Distanciel
Remise d'une documentation pédagogique numérique pendant la formation
La formation est constituée d'apports théoriques, d'exercices pratiques et de réflexions
Dans le cas d'une formation sur site Entreprise, le client s'engage à avoir toutes les ressources pédagogiques nécessaires (salle, équipements, accès internet, TV ou Paperboard...) au bon déroulement de l'action de formation conformément aux prérequis indiqués dans le programme de formation
Modalités de suivi et d'évaluations
Auto-positionnement des stagiaires avant la formation
Émargement des stagiaires et formateur par 1/2 journée
Exercices de mise en pratique ou quiz de connaissances tout au long de la formation permettant de mesurer la progression des stagiaires
Auto-évaluation des acquis de la formation par les stagiaires
Questionnaire de satisfaction à chaud et à froid à l'issue de la formation
Programme détaillé
Comprendre les concepts clés de ReactJS et ses spécificités
- Les Single Page Applications
- Les limites de Javascript et de jQuery
- Lenteurs du DOM
- Positionnement de React JS
- Création une SPA « from scratch en JS »
- Exemples de travaux pratiques : le formateur réalise une maquette simple d'une page web. Il réalise un diagramme de classe UML pour représenter la modélisation et le découpage de la page sous forme de composants web. A partir du diagramme de classe, il implémente une partie du code pour montrer le fonctionnement d'une SPA en “from scratch” (en partant de zéro, sans Framework) et mettre en application les syntaxes ES6. Les participants reproduisent et exécutent le code sur leur poste de travail.
Maîtriser la syntaxe JSX
- Ecrire un premier composant
- Les props, et les states
- La fonction render et le langage JSX
- Les bonnes pratiques ou pièges à éviter (boucles, rendu conditionnel, subsets JSX, )
- Découpage d'une application ou d'une page en composants
- L'intérêt de Typescript pour l'écriture d'applications REACT
- Exemples de travaux pratiques : les participants initialisent et créent un projet REACT avec l'outil de développement VITE. Ils créent un composant qui reçoit des données avec des props. L'objectif est de rendre un composant interactif (le composant change en fonctions d'événements qui altèrent son état)
Créer des composants fonctionnels (1/2)
- Composition de multiples composants
- Cycle de vie d'un Composant
- Mise en place d'une navigation (mécanismes de routing)
- Chargement différé et optimisation du build (code splitting) avec le lazy loading
- Utilisation des Hooks (useEffect, useMemo…)
- Gestion des formulaires (état et validation des données)
- Consommer une API REST avec Axios ou l'API native fetch de JS
- Créer un formulaire et traiter ses données et traiter ses données de A à Z (validation, envoi…)
- Exemples de travaux pratiques : les participants suivent un énoncé qui permet de manipuler chaque cas de façon indépendante. L'objectif étant de construire un formulaire permettant aux personnes de renseigner des informations (par exemple saisir un nouveau produit, se connecter)
Utiliser Flux et gérer les bugs
- Limites de l'approche MVC
- Présentation de l'API Context de REACT
- Création et utilisation d'un contexte REACT, avec son système de
- Présentation de Flux et Redux
- Création un store (à la mode Redux avec Store, Action, Reducers)
- Initialiser, consommer et modifier le store depuis les composants
- Restaurer un état depuis le store
- Exemples de travaux pratiques : les participants suivent un énoncé qui permet de manipuler chaque cas de façon indépendante. Le scénario proposer permet de comparer les 2 approches : Redux Stores ou React Context Providers. Par exemple avec la gestion d'un panier de produits (ajout au panier, supprimer du panier, calcul du total…)
Tester son développement
- Compiler et déployer une application ReactJS
- Mesurer la performance côté client
- Aperçu des outils de Build
- Mesurer la performance avec React DevTools
- Exemples de travaux pratiques : le formateur réalise différentes manipulations pour les configurations et l'exécution des builds. Les participants reproduisent les commandes et les manipulations.
Identifier les impacts des architectures RIA
- Principe et bénéfices du développement isomorphique (fullstack JS)
- Brainstorming : le formateur interroge les participants concernant les avantages ou inconvénients des RIA comme React ou des architectures fullstack. Chacun peut faire part de son retour d'expérience, ou commenter.