ReactJS, programmation avancée

1 - Débutant

21 heures 0 mins

Bibliothèques et frameworks javascript

Objectifs de la formation

Comprendre les concepts avancés de React
Optimiser les performances des applications et l’expérience utilisateur
Améliorer la qualité du code produit
Intégrer les différentes librairies externes incontournables

Programme de la formation

Introduction

Rappels sur ES6+ et les modules.
Les principes clés de React : VirtualDOM, JSX, One-way Data Flow.
Découvrir l’écosystème des outils ReactJS.

Travaux pratiques

Mise en place d’un environnement de développement optimisé pour React et d’une première application web qui servira de fil rouge pour les chapitres suivants.

Bonnes pratiques de développement

Rappels de productivité : prop-types et DefaultProps, component sheet avec StoryBook.
Typage du code avec flow ou TypeScript.
Prototyper rapidement un composant, solutions.
Mettre en place des tests unitaires et fonctionnels.

Travaux pratiques

Amélioration de la qualité de l’application grâce au typage et aux tests automatisés.

Techniques et design patterns avancés

Le pattern des higher order components (HOC).
Le rendu dans des éléments DOM distants avec les portals.
Injection de dépendances avec les contexts.
« React hooks » programmation fonctionnelle : useEffect, useState.
React : création de « customHooks » pour distribuer une logique personnalisée.

Travaux pratiques

Mise en œuvre des contexts et des portals dans l’application fil rouge. Création de composants fonctionnels et utilisation des hooks.

Redux avancé

Rappels Redux : les différentes entités, la syntaxe de base et l’intégration avec React.
Simplifier et optimiser la création de formulaires avec Redux Form.
Améliorer l’expérience utilisateur grâce à Redux Persist et au stockage local du state.
Créer un middleware Redux Custom.

Travaux pratiques

Conversion d’un formulaire à Redux Form et sauvegarde de la navigation.

Optimisation des performances

API pour l’optimisation React.Suspense React.Lazy, mode concurrent et React.Cache.
Server side rendering avec NextJS.
Comment optimiser le cycle de vie des composants ?
Utiliser l’immutabilité pour accélérer et simplifier les traitements.
Les composants purs.

Travaux pratiques

Mise en œuvre du code splitting avec React.Lazy et Suspense.

Animations/transitions

Animer les composants « à la main » à l’aide d’animations et transitions CSS.
Simplifier le travail avec React Transition Group.
Aller plus loin avec les principales librairies d’animation : comparatif et exemples de mise en œuvre.

Travaux pratiques

Ajout de transition d’apparition/disparition des différents écrans.

L’internationalisation

Internationalisation versus localisation : différences et scénarios d’utilisation.
Les principales librairies d’internationalisation.
Intégration dans React et Redux.

Travaux pratiques

Traduction de l’application fil rouge et gestion du changement de langue.

MOYENS PÉDAGOGIQUES ET TECHNIQUES D’ENCADREMENT DES FORMATIONS

Modalités pédagogiques :

Évaluation des besoins et du profil des participants.
Apport théorique et méthodologique : séquences pédagogiques regroupées en différents modules.
Contenus des programmes adaptés en fonction des besoins identifiés pendant la formation.
Le formateur évalue la progression pédagogique du participant tout au long de la formation au moyen de travaux pratiques, étude de cas et mise en situation.
Méthodes expositive, active et participative.
Réflexion et échanges sur cas pratiques.
Retours d'expériences.
Corrections appropriées et contrôles des connaissances à chaque étape, fonction du rythme de l’apprenant mais également des exigences requises au titre de la formation souscrite.

Éléments matériels :

Mise à disposition des outils nécessaires au bon déroulement des travaux pratiques.
Support de cours au format numérique projeté sur écran et transmis au participant en fin de la formation.

Référent pédagogique et formateur :

Chaque formation est sous la responsabilité du directeur pédagogique de l’organisme de formation.
Le bon déroulement est assuré par le formateur désigné par l’organisme de formation.

MOYENS PERMETTANT LE SUIVI ET L’APPRÉCIATION DES RÉSULTATS

Feuilles de présences signées des participants et du formateur par demi-journée.
Attestation de fin de formation mentionnant les objectifs, la nature et la durée de l’action et les résultats de l’évaluation des acquis de la formation.

Please login to get access to the quiz

Back to Bibliothèques et frameworks javascript

Bibliothèques et frameworks javascript