Formation ReactJS - Développement d'applications Web

Jour 1 - Matin

Introduction et rappels ES6+

• Outils de développement et IDE (environnement de développement)
• Extension navigateur : React Developer Tools
• Packaging : npm / pnpm et bundlers (notions de build)
• Principes de transpilation (Babel / SWC selon contexte)
• Démarrer un projet moderne avec Vite (remplacement de Create React App)
• Rappels ES6+ : modules, destructuring, spread / rest, fonctions fléchées, async / await

Exemples de travaux pratiques (à titre indicatif)

• Installation des outils et initialisation du projet
• Rappels et exercices ES6+ ciblés sur les besoins React

Le framework React

• Principes de base de React et comparaison avec d'autres approches (Vue, Angular...)
• Philosophie "composant" : construire l'interface par composition de composants
• Virtual DOM et réconciliation (mise à jour efficace du DOM)
• Structure de projet, premiers composants et stratégie de débogage

Le JSX et les composants

• Définition d'un élément React (arborescence d'éléments virtuels)
• Rendu côté navigateur : createRoot (React 18+)
• Syntaxe JSX : expressions JavaScript, attributs, rendu conditionnel de base
• Composants fonctionnels : conventions, découpage et composition parent / enfant

Exemples de travaux pratiques (à titre indicatif)

• Création d'un composant de base
• Imbrication de composants et composition d'une page simple

Jour 1 - Après-midi

Les props et la communication

• Définition des props et transmission de données aux composants enfants
• Accéder aux props dans un composant fonctionnel
• La prop children (composition)
• Déclencher des évènements via callbacks (communication enfant > parent)

Exemples de travaux pratiques (à titre indicatif)

• Utilisation des props et de children dans plusieurs composants
• Mise en place d'une communication enfant > parent

Etat local, évènements et rendu conditionnel

• Notion d'état local : useState (bases)
• Syntaxe des évènements dans le JSX et gestion des handlers
• Rendu conditionnel (opérateur &&, opérateur ternaire)
• Découpage d'un composant : lisibilité et responsabilités

Exemples de travaux pratiques (à titre indicatif)

• Mise en place d'un état local (compteur / filtre / toggle)
• Gestion d'évènements et rendu conditionnel dans un composant

Jour 2 - Matin

Les Hooks (bases)

• useEffect : effets, dépendances, bonnes pratiques pragmatiques
• Règles des Hooks et erreurs fréquentes
• Custom hooks simples : extraire une logique réutilisable (repères)
• Quand utiliser un état local vs dériver une valeur (repères)

Exemples de travaux pratiques (à titre indicatif)

• Premier useEffect (chargement / initialisation)
• Création d'un custom hook simple

Listes, fragments et formulaires

• Listes (map, filter) et gestion des clés (key)
• Fragments
• Composants contrôlés : champs de formulaire et validations simples
• Utilisation de refs (repères) : quand c'est utile

Exemples de travaux pratiques (à titre indicatif)

• Création d'une liste avec des données
• Gestion d'un formulaire simple (ajout / suppression / validation minimale)

Jour 2 - Après-midi

Immutabilité et organisation de l'état (préparation)

• Immutabilité : pourquoi c'est important (exemples simples)
• Mises à jour courantes : spread, map, filter (copie et mise à jour)
• Etat local vs état partagé : quand ça commence à devenir difficile
• "Remonter l'état" dans le composant parent : principe et exemple simple
• Préparer la suite : vocabulaire (action, reducer) - repères

Exemples de travaux pratiques (à titre indicatif)

• Refactor d'un écran : remonter un état et éviter des incohérences
• Mise à jour d'une liste d'objets de façon immuable (map / spread)

Jour 3 - Matin

Le routage et la navigation

• Construire une SPA avec React Router (version actuelle)
• Le router, les routes et les liens de navigation
• Navigation et redirections (repères)
• Paramètres d'URL et routes imbriquées (repères)
• Gestion d'une page non trouvée (404)

Exemples de travaux pratiques (à titre indicatif)

• Mise en place du routage (liste / détail)
• Gestion d'une route avec paramètre (id) et d'une page 404

Jour 3 - Après-midi

Etat centralisé (bases)

• Pourquoi un état centralisé : cas typiques et limites de l'état local
• Notions : actions, reducers, store (vocabulaire et rôle)
• Branchement à React : Provider
• Lire / mettre à jour l'état : hooks useSelector et useDispatch
• Aperçu : Redux et une alternative légère (Zustand) - dans quels cas

Exemples de travaux pratiques (à titre indicatif)

• Intégration d'un store simple dans l'application (lecture / écriture)
• Ajout d'une action et d'un reducer simple, puis consommation côté UI

Introduction aux tests unitaires (initiation)

• Présentation des outils : Vitest (ou Jest selon contexte) + React Testing Library
• Réaliser un premier test : rendu d'un composant et assertions simples
• Récupérer des éléments HTML (queries) et vérifier le contenu
• Simuler des interactions (clic, saisie) et vérifier le comportement

Exemples de travaux pratiques (à titre indicatif)

• Ecrire un test de rendu simple
• Ecrire un test d'interaction (clic / saisie) sur un composant

Ouverture : perspectives et bonnes pratiques (repères)

• Server Side Rendering (SSR) : principe, avantages et contraintes (aperçu)
• Aperçu avec Next.js (repères)
• React Native : principes et différences avec React Web (repères), aperçu d'Expo
• Bonnes pratiques : découpage en composants, lisibilité, limiter les re-renders (repères)