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 / Compétences visées
- 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 : Concept Avancés
- Les Fragments de React 16.2
- Rendu d’un composant depuis son parent avec les Render Props
- Injecter un objet dans une arborescence de composant 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 ReactDOMServer
- Les Hooks de React 16.8
- Configuration avancé de Create React App
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
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é
- Actions FSA et redux-actions
- Des sélecteurs plus performants avec reselect
- Créer ses propres Middlewares pour Redux
- Persister le store avec redux-persist
- Séparer les actions asynchrone avec redux-thunk
- Scénario avancés avec les effets de redux-saga
- Manipuler les formulaires avec Redux Form
Automatisation des tests
- Tests Unitaires vs Intégrations vs End-to-End
- Tests Unitaires avec Jest
- Créer des mocks pour isoler un test
- Tester du code Asynchrone
- Tests de composants avec Enzyme
Moyens pédagogiques et techniques
- Formateur validé par nos équipes techniques et pédagogiques
- Salle de formation informatisée
- Support de cours numérique
Suivi et appréciation des résultats
- Questions orales ou écrites (QCM)
- Exercices pratiques
- Formulaires d'évaluation
Avis
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.
