React Avancé

Paris | 26-27 juin

Qu’allez-vous apprendre ?

Tester et déboguer son application

Il est essentiel de tester son application pour éviter les régressions. Nous verrons plusieurs stratégies pour tester ses composants : unitaires, intégration et snapshots.

  • Utiliser l'extension React
  • Tester ses composants avec Jest et Enzyme
  • Utiliser le snapshot testing

Optimisation des performances de rendu

Des problèmes de performances peuvent apparaître quand votre application React grossit. Nous verrons comment investiguer et optimiser votre application pour résoudre les problèmes de performances.

  • Identifier un problème de performance
  • Déboguer les performances avec les Dev Tools
  • Comprendre l'utilité du shouldComponentUpdate
  • Optimiser son application avec la notion de "pureté"

Render props

Nous découvrirons comment utiliser le render props afin et rendre votre application plus simple, plus découpée et de garder une approche déclarative.

  • Utiliser le render props
  • Savoir quand utiliser le render props

Utiliser les High Order Components

Les High Order Components sont des fonctions qui prennent et retournent des composants. Nous verrons comment tirer parti de ce puissant pattern pour partager de la logique.

  • Créer un Higher Order Component
  • Savoir quand utiliser un Higher Order Component

Nouveautés React 16

Basée sur une nouvelle architecture baptisée Fiber, React 16 a apporté son lot de nouveautés. Nous découvrirons comment tirer partie de ces nouvelles fonctionnalités.

  • Contourner les problèmes de CSS avec les Portals
  • Gérer les erreurs avec les Error Boundaries
  • Faire des rendus plus explicites avec les Fragments

La gestion des routes avec React Router

La gestion des routes se fait avec React Router. Après avoir étudié les différents patterns qui le composent, nous verrons comment le mettre en place.

  • Mettre en place React Router
  • Explorer les patterns utilisés par la librairie (higher order components, render props...)

Intégrer le CSS de façon Smooth

Comment intégrer le CSS dans une architecture orientée composants ? Nous découvrirons le CSS in JS, comment il est apparu et ce quels sont ses avantages.

  • Comprendre les problèmes résolus par le CSS in JS
  • Mettre en place styled-components

Gérer le state de son application avec Redux

Après avoir expliqué ce qu’est Redux et quels sont ses avantages, nous verrons comment architecturer son application React / Redux pour la rendre scalable.

  • Comprendre la philosophie et les problèmes résolus par Redux
  • Architecturer son application autour de Redux
  • State local VS Store Redux
  • Industrialiser ses formulaires avec Redux

Server side rendering

React permet de créer des applications isomorphiques, autrement dit capable de servir le premier rendu directement par le serveur. Nous verrons les avantages de cette technique avancée et comment la mettre en place de façon efficace.

  • Client side rendering VS Server side rendering
  • Mettre en place du server-side rendering
  • Découvrir Next.js
Télécharger le programme en PDF

Les Objectifs

Cette formation vous permettra d'approfondir vos connaissances en React. À travers la création d'une application vous découvrirez comment scaler, tester, optimiser et tirer parti à 100% de React. Vous serez en mesure d'architecturer des applications complexes autour de React et Redux.

À qui s’adresse cette formation ?

  • Les développeurs ayant suivi la formation React fondamental et souhaitant aller plus loin
  • Les développeurs utilisant déjà React et souhaitant approfondir les bonnes pratiques et les techniques avancées
  • Les architectes responsables de la mise en place d’une nouvelle application React
  • Les lead développeurs ou directeurs techniques responsables de la scalabilité d’une application React Redux

Votre formateur

Greg Bergé

Greg Bergé

Greg est développeur JavaScript depuis le début des années 2000 et auteur de plusieurs librairies open-source à succès comme Shipit, React Hot Loader ou SVGR. Formateur à l’international, c’est l’expert JavaScript de Smooth Code.

Formulaire d’inscription