Formation React | Modules avancés

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.

Elle offre la richesse de pouvoir composer son propre framework sur-mesure (système de routing, gestion des requêtes Http, gestion d’état applicatif par flux unidirectionnel, outillage de tests unitaires) ou d’en utiliser un comme Next.js.

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

Programme

Concepts

• Architecture de React
• JSX
• Hiérarchie de composants
• ES Modules
• Virtual DOM

Outils

• Transpilage du code avec Babel
• Gestion des dépendances avec NPM
• Gestion des ressources statiques avec les bundlers

Les composants

• Création d’un composant
• Rappels sur les fonctions JavaScript
• Passage de paramètres avec Props
• Composition, projection et interpolation de contenu
• Rappels sur les tableaux JavaScript
• Cycle de vie d’un composant
• Gestion d’état d’un composant
• Gestion des événements
• Gestion du style CSS

Hooks

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

Formulaires

• Composants contrôlés
• Composants non contrôlés
• Gestion des formulaires avec React-hook-form
• Gestion des formulaires avec Formik
• Validation avec Yup

Flux unidirectionnel REDUX

• Présentation du modèle « machine à état » avec useReducer
• Mise à disposition dans un context
• Présentation de l’architecture REDUX
• Présentation de REDUX-TOOLKIT

Gestion des données externes avec REACT-QUERY

• Création de requête
• Gestion de la mise en cache
• Mutations et invalidation du cache
• Requêtes infinies

Router avec REACT-ROUTER

• Définir ses routes et sous-routes
• Méthodes de redirection
• Pré-chargement de données
• Gestion des actions
• Gestion de l’état de navigation
• Affichage d’interface de transition

Adopter une stratégie de tests avec react-testing-library et cypress

• Jest et langage d’assertion
• Jest et mocks
• Manipulation du JSX avec react-testing-library
• Tests de bout en bout avec Cypress

Industrialiser ses développements avec Typescript

• Typage des variables et des fonctions
• Types complexes et union
• Programmation orientée objet

Optimiser le SEO avec Next.js 13

• Améliorer le temps d’accès aux pages grâce au rendu côté serveur (SSR)
• Générer des pages statiques
• Gestion de la disposition des pages
• Gestion des erreurs contextuelles