Description de la formation ReactJS Avancé
Cette formation ReactJS Avancé vous permet d’approfondir votre expertise de React et de découvrir ses dernières nouveautés. Les travaux pratiques réalisés sur la base d’un projet fil rouge vous feront découvrir l’écosystème nécessaire à la conception d’applications Web encore plus optimisées. Vous sortirez de cette formation avec de solides connaissances sur React et ses bonnes pratiques de développement.
Objectifs
Objectifs opérationnels :
Maîtriser les concepts avancés de ReactJS.
Objectifs pédagogiques :
Concrètement, à l’issue de ce cours ReactJS Avancé, vous serez en mesure de :
- Améliorer la qualité de votre code pour une meilleure maintenance
- Optimiser et mettre en œuvre les bonnes pratiques du développement d’applications React/React Native
- Connaître et appliquer les techniques et designs patterns avancés
- Optimiser les performances
- Connaître les technologies autour de React et React Native
À qui s’adresse cette formation ?
Public :
Cette formation ReactJS Avancé cible principalement les développeurs informatiques, les architectes logiciel, les consultants ainsi que chefs de projet proches du développement et les développeur web.
Prérequis :
Pour suivre cette formation ReactJs Avancé dans de bonnes conditions, il est nécessaire d’avoir de bonnes connaissances en JavaScript et Asynchrone ainsi qu’en POO et en React ou React Native.
Avoir suivi la formation ReactJS : Développement Web (réf. REJS) est fortement conseillé.
Contenu du cours ReactJS Avancé
Introduction à ReactJS Avancé
Rappels sur ES6+ et les modules
Les principes clés de React : VirtualDOM, JSX, One Way Data Flow
Les outils de débogage
Les bonnes pratiques pour structurer un projet
Bonnes pratiques de développement
Rappels prop-types et defaultProps
Passer de flow à TypeScript
Mettre en place des tests unitaires et fonctionnels
Techniques et design patterns avancés
Le pattern des Higher Order Components (HOC)
Le rendu dans des éléments DOM distants avec les Portals
Injection de dépendances avec les Context
Techniques avancées de la méthode render : Fragments et render props
Redux avancé
Rappels Redux : les entités, la syntaxe et l’intégration avec React
Simplifier et optimiser la création de formulaires avec Redux Form
Améliorer l’expérience utilisateur grâce à Redux Persist et au stockage local du state
Créer un Middleware Redux Custom
La bibliothèque Redux-Saga
La programmation réactive
Principe
RxJS
Nouveautés React : Context et les hooks pour remplacer Redux
Présentation
State Hook
Effect Hook
Règles pour les Hooks
Construire son hooks
Remplacer Redux avec le context et les hooks
Optimisation des performances
Comment optimiser le cycle de vie des composants ?
Utiliser l’immutabilité pour accélérer et simplifier les traitements
Les composants purs.
Animations/Transitions
Animer les composants à l’aide d’animations et transitions CSS
Simplifier le travail avec react-transition-group
Comparatif et exemples de mise en œuvre
L’internationalisation
Internationalisation versus localisation : différences et scénario d’utilisation
Les principales librairies d’internationalisation
Intégration dans React et Redux
Les technologies autour de React et React Native
Du REST au GraphQL
Créer une application « server-side » avec Next.js
Le CSS avec « styled-components »
Les concurrents de React Native : Ionic, Xamarin