Formation React Avancé

Formation React Avancé

Notée : (30)*

Apprenez à maîtriser les fonctionnalités avancées de React, ainsi qu'à développer et structurer vos applications React efficacement !

Prix (Formation inter-entreprise)

2000€ HT / personne

Durée

3 jours

Dates

Nous pouvons organiser des sessions à d'autres dates ou dans d'autres villes (Bordeaux, Lille, Lyon, Marseille, Montpellier, Nantes, Nice, Paris, Strasbourg, Toulouse...)

Cette formation a pour vocation d’apprendre à créer et à gérer des applications complexes avec React.
Elle permet à des personnes ayant eu une première expérience sur React de parfaire leurs connaissances de ce framework, mais aussi d’être en mesure de déboguer efficacement aussi bien des bugs que des problèmes de performances, et enfin d’être en capacité de tester correctement des composants et des fonctionnalités métier de bout en bout.

Cette formation React Avancé s’articule autour de trois axes :
- la compréhension de concepts avancés de React,
- la qualité des développements,
- et l'écosystème React.

Dans la première partie, nous détaillerons les fonctionnalités de React en profondeur et nous discuterons des méthodes permettant de favoriser la réutilisabilité et la maintenance des composants.

Avec l’aspect qualité, nous verrons le fonctionnement de réconciliation de React et le concept de mémoization afin d’aborder les sujets de performance et de mise en place de stratégies de tests.

Enfin dans la partie écosystème, nous discuterons des différents sujets liés aux applications React : la gestion de l’état global d’une application et état de l’art, server side rendering, JAMStack, Gasty, NestJS, les problématiques de styling (CSS Modules, CSS-in-JS).

L’ensemble des mises en pratique consistera à modifier une application déjà existante afin de lui ajouter des fonctionnalités ou de corriger des bugs déjà présents.

Cette formation est dispensée en TypeScript ou JavaScript.

A l’issue de la formation, vous repartez de l’ensemble des supports ayant servis à la formation (slides, code du fil rouge et corrigés).

Les objectifs

  • Comprendre les concepts avancés de React (Réconciliation, Hooks, Références, Contexts)
  • Être capable de tester un composant React avec jest et react-testing-library
  • Choisir une gestion d’état adéquate en fonction des situations

Pré-requis

  • Avoir eu une première expérience avec React (> 1 an et plus sur un projet)
  • Avoir une bonne maîtrise des fonctionnalités ES6 et JavaScript (valeur primitives et valeurs par références, import et export nommés et défaut, closures, mémoization, etc.)
  • Avoir un environnement NodeJS et npm/yarn configuré et utilisable. Linux/Mac est à privilégier, mais pas obligatoire.
  • Ordinateur portable à apporter

Le programme de la formation React Avancé

Journée 1 : Rappels et concepts avancés

Objectif : comprendre les concepts avancés de React et développer des composants en favorisant leur réutilisabilité et leur maintenance.

Révisions et rappels
  • Environnement : npm, yarn, npx, NodeJS, V8, React
  • ES6 : Promesses, async/await, closures, valeurs primitives et par référence, mémoization
  • Rappels sur React : JSX, state, props, hooks
Concepts avancés et patterns
  • Hooks avancés et fonctionnement interne (modèle mental)
  • Introduction aux Contextes React
  • Références (refs)

Mise en pratique :

  • Création et utilisation d’un contexte
  • Utilisation de useRef pour accéder aux fonctionnalités DOM

Journée 2 : Performance et Tests

Performance
  • Fonctionnement du mécanisme de réconciliation, Virtual DOM et implications sur les performances applicatives
  • Mémoization des composants, hooks et composants “purs”
  • Splitter son code : Lazy Loading et Suspense API

Mise en pratique :

  • Optimiser le chargement d’une page via le code splitting
  • Utilisation de Chrome DevTools pour débugger un problème de performance
Tests
  • Stratégie de tests et état de l’art (enzyme, react-testing-library, snapshots, cypress)
  • Jest, React-testing-library et mocking
  • Introduction à Cypress

Mise en pratique :

  • Test d’un composant
  • Test d’un hook React

Journée 3 : Gestion de l’état et écosystème React

Gestion d’état au sein d’une application React :
  • État de l’art sur la gestion d'état (Hooks, Context, State Management Libraries, API Fetching)
  • Introduction à react-query : Queries et Mutations

Mise en pratique :

  • Récupérer des données API avec react-query
  • Modifier des données API avec react-query

Bonus & Options

En fonction des besoins, du temps disponible et du profil des participants, les modules ci-dessous peuvent être abordés :

  • CSS et React : CSS Modules, styled-components...
  • Patterns & Composition
  • Utilisation de MobX/MobX-state-tree
  • Utilisation d'une librairie de gestion de formulaires : react-hook-form, formik
  • Introduction à NextJS (JamStack)
  • Class Components (les class components n'étant pas abordés dans cette formation)
  • Internationalisation avec react-i18next

Télécharger le programme

Le(s) formateur(s)

Gabriel PICHOT

Gabriel PICHOT

Gabriel accompagne des grands groupes et des start-ups dans l’élaboration et la réalisation de leurs projets digitaux avec des technologies qu’il affectionne particulièrement : ReactJS et TypeScript pour ne citer qu’elles.

Au travers de ses formations, il vous partage l’expérience acquise sur le terrain au gré des différents projets auxquels il a pu contribuer. Il se donne pour objectif de transmettre les bonnes pratiques des outils et technologies discutées afin d’améliorer l’impact du travail de développeur : en bref, vous communiquer un véritable artisanat et savoir-faire.

Voir son profil détaillé

Steeve POMMIER

Steeve POMMIER
  • Fasciné par la façon dont le code peut transformer des idées abstraites en applications concrètes
  • Ma passion pour la résolution de problèmes technique m'a naturellement guidé vers le monde du développement
Voir son profil détaillé

Nicolas LAVAL

Nicolas LAVAL

Statisticien de formation, expert en métadonnées, Nicolas s’est rapidement orienté vers l'informatique au sein d’une grande administration.

A travers le web sémantique, la construction et la mise à disposition de données interopérables (RDF), il a fait ses premières armes (Java, SPARQL). Rapidement attiré par le côté ludique du développement d’applications web, il s’est tourné vers le développement front-end (par exemple l'application Bauhaus ou la librairie Lunatic), jusqu’à devenir expert et lead formateur React (formations, tutorats, bootcamps...).

Participant à de nombreux projets statistiques internationaux, Nicolas assure la mise en place des outils et des systèmes d’information associés. La majorité de son activité est open-source, mobilisant notamment les plate-formes Github, Dockerhub, NPM...

Nicolas a rejoint depuis peu la société Making Sense, où il alterne entre des missions d’expertise méthodologique et de développement web.

Voir son profil détaillé

A propos de Human Coders

Human Coders c'est un centre de formation pour développeurs avec :

  • une certification Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
  • de nombreux clients qui nous font confiance depuis des années
  • un manifeste pour garantir des formations à taille humaine, des formateurs passionnés, de véritables workshops...
  • 105 formations au catalogue, 1480 sessions depuis nos débuts en 2012 avec une moyenne de satisfaction de 4,6/5
  • la possibilité de vous proposer un accompagnement personnalisé ou du conseil après la formation

8 témoignages

Excellente formation qui permet de comprendre en profondeur les mécanismes de React, pas uniquement comment utiliser tel ou tel hook. Il y a e...

Excellente formation qui permet de comprendre en profondeur les mécanismes de React, pas uniquement comment utiliser tel ou tel hook. Il y a eu de vraies « révélations » pour ma part, qui débloquent une chaîne entière d’incompréhensions et simplifient ensuite le développement. Le support de formation est très bien fait, les schémas aident vraiment à l’assimilation, c’est d’un grand professionnalisme. Un grand merci à Gabriel qui, en plus d’être très sympathique, est vraiment à l’écoute.

Voir plus

C'est une formation intéressante, de qualité et avec un rythme soutenu

C'est une formation intéressante, de qualité et avec un rythme soutenu

très bonne formation, un bon niveau javascript ES6+ est requis ainsi que les bases de React

très bonne formation, un bon niveau javascript ES6+ est requis ainsi que les bases de React

Une formation éclairante sur l'univers React, qui aborde tous les concepts essentiels pour tout développeur utilisant la librairie afin de con...

Une formation éclairante sur l'univers React, qui aborde tous les concepts essentiels pour tout développeur utilisant la librairie afin de concevoir des interfaces plus performantes et robustes. Des ouvertures sur d'autres aspects liés (react-query, Testing Library, ViteJS) pour moi cruciaux. Bon ratio théorie/pratique. Gabriel est pédagogue, patient et répondait à toutes nos questions. C'était réellement un moment d'échange et l'atmosphère était bienveillante et plaisante.

Voir plus

Grâce à Gabriel et à Human Coders j'ai pu me perfectionner et découvrir de nouvelles façons de travailler avec React et j'ai hâte de pouvoir l...

Grâce à Gabriel et à Human Coders j'ai pu me perfectionner et découvrir de nouvelles façons de travailler avec React et j'ai hâte de pouvoir les appliquer dans les projets sur lesquels je serai impliqué.

Voir plus

très bon format à mon sens, super formateur pédagogue et disponible. Seul bémol à mon étant peut être la quantité de concepts abordés proporti...

très bon format à mon sens, super formateur pédagogue et disponible. Seul bémol à mon étant peut être la quantité de concepts abordés proportionnellement au temps qu'on a pour les approfondir.

Voir plus

Très bonne formation, le formateur a été très pédagogue, j'ai approfondi des notions que je connaissais déjà et découverte d'autres.

Très bonne formation, le formateur a été très pédagogue, j'ai approfondi des notions que je connaissais déjà et découverte d'autres.

Super formation ! J'ai pu approfondir mes connaissances en React et appris de nouveaux concepts que je n'utilisais pas jusqu'ici.

Super formation ! J'ai pu approfondir mes connaissances en React et appris de nouveaux concepts que je n'utilisais pas jusqu'ici.

Besoin d'aide ?

Vous souhaitez discuter avec nous à propos de votre projet de formation ?
Vous voulez plus d'information sur une formation ou notre fonctionnement ?


Rappel Email

Nos forces

  • Des formations à taille humaine
  • Des formateurs passionnés
  • Des véritables workshop
Accéder au Manifeste

Nos clients

Formation React Avancé

Notée : (30)*

Apprenez à maîtriser les fonctionnalités avancées de React, ainsi qu'à développer et structurer vos applications React efficacement !

Formation React Avancé

Cette formation a pour vocation d’apprendre à créer et à gérer des applications complexes avec React.
Elle permet à des personnes ayant eu une première expérience sur React de parfaire leurs connaissances de ce framework, mais aussi d’être en mesure de déboguer efficacement aussi bien des bugs que des problèmes de performances, et enfin d’être en capacité de tester correctement des composants et des fonctionnalités métier de bout en bout.

Cette formation React Avancé s’articule autour de trois axes :
- la compréhension de concepts avancés de React,
- la qualité des développements,
- et l'écosystème React.

Dans la première partie, nous détaillerons les fonctionnalités de React en profondeur et nous discuterons des méthodes permettant de favoriser la réutilisabilité et la maintenance des composants.

Avec l’aspect qualité, nous verrons le fonctionnement de réconciliation de React et le concept de mémoization afin d’aborder les sujets de performance et de mise en place de stratégies de tests.

Enfin dans la partie écosystème, nous discuterons des différents sujets liés aux applications React : la gestion de l’état global d’une application et état de l’art, server side rendering, JAMStack, Gasty, NestJS, les problématiques de styling (CSS Modules, CSS-in-JS).

L’ensemble des mises en pratique consistera à modifier une application déjà existante afin de lui ajouter des fonctionnalités ou de corriger des bugs déjà présents.

Cette formation est dispensée en TypeScript ou JavaScript.

A l’issue de la formation, vous repartez de l’ensemble des supports ayant servis à la formation (slides, code du fil rouge et corrigés).

Les objectifs

  • Comprendre les concepts avancés de React (Réconciliation, Hooks, Références, Contexts)
  • Être capable de tester un composant React avec jest et react-testing-library
  • Choisir une gestion d’état adéquate en fonction des situations

Pré-requis

  • Avoir eu une première expérience avec React (> 1 an et plus sur un projet)
  • Avoir une bonne maîtrise des fonctionnalités ES6 et JavaScript (valeur primitives et valeurs par références, import et export nommés et défaut, closures, mémoization, etc.)
  • Avoir un environnement NodeJS et npm/yarn configuré et utilisable. Linux/Mac est à privilégier, mais pas obligatoire.
  • Ordinateur portable à apporter

Le programme de la formation React Avancé

Journée 1 : Rappels et concepts avancés

Objectif : comprendre les concepts avancés de React et développer des composants en favorisant leur réutilisabilité et leur maintenance.

Révisions et rappels
  • Environnement : npm, yarn, npx, NodeJS, V8, React
  • ES6 : Promesses, async/await, closures, valeurs primitives et par référence, mémoization
  • Rappels sur React : JSX, state, props, hooks
Concepts avancés et patterns
  • Hooks avancés et fonctionnement interne (modèle mental)
  • Introduction aux Contextes React
  • Références (refs)

Mise en pratique :

  • Création et utilisation d’un contexte
  • Utilisation de useRef pour accéder aux fonctionnalités DOM

Journée 2 : Performance et Tests

Performance
  • Fonctionnement du mécanisme de réconciliation, Virtual DOM et implications sur les performances applicatives
  • Mémoization des composants, hooks et composants “purs”
  • Splitter son code : Lazy Loading et Suspense API

Mise en pratique :

  • Optimiser le chargement d’une page via le code splitting
  • Utilisation de Chrome DevTools pour débugger un problème de performance
Tests
  • Stratégie de tests et état de l’art (enzyme, react-testing-library, snapshots, cypress)
  • Jest, React-testing-library et mocking
  • Introduction à Cypress

Mise en pratique :

  • Test d’un composant
  • Test d’un hook React

Journée 3 : Gestion de l’état et écosystème React

Gestion d’état au sein d’une application React :
  • État de l’art sur la gestion d'état (Hooks, Context, State Management Libraries, API Fetching)
  • Introduction à react-query : Queries et Mutations

Mise en pratique :

  • Récupérer des données API avec react-query
  • Modifier des données API avec react-query

Bonus & Options

En fonction des besoins, du temps disponible et du profil des participants, les modules ci-dessous peuvent être abordés :

  • CSS et React : CSS Modules, styled-components...
  • Patterns & Composition
  • Utilisation de MobX/MobX-state-tree
  • Utilisation d'une librairie de gestion de formulaires : react-hook-form, formik
  • Introduction à NextJS (JamStack)
  • Class Components (les class components n'étant pas abordés dans cette formation)
  • Internationalisation avec react-i18next

Télécharger le programme

Le(s) formateur(s)

Gabriel PICHOT

Gabriel PICHOT

Gabriel accompagne des grands groupes et des start-ups dans l’élaboration et la réalisation de leurs projets digitaux avec des technologies qu’il affectionne particulièrement : ReactJS et TypeScript pour ne citer qu’elles.

Au travers de ses formations, il vous partage l’expérience acquise sur le terrain au gré des différents projets auxquels il a pu contribuer. Il se donne pour objectif de transmettre les bonnes pratiques des outils et technologies discutées afin d’améliorer l’impact du travail de développeur : en bref, vous communiquer un véritable artisanat et savoir-faire.

Voir son profil détaillé

Steeve POMMIER

Steeve POMMIER
  • Fasciné par la façon dont le code peut transformer des idées abstraites en applications concrètes
  • Ma passion pour la résolution de problèmes technique m'a naturellement guidé vers le monde du développement
Voir son profil détaillé

Nicolas LAVAL

Nicolas LAVAL

Statisticien de formation, expert en métadonnées, Nicolas s’est rapidement orienté vers l'informatique au sein d’une grande administration.

A travers le web sémantique, la construction et la mise à disposition de données interopérables (RDF), il a fait ses premières armes (Java, SPARQL). Rapidement attiré par le côté ludique du développement d’applications web, il s’est tourné vers le développement front-end (par exemple l'application Bauhaus ou la librairie Lunatic), jusqu’à devenir expert et lead formateur React (formations, tutorats, bootcamps...).

Participant à de nombreux projets statistiques internationaux, Nicolas assure la mise en place des outils et des systèmes d’information associés. La majorité de son activité est open-source, mobilisant notamment les plate-formes Github, Dockerhub, NPM...

Nicolas a rejoint depuis peu la société Making Sense, où il alterne entre des missions d’expertise méthodologique et de développement web.

Voir son profil détaillé

A propos de Human Coders

Human Coders c'est un centre de formation pour développeurs avec :

  • une certification Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
  • de nombreux clients qui nous font confiance depuis des années
  • un manifeste pour garantir des formations à taille humaine, des formateurs passionnés, de véritables workshops...
  • 105 formations au catalogue, 1480 sessions depuis nos débuts en 2012 avec une moyenne de satisfaction de 4,6/5
  • la possibilité de vous proposer un accompagnement personnalisé ou du conseil après la formation

8 témoignages

Excellente formation qui permet de comprendre en profondeur les mécanismes de React, pas uniquement comment utiliser tel ou tel hook. Il y a e...

Excellente formation qui permet de comprendre en profondeur les mécanismes de React, pas uniquement comment utiliser tel ou tel hook. Il y a eu de vraies « révélations » pour ma part, qui débloquent une chaîne entière d’incompréhensions et simplifient ensuite le développement. Le support de formation est très bien fait, les schémas aident vraiment à l’assimilation, c’est d’un grand professionnalisme. Un grand merci à Gabriel qui, en plus d’être très sympathique, est vraiment à l’écoute.

Voir plus

C'est une formation intéressante, de qualité et avec un rythme soutenu

C'est une formation intéressante, de qualité et avec un rythme soutenu

très bonne formation, un bon niveau javascript ES6+ est requis ainsi que les bases de React

très bonne formation, un bon niveau javascript ES6+ est requis ainsi que les bases de React

Une formation éclairante sur l'univers React, qui aborde tous les concepts essentiels pour tout développeur utilisant la librairie afin de con...

Une formation éclairante sur l'univers React, qui aborde tous les concepts essentiels pour tout développeur utilisant la librairie afin de concevoir des interfaces plus performantes et robustes. Des ouvertures sur d'autres aspects liés (react-query, Testing Library, ViteJS) pour moi cruciaux. Bon ratio théorie/pratique. Gabriel est pédagogue, patient et répondait à toutes nos questions. C'était réellement un moment d'échange et l'atmosphère était bienveillante et plaisante.

Voir plus

Grâce à Gabriel et à Human Coders j'ai pu me perfectionner et découvrir de nouvelles façons de travailler avec React et j'ai hâte de pouvoir l...

Grâce à Gabriel et à Human Coders j'ai pu me perfectionner et découvrir de nouvelles façons de travailler avec React et j'ai hâte de pouvoir les appliquer dans les projets sur lesquels je serai impliqué.

Voir plus

très bon format à mon sens, super formateur pédagogue et disponible. Seul bémol à mon étant peut être la quantité de concepts abordés proporti...

très bon format à mon sens, super formateur pédagogue et disponible. Seul bémol à mon étant peut être la quantité de concepts abordés proportionnellement au temps qu'on a pour les approfondir.

Voir plus

Très bonne formation, le formateur a été très pédagogue, j'ai approfondi des notions que je connaissais déjà et découverte d'autres.

Très bonne formation, le formateur a été très pédagogue, j'ai approfondi des notions que je connaissais déjà et découverte d'autres.

Super formation ! J'ai pu approfondir mes connaissances en React et appris de nouveaux concepts que je n'utilisais pas jusqu'ici.

Super formation ! J'ai pu approfondir mes connaissances en React et appris de nouveaux concepts que je n'utilisais pas jusqu'ici.

* Nombre de personnes ayant répondu au questionnaire de satisfaction sur cette formation depuis 2012