ReactJS - Fonctionnalités avancées

Jour 1

Redux Toolkit

• Présentation de Redux Toolkit et ses avantages
• CreateStore et configureStore
• CreateAction et createSlice
• CreateAsyncThunk pour la gestion des actions asynchrones
• UseSelector et useDispatch

Exemple de travaux pratiques (à titre indicatif)

• Refonte d'une application Redux existante en utilisant Redux Toolkit

React Query

• Introduction à React Query et ses avantages
• Installation et configuration de base
• Fetching, caching et synchronisation automatique des données
• Pagination et chargement infini
• Mutation et gestion des erreurs

Exemple de travaux pratiques (à titre indicatif)

• Intégration de React Query dans une application pour récupérer et gérer les données d'une API

PWA avec React

• Comprendre les PWA et leurs avantages
• Créer une PWA avec Create React App
• Utilisation des Services Workers
• Ajout d'un manifeste d'application Web
• Mise en cache des ressources et stratégies de mise en cache

Exemple de travaux pratiques (à titre indicatif)

• Transformation d'une application React en PWA

Mémoïsation et optimisation des performances

• Comprendre la mémoïsation et son importance
• Utilisation de React.memo pour les composants fonctionnels
• UseMemo et useCallback pour les hooks
• Analyse des performances avec les outils de développement
• Code Splitting et lazy loading avec React.lazy et Suspense

Exemple de travaux pratiques (à titre indicatif)

• Optimisation des performances d'une application React en utilisant la mémoïsation et le Code Splitting

Jour 2

Tests avancés

• Tests des composants utilisant Redux et React Query
• Mocking des API et des stores
• Tests des hooks personnalisés
• Tests d'intégration

Exemple de travaux pratiques (à titre indicatif)

• Ecriture de tests avancés pour une application React

Passer de REST à GraphQL

• Introduction à GraphQL et ses avantages
• Installation et configuration d'Apollo Client
• Requêtes et mutations avec GraphQL
• Gestion du cache avec Apollo Client
• Pagination et chargement infini

Exemple de travaux pratiques (à titre indicatif)

• Migration d'une application React utilisant REST vers GraphQL

Notions avancées supplémentaires

• Gestion des contextes et des providers
• Utilisation de Portals pour le rendu de modales et tooltips
• Gérer les erreurs avec les composants "Error Boundary"

Exemple de travaux pratiques (à titre indicatif)

• Mise en oeuvre des notions avancées dans une application React

Le contenu de ce programme peut faire l'objet d'adaptation selon les niveaux, prérequis et besoins des apprenants.

Modalités d’évaluation des acquis

• En cours de formation, par des études de cas ou des travaux pratiques
• Et, en fin de formation, par un questionnaire d'auto-évaluation et/ou un examen M2i