React | Développement front-end en JavaScript Mixte : présentiel / à distance

Cette formation vous permettra d'apprendre à industrialiser, structurer et optimiser vos développements d'applications Web JavaScript en utilisant la bibliothèque React créée par Facebook. Vous découvrirez également Redux, une bibliothèque de gestion d'états.

• Créer une application React
• Mettre en œuvre les concepts de la programmation fonctionnelle et déclarative
• Développer des interfaces utilisateurs à base de composants
• Gérer la navigation au sein de l'application
• Mettre en place une architecture de gestion d'état de l'application avec Redux
• Tester le code et les composants

JavaScript et EcmaScript 6+

• Rappels élémentaires sur le langage 
• Maîtriser les closures 
• Les bonnes pratiques en JavaScript 
• Nouvelle gestion des classes 
• Les arrow functions
• Les template strings 
• L'héritage de classe 
• Spread & Rest 
• Comprendre la déstructuration d'objets et de tableaux 
• Modulariser les applications web 

Travaux pratiques : Installation de l'environnement de développement, manipulation du langage JavaScript

 

React et les Composants

• La philosophie des composants 
• Découverte du langage « JSX » et de la transpilation 
• Créer une hiérarchie de composants 
• Transfert d'informations avec les props 
• Architecturer notre projet, Smart & Dump components
• Contrôler le réaffichage d'un composant
• Gestion dynamique et statique du state
• Comprendre le « VirtualDOM »
• Optimiser les performances de son application 
• Cycle de vie d'un composant
• Créer un composant « fonctionnel »
• Rendez votre code pérenne avec les « propTypes »
• Mise en place de la projection avec les composants 

Travaux pratiques : Réalisation d'une application permettant de manipuler les composants et leur cycle de vie ainsi que la mise en page

 

Les formulaires

• Dynamiser la validation des formulaires
• Composants contrôlés
• Composants non contrôlés
• Marquer les éléments du DOM avec les références 
• Bien penser ses formulaires

 

Le routing

• Mise en place de routes complexes 
• Configuration du système de routing 
• Manipuler la navigation des pages 
• Ajouter des paramètres dans nos routes 
• Cycle de vie des routes 

Travaux pratiques : Réalisation d'une application permettant de mettre en place plusieurs pages et de naviguer entre elles.

 

Redux

• Flux et Redux : présentation 
• Propagation de données 
• Comparaison des architectures 
• Création de vues et contrôleurs dans Flux 
• Rôle du dispacther dans Flux pour les actions 
• Les « Stores », gestionnaire d'états logique dans Flux 
• Approche avec Redux 
• Le « Reducer »

Travaux pratiques : Réalisation d'une application permettant de mettre en place la gestion d'état de l'application basée sur Redux

 

Tests unitaires

• Introduction à Jest, le JUnit de Javascript 
• Tester un composant 
• Tester le DOM avec « dom-testing-library » 
• Le principe F.I.R.S.T.

Travaux pratiques : En s'appuyant sur une application réalisée précédemment, ajout des outils Esllint, Jest et Enzime

 

Server Side Rendering

• Les avantages du server side rendering (SSR) 
• Intégration dans Redux 
• Principe et bénéfices du développement isomorphique 
• Ecosystème du JavaScript côté serveur 
• Initiation à NodeJS 
• Configuration de NodeJs pour React
• Mise en place du SSR

 

Internationalization (i18n)

• Stratégie de mise en place avec les fichiers JSON
• Les principales librairies d'internationalisation 
• Intégration dans React et Redux

 

Librairies populaires de React

• ReactNative 
• NextJS 
• Material UI / React Bootstrap

• Développeurs, architectes techniques, chefs de projet.

Docaposte Institute propose plusieurs dispositifs pédagogiques adaptés aux apprenants :

 

• Formation en présentiel
• En groupe (inter-entreprises ou intra-entreprise)
• En individuel (monitorat)
• En journée ou en cours du soir (sur demande spécifique)
• Formation en distanciel
• Distanciel synchrone
• Distanciel asynchrone

• Maîtriser les langages HTML et CSS
• Maîtriser le langage JavaScript

• ·       Apports des connaissances communes.
• ·       Mises en situation sur le thème de la formation et des cas concrets.
• ·       Méthodologie d'apprentissage attractive, interactive et participative.
• ·       Equilibre théorie / pratique : 60 % / 40 %.
• ·       Supports de cours fournis au format papier et/ou numérique.
• ·       Ressources documentaires en ligne et références mises à disposition par le formateur.
• ·       Pour les formations en présentiel dans les locaux mis à disposition, les apprenants sont accueillis dans une salle de cours équipée d'un réseau Wi-Fi, d'un tableau blanc ou paperboard. Un ordinateur avec les logiciels appropriés est mis à disposition (le cas échéant).

En amont de la formation

·       Recueil des besoins des apprenants afin de disposer des informations essentielles au bon déroulé de la formation (profil, niveau, attentes particulières...).

·       Auto-positionnement des apprenants afin de mesurer le niveau de départ.

Tout au long de la formation

·       Évaluation continue des acquis avec des questions orales, des exercices, des QCM, des cas pratiques ou mises en situation...

A la fin de la formation

·       Auto-positionnement des apprenants afin de mesurer l'acquisition des compétences.

·       Evaluation par le formateur des compétences acquises par les apprenants.

·       Questionnaire de satisfaction à chaud afin de recueillir la satisfaction des apprenants à l'issue de la formation.

·       Questionnaire de satisfaction à froid afin d'évaluer les apports ancrés de la formation et leurs mises en application au quotidien.

Nos formations peuvent être adaptées à certaines conditions de handicap. Nous contacter pour toute information et demande spécifique.