Migrer vers React

Cette formation couvrira les techniques et les bonnes pratiques pour créer des applications Web modernes en utilisant le framework React et son écosystème (composants, styles, tests).

Que ce soit pour le développement d’un nouvel applicatif ou la migration d’une base de code javascript ou typescript existante.

#1. Comprendre les usages de React (avantages et inconvénients)

#2. Découvrir les cas d’utilisation de l’API React et des conseils de pro

#3. Adopter les bonnes pratiques pour créer des composants bien architecturés

#4. Élaborer une intégration fluide de React à une base de code existante

#5. Isoler les nouveaux composants de la dette technique existante

#6. Utiliser des techniques JS modernes instinctivement

#7. Permettre aux équipes de créer, maintenir et faire évoluer une base de code frontend solide

Cette formation sera principalement constituée de théorie et d’ateliers techniques qui permettront d’être rapidement opérationnel. 

• Support : un support de cours en français sera remis aux participants au format électronique via PDF 
• Évaluation : Les acquis sont évalués tout au long de la formation par le formateur (Questions régulières, travaux pratiques, QCM ou autres méthodes). 
• Formateur : le tout animé par un consultant-formateur expérimenté, nourri d’une expérience terrain 
• Satisfaction : à l’issue de la formation, chaque participant répond à un questionnaire d’évaluation qui est ensuite analysé en vue de maintenir et d’améliorer la qualité de nos formations. 
• Suivi : une feuille d’émargement par demi-journée de présence est signée par chacun des participants. 
• Format : Cette formation peut être dispensée en format inter-entreprises ou intra-entreprise sur demande et en mode présentiel comme en distanciel. 

4 jours (soit 4 x 7 heures) répartis sur 2 semaines, répartis en 2 x 2 jours

• Ordinateur, webcam, microphone, connexion Internet
• N’importe quel éditeur de code / IDE (code VS recommandé)
• node + npm et git installés

JOUR 1 : REACT FUNDAMENTALS

• Framework SPA
• Flux de données unidirectionnel
• Gestion des états
• Style fonctionnel vs classes
• Hooks (useState, useEffect, useReducer, useRef, useDebugValue, hook personnalisé…)
• Architecture des composants (JSX, composition, composants d’ordre supérieur)
• Contexte, Suspens & Portal
• + 1h Session de code live: composant d’animation

JOUR 2: STRATÉGIES DE MIGRATION / ADOPTION

• Réécriture / Big Bang
• Une fonctionnalité à la fois
• Pièges de la migration progressive (isoler les styles et mount multiple)
• Introduction aux Web components
• Encapsuler avec Shadow Dom
• Slots, variables CSS et techniques avancées
• L’alternative préact
• + 2h de laboratoire: Construction de composants isolés

JOUR 3: CLASSIQUES DU FRONTEND

• Styliser des composants
• Formulaires avancés
• Gestion des événements
• Conseils JS modernes (imports, async, spread, immuabilité, formatage …)
• + 3h de lab: Créer un composant simple vs composant intelligent

JOUR 4: EXPÉRIENCE DÉVELOPPEUR

• Gestion des dépendances (npm, yarn)
• Découverte de l’écosystème (ressources, évaluation de l’impact sur votre bundle)
• Outillage (Eslint, Webpack, Babel)
• Présentation de Typescript
• Tests
• + 1h30 Session de code live: créer, tester et publier un composant
• + 2h Sujet personnalisé libre (les participants peuvent sélectionner n’importe quelle problématique, à la fin du jour 2)