Contactez-nous

React.js : Le guide de référence

Devenez expert React.js ! Ce guide complet couvre tout : bases, hooks avancés, state management (Redux, Zustand), routage, tests, optimisation, Next.js, TypeScript et déploiement. Pour tous niveaux.

Table des matières

  1. Les Fondamentaux de React
    1. Introduction à React.js
      1. Qu'est-ce que React ? (Bibliothèque vs framework)
      2. Philosophie et avantages de React (Déclaratif, basé sur les composants, apprendre une fois, écrire partout)
      3. Le DOM virtuel (Virtual DOM) : Concept et fonctionnement
      4. React vs autres frameworks/bibliothèques (Angular, Vue.js, Svelte)
      5. L'écosystème React (React Native, Next.js, Gatsby, etc.)
    2. Mise en place de l'environnement de développement
      1. Prérequis logiciels (Node.js, npm/yarn)
      2. Création d'un projet React avec Create React App (CRA)
      3. Structure d'un projet React typique
      4. Lancement du serveur de développement et outils de base (DevTools)
      5. Alternatives à CRA (Vite, Next.js, configuration manuelle avec Webpack/Babel - Aperçu)
    3. JSX - Syntaxe JavaScript étendue
      1. Introduction à JSX : Pourquoi et comment ?
      2. Règles de base de JSX (Elément racine unique, fermeture des balises)
      3. Intégration d'expressions JavaScript dans JSX (`{}`)
      4. Attributs JSX (className, htmlFor, style, etc.)
      5. JSX et la prévention des injections (XSS)
      6. Commentaires en JSX
      7. Fragments
    4. Les composants React : Blocs de construction fondamentaux
      1. Composants fonctionnels (Function Components) - Approche moderne et privilégiée
      2. Composants classe (Class Components) - Comprendre l'héritage (pour maintenance/lecture)
      3. Rendu des composants
      4. Composition de composants (imbrication)
      5. Modules JavaScript (import/export) pour les composants
    5. Props - Passage de données aux composants
      1. Introduction aux props (Propriétés)
      2. Passer des props d'un parent à un enfant
      3. Lecture des props dans les composants fonctionnels et classe
      4. `props.children` : Passer des éléments enfants
      5. Props par défaut (Default Props)
      6. PropTypes : Validation des types de props (Importance et utilisation)
      7. Déstructuration des props
    6. State - Gestion de l'état local d'un composant
      1. Introduction au concept d'état (State)
      2. Le hook `useState` : Introduction et utilisation
      3. Déclaration d'une variable d'état
      4. Lecture de l'état
      5. Mise à jour de l'état (Fonction de mise à jour)
      6. Mise à jour basée sur l'état précédent
      7. L'état dans les composants classe (`this.state`, `this.setState`) - Comparaison
      8. Quand utiliser le state vs les props ?
      9. Lifting state up (Remonter l'état) : Partage d'état entre composants
    7. Gestion des événements
      1. Ecouteurs d'événements en JSX (onClick, onChange, onSubmit...)
      2. Gestionnaires d'événements (Event handlers)
      3. L'objet événement synthétique de React
      4. Passer des arguments aux gestionnaires d'événements
      5. Liaison (`bind`) et fonctions fléchées dans les composants classe (Contexte `this`) - Pertinence historique
    8. Rendu conditionnel
      1. Utilisation des instructions `if`
      2. Opérateur ternaire (`condition ? expr1 : expr2`)
      3. Opérateur logique ET (`&&`) pour le rendu conditionnel court
      4. Renvoyer `null` pour ne rien afficher
      5. Stratégies pour des conditions multiples
    9. Listes et clés (Keys)
      1. Rendu de listes d'éléments (méthode `map()`)
      2. L'importance des `key` props : Identification et performance
      3. Choisir une bonne `key` (stable, unique et prédictible)
      4. Pièges courants avec les clés (index comme clé)
    10. Formulaires
      1. Composants contrôlés (Controlled components) : Liaison état et input
      2. Gestion des différents types d'inputs (text, textarea, select, checkbox, radio)
      3. Gestion de la soumission de formulaire (`onSubmit`)
      4. Validation de base des formulaires
      5. Composants non contrôlés (Uncontrolled components) et `useRef` (Alternative)
      6. Bibliothèques de gestion de formulaires (React Hook Form, Formik - Aperçu)
  2. Maîtrise des Hooks
    1. `useState` - Revisité et cas avancés
      1. Initialisation paresseuse (Lazy initial state)
      2. Mises à jour fonctionnelles pour garantir la fraîcheur de l'état
      3. Gestion d'objets et de tableaux dans l'état (Immutabilité)
    2. `useEffect` - Effets de bord
      1. Introduction aux effets de bord (Data fetching, subscriptions, timers, mutations manuelles du DOM)
      2. Utilisation de `useEffect` pour exécuter du code après le rendu
      3. Le tableau des dépendances : Contrôler l'exécution de l'effet
      4. Fonction de nettoyage (Cleanup function) : Prévenir les fuites mémoire
      5. `useEffect` sans dépendances (montage/démontage et mises à jour)
      6. `useEffect` avec dépendances vides (`[]`) (montage uniquement)
      7. `useEffect` avec dépendances spécifiques
      8. Pièges courants avec `useEffect` (dépendances manquantes, boucles infinies)
    3. `useContext` - Partage d'état global simplifié
      1. Le problème du "prop drilling"
      2. Introduction à l'API Context (React.createContext, Provider, Consumer)
      3. Le hook `useContext` : Consommer le contexte facilement
      4. Structurer les Providers
      5. Mises à jour du contexte et optimisation (séparation des contextes)
      6. Quand utiliser Context vs state local vs state management externe ?
    4. `useRef` - Accès aux éléments DOM et valeurs persistantes
      1. Accéder aux noeuds du DOM (focus, mesures, intégration de bibliothèques tierces)
      2. Stocker des valeurs mutables persistantes sans causer de re-render
      3. Différences entre `useRef` et le state
      4. `forwardRef` : Transmettre des refs à des composants enfants
    5. `useReducer` - Gestion d'état complexe
      1. Alternative à `useState` pour une logique d'état plus complexe
      2. Concept de reducer (inspiré de Redux)
      3. Mise en place de `useReducer` (état initial, fonction reducer, dispatch)
      4. Actions et payloads
      5. Avantages par rapport à `useState` (logique centralisée, testabilité, optimisation des dispatchs via Context)
    6. Les hooks personnalisés (Custom Hooks)
      1. Motivation : Réutiliser la logique d'état et d'effets
      2. Création d'un custom hook : Règles et conventions (`use...`)
      3. Exemples : `useFetch`, `useLocalStorage`, `useToggle`, `useFormInput`
      4. Partage de logique non visuelle
    7. Règles des hooks et linters
      1. Les deux règles fondamentales des hooks (Appel au niveau supérieur, appel depuis fonctions React)
      2. Plugin ESLint pour les hooks (`eslint-plugin-react-hooks`)
  3. Structuration d'Applications et Interactions
    1. Styles et CSS dans React
      1. CSS classique (`className`) et feuilles de style globales/locales
      2. CSS Modules : Styles scopés localement
      3. CSS-in-JS : Styled Components, Emotion (Principes et exemples)
      4. Frameworks CSS utility-first (Tailwind CSS) : Intégration et avantages
      5. Styles en ligne (Inline styles) : Quand et comment ?
      6. Utilisation de préprocesseurs CSS (Sass/SCSS, Less)
    2. Routage côté client avec React Router
      1. Introduction au routage SPA (Single Page Application)
      2. Installation et configuration de React Router DOM (`BrowserRouter`, `Routes`, `Route`)
      3. Création de liens (`Link`, `NavLink`)
      4. Routes dynamiques et paramètres d'URL (`useParams`)
      5. Routes imbriquées (`Outlet`)
      6. Redirections (`Navigate`)
      7. Navigation programmatique (`useNavigate`)
      8. Routes protégées (Authentification)
      9. Gestion du "Not Found" (404)
      10. Paramètres de recherche (`useSearchParams`) et état de localisation (`useLocation`)
    3. Gestion d'état globale avancée
      1. Limites de `useState` et `useContext` pour les grandes applications
      2. Introduction aux bibliothèques de gestion d'état dédiées
      3. Redux : Concepts clés (Store, Actions, Reducers, Dispatch, Middleware - Thunk/Saga)
      4. Mise en place avec React Redux (`Provider`, `useSelector`, `useDispatch`)
      5. Redux Toolkit : L'approche moderne et simplifiée
      6. Zustand : Approche minimaliste basée sur les hooks
      7. MobX, Recoil, Jotai (Aperçu des alternatives et de leurs philosophies)
      8. Choisir la bonne stratégie de gestion d'état pour votre projet
    4. Communication avec les API (Data fetching)
      1. Utilisation de `fetch` ou `axios` dans `useEffect`
      2. Gestion des états de chargement (Loading), succès (Success) et erreur (Error)
      3. Annulation des requêtes (AbortController)
      4. Bibliothèques dédiées au data fetching :
      5. SWR (Stale-While-Revalidate)
      6. React Query (TanStack Query) : Caching, synchronisation, mises à jour en arrière-plan
      7. Gestion des requêtes POST, PUT, DELETE
      8. Authentification et en-têtes (Headers)
      9. Gestion des erreurs d'API
  4. Optimisation et Patterns Avancés
    1. Optimisation des performances de rendu
      1. Comprendre le processus de rendu et de réconciliation de React
      2. Outils de profiling React (React DevTools Profiler)
      3. `React.memo` : Mémoïsation des composants fonctionnels
      4. `useMemo` : Mémoïsation des valeurs calculées
      5. `useCallback` : Mémoïsation des fonctions callback
      6. Quand et comment utiliser `memo`, `useMemo`, `useCallback` (Eviter l'optimisation prématurée)
      7. Virtualisation des listes longues (react-window, react-virtualized)
    2. Code splitting (Découpage du code)
      1. Pourquoi découper son code ? (Réduire la taille du bundle initial)
      2. `React.lazy` : Chargement paresseux des composants
      3. `Suspense` : Gérer l'état de chargement des composants lazy
      4. Code splitting basé sur les routes
    3. Gestion des erreurs (Error Boundaries)
      1. Introduction aux Error Boundaries (Composants classe uniquement pour la capture)
      2. Implémentation d'un Error Boundary (`componentDidCatch`, `getDerivedStateFromError`)
      3. Placement stratégique des Error Boundaries
      4. Utilisation avec des bibliothèques (ex: `react-error-boundary`) pour une approche Hooks-friendly
    4. Accessibilité (a11y)
      1. Importance de l'accessibilité web
      2. Attributs ARIA et HTML sémantique dans React
      3. Gestion du focus
      4. Outils de test d'accessibilité (axe, Lighthouse)
      5. Bonnes pratiques pour les formulaires, modales, etc.
    5. Portails (Portals)
      1. Rendre des composants en dehors de leur hiérarchie DOM parente
      2. Cas d'usage : Modales, tooltips, popovers
      3. Création et utilisation de portails (`ReactDOM.createPortal`)
    6. Patterns de composition avancés
      1. Higher-Order Components (HOCs) - Comprendre le pattern (moins courant avec les hooks)
      2. Render Props - Comprendre le pattern (moins courant avec les hooks)
      3. Compound Components (Composants composés) : API flexible et expressive
      4. Provider Pattern (via Context API)
  5. Tests et Qualité du Code
    1. Introduction aux tests dans React
      1. Pourquoi tester ? Types de tests (Unitaire, intégration, end-to-end)
      2. Pyramide des tests
      3. Outils courants : Jest (Test runner), React Testing Library (Philosophie et utilisation)
    2. Tests unitaires et d'intégration avec Jest et React Testing Library (RTL)
      1. Configuration de l'environnement de test
      2. Philosophie de RTL : Tester comme un utilisateur
      3. Rendu de composants (`render`)
      4. Requêtes de sélection (Queries : getBy, findBy, queryBy...)
      5. Simulation d'événements utilisateur (`user-event`)
      6. Assertions avec Jest (`expect`)
      7. Tests de composants simples et complexes
      8. Tests de hooks personnalisés (`renderHook`)
      9. Mocking de modules et de fonctions (Appels API, etc.)
      10. Tests asynchrones
      11. Tests de contexte et de routage
    3. Tests end-to-end (E2E)
      1. Introduction aux tests E2E (Simuler le parcours utilisateur complet)
      2. Outils populaires : Cypress, Playwright (Aperçu)
      3. Ecriture de scénarios de test E2E de base
    4. Qualité du code et bonnes pratiques
      1. Linting avec ESLint et configuration pour React
      2. Formatage avec Prettier
      3. Conventions de nommage et structure de projet
      4. Ecrire du code lisible et maintenable
      5. Revue de code (Code reviews)
  6. Ecosystème et outils complémentaires
    1. Frameworks meta basés sur React
      1. Next.js : Rendu côté serveur (SSR), génération de site statique (SSG), routage basé sur les fichiers, API Routes, optimisation d'images...
      2. Remix : Focus sur les fondamentaux du web, SSR/SSG, gestion des formulaires, routage imbriqué puissant.
      3. Gatsby : Générateur de site statique puissant (focus sur la performance et les sources de données via GraphQL).
      4. Quand utiliser un framework meta vs CRA/Vite ?
    2. React Native (Aperçu)
      1. Introduction à React Native : Créer des applications mobiles natives avec React
      2. Différences clés avec React pour le web
      3. Composants spécifiques à la plateforme
    3. Utiliser TypeScript avec React
      1. Introduction à TypeScript et ses avantages (Typage statique)
      2. Configuration d'un projet React avec TypeScript
      3. Typer les composants fonctionnels (`React.FC`) et les props (`interface`, `type`)
      4. Typer le state (`useState`)
      5. Typer les événements
      6. Typer les refs (`useRef`)
      7. Typer le Context (`createContext`)
      8. Typer les hooks personnalisés
      9. Utilisation de types provenant de bibliothèques tierces (`@types/...`)
    4. Server Components (Concept)
      1. Introduction aux React Server Components (RSC) - (Principalement via Next.js/Remix)
      2. Différences entre Server Components et Client Components
      3. Avantages (Réduction du bundle JS client, accès direct au backend)
      4. Modèle mental et utilisation
  7. Mise en Production et Suivi
    1. Processus de build
      1. Comprendre le build de production (`npm run build` / `yarn build`)
      2. Optimisations du build (Minification, bundling, tree shaking)
      3. Variables d'environnement (`.env`)
    2. Stratégies de déploiement
      1. Déploiement sur des plateformes statiques (Netlify, Vercel, GitHub Pages)
      2. Déploiement sur des serveurs traditionnels (Node.js/Express servant le build)
      3. Déploiement dans des conteneurs (Docker)
      4. Intégration continue et déploiement continu (CI/CD) avec GitHub Actions, GitLab CI, etc.
    3. Monitoring et debugging en production
      1. Outils de suivi d'erreurs (Sentry, LogRocket)
      2. Analyse de performance (Web Vitals, Lighthouse CI)
      3. Techniques de débogage avancées
  8. Projet Pratique et Conclusion
    1. Projet de synthèse
      1. Définition du projet (Ex: Application e-commerce, tableau de bord, réseau social simple)
      2. Application pratique des concepts appris tout au long du cours
      3. Phases du projet : Planification, développement, test, déploiement
    2. Conclusion et prochaines étapes
      1. Résumé des compétences acquises
      2. Comment rester à jour avec l'écosystème React (Veille technologique)
      3. Pistes pour aller plus loin (GraphQL, WebSockets, micro-frontends, design systems)
      4. Contribution à l'Open Source