Contactez-nous

React / Redux Avancé

Formation React / Redux Avancé

A l'issue de la formation React / Redux Initiation, nous avons vu comment créer ses propres composants, créer un store avec Redux et mettre en place une Single Page Application avec React Router. Dans cette formation nous verront les concepts plus avancés de React : Fragment, Render Props, Lazy, Higher Order Components... Mais surtout comment écrire et maintenir une application React en équipe lorsque le projet grossit. Nous disséquerons les bonnes pratiques et les bibliothèques qui gravitent autour de Redux et enfin nous automatiserons 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-virtualized
    • Limiter la création d’objets par la méthode render
    • shouldComponentUpdate, PureComponent et React.memo
    • 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