Découvrez notre formation

REACTJS & TAILWIND CSS

JOUR 1 — Fondamentaux renforcés & Hooks essentiels

MODULE 1 — Remise à niveau et consolidation des bases React (1h30)

Rappel de l'architecture d'un composant fonctionnel React moderne
JSX avancé : fragments, rendu de listes avec key, rendu conditionnel ternaire et &&
Props : valeurs par défaut, destructuring, propagation avec le spread operator
useState en profondeur : mise à jour fonctionnelle, état complexe (objets, tableaux imbriqués)
useRef : accès au DOM, stockage de valeur persistante sans déclencher de re-render
Gestion des événements : event object, prévention du comportement par défaut, délégation

Atelier pratique : Exercice : refactorisation d'un composant de formulaire existant en appliquant les bonnes pratiques

MODULE 2 — useEffect : synchronisation et effets de bord (2h)

Comprendre le cycle de vie d'un composant fonctionnel et le rôle de useEffect
Les 3 formes de useEffect : sans dépendances, avec dépendances, avec fonction de cleanup
Cas d'usage courants : appels API, synchronisation avec le DOM, abonnements, timers
Pièges classiques : dépendances manquantes, boucles infinies, mise à jour sur composant démonté
La fonction de cleanup en pratique : AbortController, clearInterval, removeEventListener
useLayoutEffect vs useEffect : différences et cas d'usage spécifiques

Atelier pratique : Atelier : connexion d'un composant de liste à une API REST avec gestion complète des états loading / error / success

MODULE 3 — useCallback et useMemo : optimiser sans sur-optimiser (1h30)

Comprendre pourquoi React re-rend les composants et à quel coût réel
useMemo : mémoriser le résultat d'un calcul coûteux, gestion des dépendances
useCallback : mémoriser une référence de fonction stable pour les props de callbacks
React.memo : empêcher le re-render d'un composant enfant si ses props sont inchangées
Règle d'or : mesurer avant d'optimiser — utiliser le Profiler React DevTools
Exemples concrets où ces hooks font une vraie différence vs cas où ils sont inutiles

Atelier pratique : Atelier : identification et correction de re-renders inutiles sur un composant de tableau de données

MODULE 4 — useReducer : gérer un état complexe (2h

Limites de useState pour les états complexes et interdépendants
useReducer : reducer, action, dispatch — comprendre le pattern par analogie avec Redux
Structure d'une action typée : { type, payload } et gestion en switch/case
Immutabilité en pratique : mise à jour d'objets et de tableaux imbriqués sans mutation
Combiner useReducer avec useContext pour un state global léger sans librairie
Comparatif useReducer vs useState : quand choisir l'un ou l'autre

Atelier pratique : Atelier : remplacement de plusieurs useState par un useReducer sur un formulaire multi-étapes

JOUR 2 — Architecture, Routing & State Management

MODULE 5 — Architecture d'un projet React (1h30)

Structure de dossiers recommandée : organisation par fonctionnalité ou par couche
Rôle et organisation des dossiers clés : /components, /hooks, /pages, /services, /lib, /routes, /data
Séparation des responsabilités : composants de présentation vs composants logiques
Création de hooks personnalisés (custom hooks) pour extraire et réutiliser la logique
Exemples concrets : useFetch, useLocalStorage, useDebounce, useForm

Conventions de nommage, barrel exports (index.js) et bonnes pratiques d'import
Revue d'architecture live : analyse d'un projet existant et identification des axes d'amélioration
Atelier pratique : Atelier : restructuration de l'arborescence d'un projet et extraction de la logique métier dans des hooks custom

MODULE 6 — React Router v6 : routing avancé (1h30)

Rappel des concepts de base : BrowserRouter, Routes, Route, Link, NavLink
Routes imbriquées (nested routes) et composant Outlet pour les layouts partagés
Paramètres d'URL dynamiques avec useParams et query strings avec useSearchParams
Navigation programmatique avec useNavigate
Routes protégées (PrivateRoute) : gestion de l'authentification côté client
Lazy loading des pages avec React.lazy + Suspense pour optimiser le chargement initial
Gestion des erreurs de routing avec errorElement

Atelier pratique : Atelier : mise en place du routing complet d'une application multi-pages avec une route protégée

MODULE 7 — Context API et gestion d'état globale (2h)

useContext : partager des données dans l'arbre de composants sans prop drilling
Créer un Context robuste : Provider, valeur par défaut, bonne organisation
Pattern « Context + Reducer » : un store global léger sans librairie externe
Optimiser les contextes : éviter les re-renders inutiles avec useMemo et la découpe des contextes
Introduction à Redux Toolkit : configureStore, createSlice, useSelector, useDispatch
RTK Query : fetching de données avec cache intégré, invalidation, refetch automatique
Quand utiliser Context, quand passer à Redux : critères de décision concrets

Atelier pratique : Atelier : implémentation d'un contexte d'authentification global, puis extension avec Redux Toolkit

MODULE 8 — Appels API et données asynchrones (2h)

Fetch API et Axios : comparatif, gestion des erreurs HTTP, configuration d'une instance globale
Pattern service layer : centraliser les appels API dans des fichiers dédiés (/services)
Gestion cohérente des états asynchrones dans toute l'application : loading, error, data
Introduction à React Query (TanStack Query) : useQuery, useMutation, cache, invalidation
Comparatif useEffect + fetch vs React Query : gains en lisibilité et en fiabilité
Pagination simple et chargement infini avec React Query
Variables d'environnement Vite (.env) pour les URLs d'API

Atelier pratique : Atelier : remplacement des useEffect de fetching par React Query sur les pages de liste et de détail

JOUR 3 — Tailwind CSS v4, Performance & Bonnes pratiques

MODULE 9 — Tailwind CSS v4 : fondamentaux et intégration React (2h)

Philosophie utility-first : écrire le style directement dans le JSX, sans fichiers CSS séparés
Tailwind CSS v4 : nouveautés clés — moteur Oxide (Rust), 5× plus rapide, installation simplifiée
Configuration CSS-first : plus de tailwind.config.js, tout se définit avec la directive @theme
Installation dans un projet Vite + React : plugin @tailwindcss/vite, import en une seule ligne
Les utilitaires essentiels : spacing, typography, colors, flexbox, grid, borders, shadows
Responsive design avec les préfixes de breakpoints : sm:, md:, lg:, xl: — approche mobile-first
Dark mode avec la variante dark:
États interactifs : hover:, focus:, active:, disabled:, group-hover:

Atelier pratique : Atelier : intégration de Tailwind CSS v4 dans le projet, remplacement des styles CSS par des classes utilitaires

MODULE 10 — Tailwind CSS v4 : composants, design system et bonnes pratiques (2h)

Créer des composants React réutilisables et stylisés avec Tailwind
Gérer les variantes de style via les props : Button (primary / secondary / danger), Badge, Card
La directive @layer et @utility : créer des classes composées réutilisables dans le CSS
Introduction à shadcn/ui : installer et customiser des composants accessibles prêts à l'emploi
Animations et transitions : transition-, duration-, ease-, animate- et keyframes personnalisées
Organisation et conventions pour maintenir un projet Tailwind lisible sur le long terme

Atelier pratique : Atelier : construction d'une bibliothèque de composants UI cohérente — Bouton, Carte, Badge, Champ de formulaire

MODULE 11 — Performances et optimisation React (1h30)

Comprendre le cycle de rendu React : quand et pourquoi un composant re-rend
Profiler une application avec React DevTools : identifier les composants lents
Récapitulatif des outils de memoïsation : React.memo, useMemo, useCallback — quand les utiliser
Code splitting par route avec React.lazy et Suspense
Optimisation des listes longues : virtualisation avec TanStack Virtual
Chargement paresseux des images : attribut loading="lazy" et Intersection Observer
Mesurer l'impact réel : Lighthouse, Core Web Vitals (LCP, INP, CLS)

Atelier pratique : Atelier : audit de performance puis application des optimisations sur un composant de liste chargé depuis une API

MODULE 12 — Synthèse et mise en application sur projet réel (1h30)

Récapitulatif des patterns vus en formation : bonnes pratiques React et Tailwind
Checklist de qualité pour un projet React en production : linting, formatage, conventions Git
Erreurs courantes et comment les éviter : dépendances useEffect, mutations d'état directes, clés React
Mise en application guidée : chaque participant implémente une fonctionnalité complète sur son propre projet en mobilisant les notions de la formation
Revue de code collective et retours personnalisés du formateur
Questions / réponses et ressources pour continuer à progresser
Bilan de fin de formation et QCM de validation des acquis