ReactJS, programmation avancée PARTICIPANTS
Développeurs web, architectes.
Cours Pratique de 3 jours - 21h PRÉREQUIS
Une première expérience concrète
Réf : RJS - Prix 2024 : 2 070€ HT avec React et Redux et/ou avoir
suivi la formation "ReactJS,
Le prix pour les dates de sessions 2025 pourra être révisé maîtriser le framework JavaScript
de Facebook" (Réf. TJS).
COMPÉTENCES DU
FORMATEUR
À l'origine simple outil interne de Facebook, React est devenue l'une des principales Les experts qui animent la
librairies JavaScript open source. Avec cette formation, vous approfondirez votre maîtrise formation sont des spécialistes des
matières abordées. Ils ont été
de React, découvrirez les dernières nouveautés et l'écosystème indispensable pour validés par nos équipes
concevoir des applications web encore plus perfectionnées. pédagogiques tant sur le plan des
connaissances métiers que sur
celui de la pédagogie, et ce pour
chaque cours qu’ils enseignent. Ils
OBJECTIFS PÉDAGOGIQUES ont au minimum cinq à dix années
d’expérience dans leur domaine et
À l’issue de la formation l'apprenant sera en mesure de : occupent ou ont occupé des postes
à responsabilité en entreprise.
Comprendre les concepts avancés de ReactJS
MODALITÉS D’ÉVALUATION
Optimiser les performances des applications ReactJS Le formateur évalue la progression
pédagogique du participant tout au
Améliorer la qualité du code produit long de la formation au moyen de
QCM, mises en situation, travaux
Intégrer les différentes librairies externes incontournables pratiques…
Le participant complète également
Améliorer l'expérience utilisateur avec les fonctionnalités avancées de Redux un test de positionnement en amont
et en aval pour valider les
compétences acquises.
MOYENS PÉDAGOGIQUES
ET TECHNIQUES
LE PROGRAMME • Les moyens pédagogiques et les
méthodes d’enseignement utilisés
dernière mise à jour : 11/2023 sont principalement : aides
audiovisuelles, documentation et
support de cours, exercices
pratiques d’application et corrigés
des exercices pour les stages
1) Introduction pratiques, études de cas ou
présentation de cas réels pour les
- Rappels sur ES6+ et les modules. séminaires de formation.
- Les principes clés de React : VirtualDOM, JSX, One-way Data Flow. • À l’issue de chaque stage ou
séminaire, ORSYS fournit aux
- Découvrir l’écosystème des outils ReactJS. participants un questionnaire
d’évaluation du cours qui est
Travaux pratiques : Mise en place d'un environnement de développement optimisé pour ensuite analysé par nos équipes
React et d'une première application web qui servira de fil rouge pour les chapitres suivants. pédagogiques.
• Une feuille d’émargement par
demi-journée de présence est
2) Bonnes pratiques de développement fournie en fin de formation ainsi
qu’une attestation de fin de
- Rappels de productivité : prop-types et DefaultProps, component sheet avec StoryBook. formation si le stagiaire a bien
assisté à la totalité de la session.
- Typage du code avec flow ou TypeScript.
- Prototyper rapidement un composant, solutions. MODALITÉS ET DÉLAIS
D’ACCÈS
- Mettre en place des tests unitaires et fonctionnels. L’inscription doit être finalisée 24
Travaux pratiques : Amélioration de la qualité de l'application grâce au typage et aux tests heures avant le début de la
formation.
automatisés.
ACCESSIBILITÉ AUX
PERSONNES HANDICAPÉES
3) Techniques et design patterns avancés Vous avez un besoin spécifique
- Le pattern des higher order components (HOC). d’accessibilité ? Contactez Mme
FOSSE, référente handicap, à
- Le rendu dans des éléments DOM distants avec les portals. l’adresse suivante psh-
[email protected] pour étudier au
- Injection de dépendances avec les contexts. mieux votre demande et sa
- "React hooks" programmation fonctionnelle : useEffect, useState. faisabilité.
- 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.
4) 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.
ORSYS - https://www.orsys.be/fr/ - [email protected] - +32 (0)2 801 13 68 Page 1 / 2
- Créer un middleware Redux Custom.
Travaux pratiques : Conversion d'un formulaire à Redux Form et sauvegarde de la Ok
navigation.
5) 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.
6) 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.
7) 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.
LES DATES
CLASSE À DISTANCE LILLE PARIS
2024 : 16 déc. 2024 : 16 déc. 2024 : 16 déc.
2025 : 03 févr., 03 mars, 31 mars, 2025 : 03 mars, 30 juin, 24 sept., 2025 : 27 janv., 24 févr., 24 mars,
05 mai, 02 juin, 30 juin, 04 août, 01 déc. 28 avr., 26 mai, 23 juin, 28 juil., 18
25 août, 24 sept., 22 oct., 01 déc., août, 17 sept., 15 oct., 24 nov., 08
15 déc. déc.
ORSYS - https://www.orsys.be/fr/ - [email protected] - +32 (0)2 801 13 68 Page 2 / 2