Formation React Avancé

ReactReact QueryTypeScriptPerformanceDeveloper Experience (DX)Testing

Cette formation a pour vocation d'apporter une vision complète et concrète de l'utilisation de React afin de créer rapidement des applications complexes sans sacrifier la maintenance de celles-ci.

+21Participants*
+4Sessions*
+9hde pratique

* Statistiques calculées à partir des données des formations que nous avons réalisées en 2022.

1700 € HT
/ personne
3 jours21 heures

  • Possible en présentiel et distanciel
  • Formation réalisable en TypeScript
  • Formation mise à jour pour React v18 (2022)

Présentation

Elle s'articule autour de plusieurs axes correspondant à 90% des thématiques et problématiques rencontrées sur les projets que ce soit en terme de développement ou de qualité. Dans un premier temps, les apprenants consolideront leurs connaissances sur ES6 et JavaScript ainsi que sur les fondamentaux de React via l'utilisation des hooks React et des références. Des concepts plus avancés comme l'API Context seront également travaillés.

Un module sur l'algorithme de réconciliation et le fonctionnement de React lors de la phase de rendering permettra aux apprenants d'acquérir de solides connaissances quand à l'investigation des problèmes de performance et à leur résolution. Il sera suivi d'un chapitre sur la réalisation de tests automatisés via l'utilisation de la librairie React Testing Library.

Un dernier volet, non moins important sera consacré à la gestion d'état au sein d'une application React, et surtout à l'utilisation de React Query pour faciliter la récupération de données depuis une API JSON.

Options et Bonus

En fonction du temps, du profil des apprenants et des projets à termes peuvent être abordés les sujets suivants :

  • internationalisation d'une application avec react-i18next
  • test end-to-end avec Cypress
  • TypeScript avec React
  • legacy React et les Class Components
  • Initiation au SSR, CSR, ISR et SGR avec NextJS
  • Utilisation poussée des formulaires avec React Hook Form
Person aiming at a goal by Ameer Basheer - Unsplash

Objectifs

  • Développer des composants afin de maximiser leur réutilisation ;
  • Connaître et savoir utiliser les concepts avancés de React : Context API, Références :
  • Architecturer et construire une application complexe avec React ;
  • Comprendre, analyser et résoudre un problème de performance.

Fil rouge

Tout au long de la formation, un ensemble cohérent de travaux pratiques aménera les apprenants à concevoir une application React en suivant les bonnes pratiques et en favorisant réutilisation et maintenabilité des composants.

Tools picture by Todd Quackenbush - Unsplash

Prérequis

  • Au moins 1 an d'expérience sur un projet avec React
  • Une bonne connaissance de la syntaxe ES6+ et des concepts JavaScript
  • Un ordinateur avec un environnement configuré pour le développement avec React

Pour qui ?

Pour les équipes et développeurs souhaitant :

  • appronfondir leurs connaissances de React ;
  • maîtriser les concepts avancés de React ;
  • réaliser une application complexe et qualitative.

Programme

Rappels ESX et JavaScript

1 heure

Closures, valeurs primitives vs valeurs par références, comparaison superficielle et profonde, imports et exports, asynchronisme, mémoization et syntaxe ES6+ sont quelqu'uns des concepts qui sont nécessaires à une compréhension de React dans le détail.

Fondamentaux et Rappels React

2 heures
  • Composants, props, état, cycle de vie
  • Arbre de composants JSX
  • Fondamentaux sur les hooks

Hooks React

1 demi-journée
  • Hooks avancés : effets, références, reducer
  • Règles des Hooks et modèle mental

Rendering et Performance

1 demi-journée
  • Comprendre l'algorithme de réconciliation et le Virtual DOM
  • Débogguer un problème de performance et le résoudre

Tests fonctionnels

1 demi-journée
  • Stratégie de tests sur une application React
  • Tester avec Jest et React Testing Library

Gestion de l'état

1 demi-journée
  • Etat de l'art sur la gestion d'état avec React (Redux, React Query)
  • Utilisation de React Query pour récupérer des données API (Queries et Mutations)

Ecosytème

1 demi-journée

En fonction du temps restant et du profil des apprenants sont abordés :

  • Utilisation de TypeScript avec React
  • Etat de l'art de la gestion des feuilles de style (CSS) avec React

Nos formateurs

Gabriel Pichot

Founder @CraftValue

ReactJSDevOpsTypeScriptFirebaseAWS

Gabriel accompagne start-ups et grands groupes sur leurs projets webs et digitaux. Il partage au sein de ses projets son expérience acquise sur des technologies comme ReactJS, TypeScript, AWS ou encore l'agilité.

Ses formations sont le lieu d'échanges et de retours d'expériences, clefs pour vous transmettre, à vous ou à vos équipes les savoirs nécessaires à une utilisation efficace des outils que vous utilisez. C'est son principal objectif : transmettre un savoir-faire pratique, un véritable artisanat issu d'expérience sur de multiples projets, un ensemble de bonnes pratiques qui booste l'impact que le développeur a sur son travail et sur les projets auxquels il contribue.

Autres formations

React Query1 jour

React Query

Exploitez des données serveur rapidement

En savoir plus