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

• 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

La formation React | Développement front-end en JavaScript peut être réalisée par des :

• Développeurs,
• Architectes techniques,
• Chefs de projet.

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

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

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

• 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.

• Admission sans disposition particulière