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