Migrer vers React

Front End Dev

Détails

Durée 4 Jours
Prochaines dates

date sur demande

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

    Le Design Ops, également connu sous le nom d’opérations de conception, est une pratique qui consiste à appliquer les principes des opérations et de la gestion de projet à la conception d’expériences utilisateur (UX) et d’interfaces utilisateur (UI). Le Design Ops vise à améliorer l’efficacité et l’efficience de la conception en organisant les processus, les outils et les ressources pour mieux répondre aux besoins des utilisateurs et des équipes de conception.

    Les équipes de Design Ops sont responsables de la gestion des projets de conception, de la coordination des activités de conception, de l’optimisation des flux de travail, de l’intégration des technologies de conception et de la création d’un environnement propice à la collaboration et à l’innovation.

    Le Design Ops est de plus en plus utilisé dans les entreprises de toutes tailles pour améliorer la collaboration, l’efficacité et la qualité de la conception des produits numériques. 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.