Migrer vers React

Front End Dev

Détails

Durée 4 Jours
Prochaines dates

15-16 & 22-23 novembre 2022

Public cible Dev Frontend, Dev Fullstack
Niveau Intermédiaire
Prix présentiel 3450 € HT/pers

DESCRIPTION

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.

OBJECTIFS PÉDAGOGIQUES

#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

MÉTHODES D'ENSEIGNEMENTS

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. 

DURÉE

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

PRÉREQUIS

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

PROGRAMME

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)
Préinscription à la formation
Migrer vers React

    Formations sur mesure

    Besoin d’une formation adaptée à la taille de vos équipes ? Un mélange de plusieurs formations ? N’hésitez pas à nous contacter, nous trouverons une solution à vos besoins.

    NOS AUTRES FORMATIONS

    formation Design Ops

    Le DesignOps est à la fois un état d’esprit, un framework et un rôle. Applicable dès la construction d’une équipe Design, il se révèle indispensable pour accompagner la croissance des équipes de designers au sein des entreprises. En travaillant sur les processus, la collaboration, les outils et la culture, le DesignOps permet d’avoir une approche globale des problématiques individuelles, organisationnelles et opérationnelles. Ce nouveau rôle est devenu un must-have pour toutes les entreprises qui opèrent leur transformation centrée utilisateur.

    Design Workshop

    Les ateliers offrent la possibilité de travailler en profondeur des sujets complexes en équipe à travers des exercices créatifs qui s’appuient notamment sur Design Thinking. Oscillant entre divergence et convergence, l’objectif d’un atelier est de concevoir collectivement une solution à un problème défini dans un temps limité.

    figma

    Figma s’est imposé comme l’outil de référence du Product Design. Ses fonctionnalités de collaboration, de design et de prototypage renforcent la productivité des équipes et la qualité des produits.
    Cette formation s’adresse aux Designers, Product Managers, Team Leader, Consultants qui souhaitent s’initier à Figma à travers une méthode de conception d’interfaces modulaires et industrialisables.