Formation React

Programme de notre formation React

Introduction à React

• UI déclarative
• Composants modulaires
• DOM vs Virtual DOM
• Flux unidirectionnel (props)
• Atelier pratique : Définir et maquetter l’application fil rouge en composants React.

Environnement moderne

• Installation Node.js/npm
• Initialisation avec Vite
• Serveur de développement
• React Developer Tools
• Atelier pratique : Initialiser et lancer l’application React avec Vite.

JSX et rendu d’éléments

• JSX et expressions JavaScript
• Pipeline Babel
• Rendu conditionnel
• Gestion des listes avec clés (key)
• Atelier pratique : Créer un composant dynamique de bienvenue en JSX.

Composants fonctionnels et props

• Création de composants fonctionnels
• Transmission et validation des props
• Utilisation de PropTypes
• Création de composants stateless & stateful
• Lifting State Up : intérêts / limites
• Atelier pratique : Coder un composant « Todo » typé et réutilisable avec transmission de props.

ESNext & TypeScript

• Initialisation d’un projet TS
• Normes & qualité : ESLint, Prettier, Husky, commit-lint
• Atelier pratique : convertir le composant « Todo » en TypeScript strict

Formulaire, Composants avancés & Patterns

• Fragments, Portals, Error Boundaries
• Component Data Flow : props vs state, patterns « compound », « render props »
• Formulaires : React-Hook-Form / Formik + validation Yup
• Atelier pratique : construire un wizard multi-étapes validé en temps réel

Nouveautés React 19

• Gestion des métadonnées (<link>, scripts async)
• Provider amélioré (<Context>)
• Actions serveur et chargement d’assets optimisé
• Actions serveur & Asset Loading
• Nouveaux hooks
• Passage de ref comme prop
• Atelier pratique : Intégrer les nouveautés React 19 en créant un formulaire optimiste utilisant les actions serveur et les nouveaux hooks.

État local et gestion d’événements

• Gestion de l’état local (useState)
• Événements utilisateur (onClick, onChange)
• Concept de lifting state up
• Atelier pratique : Implémenter une interaction utilisateur avec gestion d’état local.

Hooks React

• useEffect pour effets secondaires
• useRef pour références DOM
• Hooks avancés (useMemo, custom hooks)
• Atelier pratique : Écrire un hook useFetch avec cache et annulation de requête.

Styliser les composants

• Approche CSS Modules
• CSS-in-JS (Styled Components)
• Framework CSS Tailwind
• Atelier pratique : Appliquer une stylisation modulaire au layout principal.

Animations

• React Transition Group, Framer Motion (variants, layout animations)
• Atelier pratique : Animer l’apparition d’une liste filtrée avec Suspense.

Bibliothèques UI

• Material UI, AntDesign, React-Bootstrap : sélection & theming
• Stratégies d’anti-dette (tree-shaking, codemods)
• Atelier pratique : Créer un thème MUI personnalisé et accessible

Optimisation des performances

• Pureté, mémoïsation
• Suspense & React Server Components (RSC)
• Atelier pratique : Profiler une liste virtuelle de 10 000 items et l’optimiser

Navigation avec React Router

• Single Page Application (SPA)
• SPA vs MPA, architecture File Router
• Configuration des routes et liens
• Routes imbriquées, redirections, historique, page 404
• Paramètres dynamiques dans les routes
• Atelier pratique : Mettre en place la navigation et les routes dans l’application.

Authentification & Autorisation

• Routes privées, redirection après login
• Layouts dynamiques par rôle utilisateur
• Persistance JWT via custom hook (storage sécurisé, refresh token)
• Atelier pratique : Zone admin sécurisée, rafraîchissement silencieux du token

Architecture Flux et Redux Toolkit

• Architecture Flux, comparaison Context vs Redux
• Création d’un store Redux
• Redux Toolkit pour simplifier Redux
• Context API avancée, pattern provider/consumer
• Redux Toolkit & RTK Query pour le data fetching
• Atelier pratique : Implémenter un état global avec Redux Toolkit pour gérer un panier e-commerce.

Data fetching avec APIs modernes

• Requêtes HTTP avec Fetch et Axios
• Gestion des états de requêtes (loading, succès, erreurs)
• Utilisation avancée avec React Query
• Atelier pratique : Intégrer des données externes API dans l’application avec gestion d’état.

Tests unitaires et d’intégration

• Tests unitaires avec Jest
• Tests d’intégration avec React Testing Library
• Simulation des interactions utilisateurs
• Atelier pratique : Écrire des tests unitaires et d’intégration pour l’application.

Gestion des erreurs et débogage

• Composant Error Boundary
• Gestion des erreurs API
• Outils de débogage (React DevTools, trace updates, console)
• Atelier pratique : Mettre en place une gestion robuste des erreurs avec Error Boundary.

Optimisation du build et des performances

• Minification et bundling
• Chargement différé (lazy loading)
• Optimisation par Tree-shaking
• Atelier pratique : Générer un build optimisé et analyser les performances.

Internationalisation & Accessibilité

• React-Intl / i18next : pluralisation, détection locale, lazy loading
• WCAG / RGAA : composants accessibles par défaut
• Atelier pratique : Switch FR/EN + audit Lighthouse a11y.

Bonnes pratiques et conventions

• Organisation claire du projet
• Utilisation ESLint et Prettier
• Accessibilité et bonnes pratiques de développement
• Atelier pratique : Finaliser, refactorer selon les bonnes pratiques, et présenter l’application complète.