React

Objectifs

Maîtriser les fonctionnalités de la dernière version de React, la technologie JavaScript de Meta
Développer des applications web avec React
Créer des composants web complexes rapidement
Application SinglePage avec React.JS et Typescript
Optimiser les performances d'une application React
Utiliser Redux pour la gestion d'état

Programme de la formation

INTRODUCTION
Rappels, de ES6 à ESNext
JavaScript, DOM et VirtualDOM
Limitations des applications JavaScript
Écosystème des frameworks web JavaScript modernes
La nouvelle vision de ReactJS
Environnement de développement : IDE, outils et plug-ins

PRÉSENTATION DE REACTJS
Virtual Dom, un choix de performance
Create-react-app VS Vite
Composants à état, fonction de rendu simple, performance
JavaScript ou JSX
Comprendre le JSX
Création de composants de vue
Initialisation des props
Comprendre le passage de props
Lifting up state - intérêts et inconvénients
React et CSS: css-in-js, modules CSS ou styled-component et portée du style
ESNEXT, ES2015 ET TYPESCRIPT
TypeScript: Création et configuration avec ESLint (TSLint)
Conserver les mêmes normes et qualité de code au sein du projet
Mise en place de husky et lint-staged
COMPOSANTS
Fragments
Découper une application par composants
Props VS state
Component Data Flow : circulation des informations entre composants
Composants réutilisables : contrôle et transfert de propriété
Contrôle des composants de formulaire : solution propriétaire ou utilisation de librairies (Formik, react-hook-form)
Validation de formulaire avec yup
Manipulation du DOM
Portals

HOOKS
useState
useEffect - comprendre le cycle de vie et les désabonnements
useLayoutEffect
useReducer
Séparer la logique d'un composant pour augmenter sa réutilisation
Création d'un customHook
useRef
OPTIMISATION DES PERFORMANCES
Comprendre la mémoïsation et la notion de pureté
useCallback
useMemo
React Memo
NOUVEAUTÉS DE REACT 18 & 17
useId
useTransition
useDeferredValue
Suspense API
Lazy loading et code splitting
Transition facilitée pour les mises à jour futures de React
Modifications des événements pour mieux supporter les applications hybrides React
Suppression de certaines API obsolètes
React Concurrent Mode : composants en parallèle pour améliorer les performances
React Server Components, permettant un rendu côté serveur avec interaction côté client
Mise à jour progressive : qui permet aux développeurs de définir des priorités pour les mises à jour de l'interface utilisateur.
Outils de débogage améliorés
Meilleure prise en charge de Suspense pour la gestion des chargements de données
ROUTING AVEC REACT ROUTER
...

Validation et sanction

Attestation de formation

Type de formation

Non certifiante

Sortie

Sans niveau spécifique