Fondements de React

Modifié le: 2024-02-27

Auditoire

Développeurs

Durée

2 jours

Description

React est une bibliothèque JavaScript originalement créée par Facebook. Elle permet aux développeurs de générer des applications Web à partir de composants réutilisables qui facile à modifier. Elle offre un équilibre entre rapidité, simplicité et évolutivité.

En quelques années, React est devenue LA technologie populaire, utilisée sur des milliers de sites Web (Facebook, Netflix, Instagram, NY Times, Teams) et d’applications mobiles (Skype, Uber, Tesla).

Contenu du cours

Introduction à React
  • Présentation de React
  • Caractéristiques, avantages et inconvénients
  • Installation du poste de travail:
    • Node JS
    • nvm
  • Configuration de VS Code Nouveau
  • Hello World! en React
  • Fast refresh et hot reloading
  • Bâtir et déployer une application React
JSX et rendu
  • Ajouter une racine React
  • Langage JSX
  • Abstractions JSX: createElement() et éléments React
  • Attributs spéciaux: className, style, key, etc.
  • Optimisations du commit Nouveau
Composants
  • Conposants Functionnels
  • Propriétés (Props React et décomposition)
  • État React
  • Cycle de setState
  • setState et mutations Nouveau
Architecture de composants
  • IU est une fonction de l'état
  • Trois phases du changement: déclencheur, rendu et commit
  • Rendu des composant et fonctions pures
  • Immuabilité de l'état (objets et tableaux) Nouveau
Gestion des événements
  • Gestionnaires d'événements
  • Événements synthétiques
Programmation fonctionnelle avec Hooks
  • Comment fonctionnent les Hooks
  • Règles des Hooks
  • Hooks personalisés
Mise en page
  • CSS, styles et CSS-in-js
  • Sass et Less
  • Post-CSS et autopréfixage
  • StyleX Nouveau
Routage
  • Utiliser les clés
  • Navigation, NavBars et Liens
  • Hashlinks, History API, Navigation API
  • Utiliser useSyncExternalStore()
  • React-Router-DOM
Formulaires
  • Composants controllés
  • Composants non-controllés
  • Refs
  • PreventDefault
Charger des données vers le State
  • Utiliser les promesses avec use() Nouveau
  • Utiliser fetch() pour obtenir des données d’un API REST
  • Modifier les données avec un API REST
  • Programmation asynchrone en JS
  • Utiliser les notifications Option
Chargement des données en utilisant le routage
  • Data loaders en utilisant React-Router-Dom Option
  • Modification des données avec des actions
  • Le rôle des Formulaires
  • Suspense
Outillage React
  • Introduction à l'outillage React (dev tools)
  • Extension de déboggage
  • Visualiser l'aborescence
  • Analyse des performances avec le profilage
  • Détecter le re-rendu