Formation React / Redux Avancé
Ce programme de formation en React / Redux avancé vise à fournir aux développeurs une formation complète sur l'utilisation de ces technologies pour la création d'applications Web modernes. Le premier jour de la formation est consacré à un rappel sur les concepts de base de React, tels que le Virtual DOM, JSX et la réconciliation, ainsi qu'à l'examen de techniques avancées de mise en forme de composants et de rendu de code côté serveur. Les participants apprendront également à utiliser les Hooks de React pour ajouter des fonctionnalités à leurs composants sans passer par les classes. Le deuxième jour de la formation est consacré à l'optimisation des performances de l'application React, ainsi qu'à l'amélioration de la qualité du code en utilisant des outils tels que PropTypes et Flow ou TypeScript. La formation inclut également un rappel sur les concepts de base de Redux, y compris les actions, les dispatchs et les reducers, ainsi que sur l'intégration de Redux avec React grâce à react-redux. Le troisième jour de la formation est consacré à la mise en œuvre avancée de Redux, notamment en utilisant des outils tels que redux-actions et reselect pour améliorer les performances et la gestion des actions asynchrones avec redux-thunk et redux-saga. Enfin nous verrons également comment automatiser les tests avec Jest.
Objectifs pédagogiques
- Valider ses acquis sur React et Redux
- Connaitre les concepts avancés de React et Redux
- Utiliser des bibliothèques externes pour accélérer le développement
- Automatiser ses tests avec Jest
Pré-requis
- JavaScript
- React
- Redux
Public
- Développeurs
- Chefs de projets
Programme
Jour 1
Rappels sur React
- Le Virtual DOM, JSX et la réconciliation
- State vs Props
- Les méthodes du Lifecycle
- Controlled vs Uncontrolled components
- Mettre en forme ses composants : CSS in JS, Modules CSS, Préprocesseurs CSS
React : Concepts Avancés
- Englober plusieurs éléments dans un Fragment
- Rendu d’un composant depuis son parent avec les Render Props
- Injecter un objet dans une arborescence de composants avec le Context
- Ajout de fonctionnalité générique avec les Higher-Order Components
- Rendu dans un autre élément du DOM avec les Portals
- Rendu côté serveur avec react-dom/server
- Manipuler le DOM avec des refs, forwardRef et useImperativeHandle
- Gérer les erreurs de rendu avec Error Boundaries
- Créer des customs Hooks
Jour 2
Optimiser les performances d’une application React
- Utilisation de l’outil Performance des DevTools
- Attention aux listes, keys, react-window
- Limiter la création d’objets par la méthode render
- shouldComponentUpdate, PureComponent et memo
- useMemo et useCallback
- Modules ECMAScript et Tree-Shaking
- Lazy Loading : React.lazy et Suspense
Qualité de code
- Rédiger ses propres conventions
- Le Strict Mode de React
- Mettre à jour son application serainement avec Yarn ou npm
- Vérifier les types des Props avec PropTypes
- Typage statique avec Flow ou TypeScript
- Développer en isolation avec StoryBook
Rappels sur Redux
- Actions et dispatch
- Reducer et mise à jour du State
- Actions Creators et Constants
- Selectors pour retrouver les valeurs du state
- React-redux pour l’intégration avec React
- Redux Devtools
Jour 3
Redux Avancé
- Simplifier son code avec Redux Toolkit
- Des sélecteurs plus performants avec reselect
- Créer ses propres Middlewares pour Redux
- Persister le store avec redux-persist
- Gérer l'asynchrone avec Redux Thunk, createListenerMiddleware
- Scénario avancés avec les effets de redux-saga ou Redux Observable
- Normaliser les données avec normalizr ou createEntityAdapter
- Un framework complet pour accéder aux données : RTK Query
Automatisation des tests
- Tests Unitaires vs Intégrations vs End-to-End
- Tests Unitaires avec Jest ou vitest
- Créer des mocks pour isoler un test
- Tester du code Asynchrone
- Simplifier les tests avec Testing Library
- E2E Testing avec Cypress ou Playwright
Méthodes mobilisées
- Un formateur validé par nos équipes techniques et pédagogiques sera présent pendant toute la durée de la formation
- Pour les formations en présentiel, une salle de formation sera mise à disposition et équipée d'ordinateurs portables, d'un accès Wi-Fi, d'un projecteur et d'un tableau blanc. En distanciel la session sera suivie sur Zoom ou autre outil de visioconférence sur demande (Teams, Webex, Google Meet...).
- Un support de cours en version numérique sera remis à chaque participant
Modalités d’évaluation
- Questions orales ou écrites (QCM)
- Exercices pratiques
- Auto-positionnement en amont et aval de la formation
Accessibilité aux personnes handicapées
Nous nous engageons à rendre notre formation React / Redux Avancé accessible aux personnes en situation de handicap. Merci de nous contacter afin que nous puissions réaliser les adaptations nécessaires en amont de la formation.Avis
Azzedine A.
Benoit W.
Les +
Clarté des explications, variété des exemples et bonne couverture de ce que l'on peut faire avec React et Redux
Andrejs Z.
La formation
Merci, cela s'est très bien passé et je pense que cela sera très utile pour le développement futur.
Le formateur
Merci à Romain !
Vincent G.
La formation
Très bonne formation.
Mérite peut-être une journée de plus.
Leo C.
Les +
La formation s'est bien adaptée au contexte de notre équipe
Christophe B.
La formation
Il serait intéressant d'intégrer plus de petits exercices quand cela est possible pour mettre en pratique et donc assimiler plus facilement les points théoriques.
Enis K.
Thomas M.
Sébastien L.
La formation
Un peu trop de théorie pour pas assez de pratique
Matthieu B.
La formation
Bien niveau equilibre exercices / theorie.
Le formateur
Bonne connaissance du contexte de notre entreprise (proxy, framework Theia etc)
Les +
Pédagogie super
Partie pratique avec explication
Stéphane F.
Nabil S.
Cédric C.
Matthieu N.
La formation
Formation globallement de très bonne qualité.
Pas du support de cours autre que le site de React. Mais finalement suffisant.
Ce sera peut etre un peu difficile de de s'y retrouver dans les sources des repos après coup si recherche d'un exemple précis.
Frédéric C.
La formation
Le contenu, je pense avoir compris l'esprit et les sujets couverts globalement.
Mais moins que les precedentes formations avec Romain.
Le formateur
J'ai un peu ete largué à certains moments "live": sur certains aspects creusés ou explorés "live", je ne suivais pas trop, j'ai un peu decroché, trop d'infos, trop rapidement.
Perso, je prefererais avoir moins de choix possibles mais comprendre au final, celui qui est preconise/preferable dans notre contexte (celui de theia de notre projet).
Là, je ne me sens pas trop capable de dire cela.
Les +
RAS
Commentaire général
Pour moi, c'est quelque part, trop avancé, maintenant, car je ne maitrise pas assez bien, les principes de base.
Je ne recommanderai pas à quelqu'un comme moi qui n'a pas trop pratique React avant, car cela ne sera pas tres efficace.
Le rappel du debut fut fort utile, mais, pour la suite, il me manquait de la pratique, clairement.
Julien D.
Stéphane G.
Eric A.
La formation
J'etais trop peu prepare donc ne pas trop tenir compte
Les +
Beaucoup de choses interessantes
Maxime D.
Anthony F.
Emil H.
Erik L.
Kostianty K.
Niklas D.
Samuel H.
Samuel B.
Nacera B.
Andy C.
Yassine Z.
Commentaire général
Tout d'abord, je tiens à te remercier pour cette formation.
Nous avons vu le lazy loading de composant lors du jour 2 je crois bien et sur mon projet nous comptons prochainement mettre en place un lazy loading sur une liste de photographies. Aurais-tu une librairie à me conseiller sur ce sujet ?
Merci par avance :)
Salim S.
Camille B.
Anthony R.
La formation
Pour plus d'interactivité, il faudrait faire des quizz ou interroger les participants pour voir si les notions sont acquises
Les +
L'intervenant à une très bonnes connaissances de JS ainsi que d'autre techno Web et de son environnement
Thierno D.
Loïc D.
Ines K.
Marjorie J.
La formation
Peut être trop de temps passé à revoir les basiques
Le formateur
Les récap du contenu de la veille sont appréciables, et permettent de revoir les choses avec plus de distance
Yann R.
Le formateur
Super formateur ! Merci Romain !! 👌🏻✌🏻
Les +
La pédagogie du formateur et ses explications.
Commentaire général
J'ai bien compris les concepts théoriques, malheureusement je n'ai pas assez pratiqué pour être opérationnel tout de suite mais cela viendra relativement vite. Merci encore !
Angélique C.
La formation
Formation complète et explication claire
Commentaire général
Formation complète et techniquement un peu trop avancée par rapport à mon niveau. Mais c'est une bonne base pour pratiquer et me permettre de monter en compétences sur react/redux
Clément G.
Le formateur
Très compétent et à l'écoute des développeurs
Les +
Les explications de redux SANS les bonnes pratiques !
Commentaire général
Je recommande la formation et le formateur, exercices complets, mais je rajouterai éventuellement un petit exo de 1 ou 2h retraçant les concepts vus au cours de la forma, from scratch.
En dehors de ça thumbs-up. Merci à Romain
Mohammed Amine B.
La formation
Une partie SSR completerait assez bien la formation
Le formateur
Au delà de l'aspect pédagogique, la formation n'était pas que théorique, et on a eu le retour sur experience sur pas mal de choses.
Samir K.
La formation
Comme le niveau du group était différent on s’attardais sur des sujet basic si je peux dire ça ce qui nous a fait perdre du temps et donc passer moins du temps sur les concepts avancés
Le formateur
Une bonne présence , des explications très claires appuyées souvent par des exemples.
