Paiement par virement bancaire · Marocتعلَّم · مارِس · أتقِن

Catalogue / Développement

React : construire des interfaces modernes

Des composants au déploiement : JSX, props, état, effets, hooks, contexte, réducteur, React Router, styles, tests et mise en production, jusqu’à la boutique en ligne complète d’une coopérative d’artisanat.

  • Intermédiaire
  • 13 leçons
  • 13 h 40

Formation MasterLinux · Texte original

Ce que vous apprendrez

  • Comprendre ce qu’apporte React (composants, rendu déclaratif, réconciliation) et créer un projet avec Vite
  • Écrire des composants en JSX, leur passer des props et des enfants, afficher des listes avec des clés et des contenus conditionnels
  • Rendre une interface interactive avec useState, les gestionnaires d’événements et les formulaires contrôlés
  • Découper une maquette en composants, placer l’état au bon endroit et faire circuler les données de haut en bas
  • Synchroniser un composant avec l’extérieur grâce à useEffect, et savoir quand un effet est inutile
  • Charger des données d’une API proprement (chargement, erreurs, annulation) et écrire ses propres hooks
  • Gérer un état global (panier) avec useContext et useReducer, et naviguer entre les pages avec React Router
  • Styliser, rendre accessible, tester, déboguer, construire et déployer une application React derrière nginx

Programme de la formation

13 leçons · 13 h 40
Section 1 — Les bases de React4 leçons · 3 h 15
  1. Pourquoi React : composants, rendu déclaratif et premier projet avec Vite Aperçu40 min
  2. JSX et composants : props, children, listes, clés et rendu conditionnel 50 min
  3. L'état avec useState : événements et formulaires contrôlés 55 min
  4. Penser en React : découper une maquette, placer l'état, faire circuler les données 50 min
Section 2 — Hooks et données5 leçons · 4 h 40
  1. Les effets : useEffect, dépendances, nettoyage — et quand s'en passer 55 min
  2. Charger des données d'une API : fetch, chargement, erreurs et annulation 55 min
  3. useRef, useMemo, useCallback et hooks personnalisés 55 min
  4. État global : useContext et useReducer pour le panier 1 h 00
  5. Navigation avec React Router : routes, paramètres et liens 55 min
Section 3 — Qualité et production3 leçons · 2 h 45
  1. Styliser une application React et la rendre accessible 55 min
  2. Tester des composants et déboguer : Vitest, Testing Library et React DevTools 55 min
  3. Construire et déployer : vite build, variables d'environnement, nginx 55 min
Section 4 — Projet1 leçon · 3 h 00
  1. Projet : la boutique en ligne d'une coopérative d'artisanat 3 h 00

Prérequis

  • [object Object]
  • Savoir utiliser un terminal et npm (le cours « Node.js » est un plus, pas une obligation)

À qui s’adresse cette formation ?

  • Développeurs web qui veulent passer du JavaScript « à la main » à une bibliothèque d’interface professionnelle
  • Étudiants en informatique (BTS, DUT, licence, écoles d’ingénieurs) qui préparent un stage ou un premier poste front-end
  • Développeurs back-end (PHP, Java, Node.js) qui doivent livrer aussi l’interface
  • Freelances qui réalisent des boutiques en ligne, des sites de réservation ou des tableaux de bord pour des clients au Maroc