React
Academy

Plan de cours

Fondements de React

React est une bibliothèque JavaScript créée par Facebook. Elle permet aux développeurs de générer des applications Web à partir de données qui peuvent être modifiées sans avoir à rafraîchir la page. Elle offre plus de rapidité, de simplicité et d’évolutivité.

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

Jour 1

Toutes les notions de base dont vous avez besoin
1. Introduction à React 
  • Présentation de React (aussi connu sous le nom ReactJS)
  • Caractéristiques, avantages et inconvénients
  • Installation
  • "Hello World!" en React
  • Bâtir et déployer une application React
2. JSX et rendu 
  • Ajouter une racine React
  • Langage JSX
  • Trois phases du changement: déclencheur, rendu et commit
  • Abstractions JSX: createElement() and éléments React
3. Composants 
  • Conposants Functionnels
  • Propriétés (Props React et décomposition)
  • État React
  • setState, mutations et immuabilité
4. Cycle de vie (Lifecycle) 
  • Création et destruction des composants
  • Cycle du setState
  • Utiliser des effets avec useEffect()
  • Tableau de dépendences
  • Effet de nettoyage
5. Gestion des événements 
  • Gestionnaires d’événements (event listeners)
  • Événements synthétiques
6. Programmation fonctionnelle avec Hooks Nouveau
  • Comment fonctionnent les Hooks?
  • Règles des Hooks
  • Hooks personalisés

Jour 2

Renforcez vos compétences
7. Mise en page Nouveau
  • CSS, styles et CSS-in-js
  • Sass et Less
  • Post-CSS et autopréfixage
8. Routage 
  • Navigation, NavBars et Liens
  • Hashlinks, History API, Navigation API
  • React-Router-DOM
9. Formulaires 
  • Composants contrôlés
  • Composants libres (uncontrolled components)
  • Références (refs)
  • PreventDefault
10. Charger des données dans le « State » 
  • Utiliser des clés
  • 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
11. Chargerment des données en utilisant le routage Nouveau
  • Data loaders en utilisant React-Router-Dom
  • Modification des données avec des actions
  • Le role des Formulaires
  • Suspense
12. Outillage React 
  • Introduction à l'outillage React (dev tools)
  • Extension de débogage
  • Visualiser l'aborescence
  • Analyse des performances avec le profilage
  • Détecter le re-rendu