Formation React 18 et Redux | Développer des applications web performantes

Description

React s’impose aujourd’hui comme l’une des principales librairies pour la création d’applications riches, rapides et agréables à développer.

Elle a su innover en apportant une approche « hiérarchie de composants » permettant la réutilisation de briques logicielles facilement.

L’ajout de librairies supplémentaires permet de composer un véritable framework : système de routing, gestion des requêtes Http, gestion d’état applicatif par flux unidirectionnel, outillage de tests unitaires.

Nous aborderons durant ces 3 jours de formation React 18 et Redux les concepts clés autour de React, à travers la réalisation d’une Single Page Application complète.

Programme

Rappels Javascript / ES6

• Variables, tableaux et JSON
• Déstructuration des objets et tableaux
• Fonctions et classes, portée des variables
• Asynchrone et Promises
• Modules ES6

Concepts

• Qu’est-ce qu’une single page application
• Virtual DOM
• Hiérarchie de composants

Les composants

• Composants de type Classe et Fonction
• JSX, render et interpolation de contenu
• Passage de paramètres avec Props
• Cycle de vie d’un composant
• Gestion d’état d’un composant
• Gestion des événements
• Formulaires et controlled components
• High Order Components et children

Hooks

• Gestion des hooks
• Création de hooks personnalisés

Composants et style

• Approche classique avec CSS
• Les CSS Modules
• Les Styled Components

HTTP avec AXIOS

• Méthodes de requêtes Http
• Configuration des requêtes
• Gestion des erreurs
• Transformer requêtes et réponses avec les Interceptors

Router avec REACT-ROUTER

• Définir ses routes et sous-routes
• Méthodes de redirection
• Le HOC withRouter

Flux unidirectionnel avec Redux

• Une architecture de type flux
• Store, actions et reducers
• Middleware et gestion des effets de bord avec redux-thunk

Tests unitaires

• Jest et langage d’assertion
• Jest et mocks
• Enzyme et manipulation du JSX
• Tester axis avec axios-mock-adapter
• Tester redux avec redux-mock-store