Cette formation React Avancé vous permettra de maîtriser les concepts avancés de React pour développer des applications performantes, testables et évolutives.
Vous apprendrez à optimiser vos composants, déboguer efficacement, et implémenter des stratégies de tests robustes grâce à Jest et React Testing Library et vous explorerez les mécanismes internes de React, notamment la réconciliation et la mémoization, afin d’améliorer la réactivité et la fluidité de vos interfaces.
Cette formation s’adresse aux développeur·euse·s ayant une première expérience avec React et souhaitant élever leurs compétences pour concevoir des applications professionnelles et scalables.
Pour son premier coup d'essai, Wilfried a été un super formateur ! On a pu mettre de côté les bases déjà acquises par moi et l'autre élève afin de prendre plus de temps pour se concentrer sur les notions réellement avancées. À partir de là, Wilfried a su mettre des travaux pratiques pour chaque notion, nous laissant le temps d'assimiler les nouvelles connaissances. Il a su prendre le temps avec chacun de nous lorsque nous étions bloqués et n'hésitait pas à répondre à nos questions.
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é
Jour 1 : Rappels et concepts avancés
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
Jour 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
Suspense API
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 : - Optimiser le chargement d’une page via le code splitting
- Utilisation de Chrome DevTools pour débugger un problème de performance
- Test d’un composant
- Test d’un hook React
Jour 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)
Florent est passionné du Web et des technologies qui gravitent autour. Il aime le W3C, le TC39 (quand il ne smoosh pas devant lui), le WhatWG, les frameworks JS (React, Vue.js, Node.js, Angular, ...) et la vanille.
Transmettre sa passion pour l'artisanat web occupe une part importante de son travail de développeur (meetups, formations, conférences, encadrement de stagiaires).
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.
Wilfried est un développeur passionné spécialisé dans l'écosystème React depuis plus de 8 ans. Co-organisateur des meetups React à Paris, Wilfried se distingue par son approche collaborative et son désir de transmettre ses connaissances aux développeurs juniors.
En tant que formateur, Wilfried a déjà encadré de nombreux développeurs débutants, leur offrant une base solide pour maîtriser React et intégrer rapidement de bonnes pratiques de développement. Il est également très attentif aux besoins des utilisateurs, ce qui lui permet d'apporter une dimension humaine à son approche technique.
Si vous cherchez à apprendre React avec un formateur expérimenté et passionné, capable de rendre les concepts techniques accessibles, Wilfried est le mentor qu’il vous faut !
Témoignages
4.8/5Basé sur 36 avis*
BN
Benjamin N.
Preligens25.11.2024
Pour son premier coup d'essai, Wilfried a été un super formateur ! On a pu mettre de côté les bases déjà acquises par moi et l'autre élève afin de prendre plus de temps pour se concentrer sur les notions réellement avancées. À partir de là, Wilfried a su mettre des travaux pratiques pour chaque notion, nous laissant le temps d'assimiler les nouvelles connaissances. Il a su prendre le temps avec chacun de nous lorsque nous étions bloqués et n'hésitait pas à répondre à nos questions.
ZD
Zakaria D.
FIOULMARKET05.06.2024
Super formateur, très pédagogue.
MI
Mohamed Iheb F.
IVALUA15.01.2024
La formation avec Gabriel sur React + Redux a été très enrichissante. Il nous a aidé à avoir une vision beaucoup plus claire sur les deux technologies. Les exercices pratiques étaient bien adaptés et j'ai bien intégré les concepts. Gabriel a même poussé plus loin avec des concepts avancés, élargissant vraiment notre façon de voir ces technologies. Il est très passionné, et ça se ressent. Une excellente formation, je la recommande !
MB
Marie B.
Marie BAUDLOT
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.
MM
Matthieu M.
Méteo France
très bonne formation, un bon niveau javascript ES6+ est requis ainsi que les bases de React
NB
Nicolas B.
Méteo France
C'est une formation intéressante, de qualité et avec un rythme soutenu
JC
Jérémy C.
Hubvisory Source
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.
JL
Jordan L.
Hubvisory Source
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.
YL
Yannick L.
Hubvisory Source
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.
TR
Teddy R.
Hubvisory Source
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é.
AP
Antoine P.
Preligens
Super formation ! J'ai pu approfondir mes connaissances en React et appris de nouveaux concepts que je n'utilisais pas jusqu'ici.
FAQ
Nos formations sont éligibles à plusieurs dispositifs de financement, selon votre situation. Human Coders est certifié Qualiopi, ce qui permet la prise en charge par des organismes comme Pôle emploi, votre OPCO ou encore le CPF (Compte Personnel de Formation) pour certaines formations.
Oui, la formation peut être proposée en présentiel ou en distanciel. Pour les inter-entreprises, les modalités (présentiel ou à distance) sont fonction de la session.
Nous pouvons organiser des sessions à d'autres dates ou dans d'autres villes (Bordeaux, Lille, Lyon, Marseille, Montpellier, Nantes, Nice, Paris, Strasbourg, Toulouse...)
Les formations se déroulent toujours en petit groupe de 3 à 6 stagiaires. Nous souhaitons que les formateurs et formatrices puissent passer un maximum de temps avec chacun·e.
Voici une journée type :
9h : vous êtes accueillis par votre formateur·rice autour d'un petit déjeuner (croissants, pains au chocolat, jus de fruit, thé ou café...)
9h30 : la formation commence
12h30 : pause de midi. Le·a formateur·rice mangera avec vous. C'est l'occasion d'avoir des discussions plus informelles.
14h : reprise de la formation
18h : fin de la journée
8 raisons de participer à une formation Human Coders
Satisfaction client élevée : Un taux de statisfaction de 4,6/5 depuis 2012 (sur 1651 sessions réalisées). 99% des participants se disent satisfaits de nos formations
Approche pédagogique unique : Des formations en petit groupe, des formateurs passionnés et expérimentés, de véritables workshops... (Plus d'infos sur notre manifeste)
Catalogue de formations complet : 172 formations au catalogue, de quoi vous accompagner sur tout vos projets
Écosystème dynamique : Nous accompagnons les dev depuis 13 ans avec des initiatives comme Human Coders News, les Human Talks, le podcast ou encore notre serveur Discord
Financement facilité : Organisme certifié Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
Références clients prestigieuses : De nombreux clients qui nous font confiance depuis des années
Accompagnement sur mesure : Nous vous proposons un accompagnement personnalisé par nos consultants pour vous aider dans vos projets au-delà de la formation
Valorisation professionnelle : Remise d'un diplôme, d'une attestation et d'une certification, suivant les formations effectuées, que vous pourrez afficher sur vos CV et réseaux sociaux