React et Next.js : construire des applications web modernes

Questions sur cette formation

Ce que vous saurez faire

• Développement d'interfaces React (composants, props, hooks, formulaires contrôlés)
• Gestion d'état React (useState, useReducer, Context, hooks personnalisés)
• Next.js App Router (routing, Server Components, Server Actions, Route Handlers)
• Validation de données avec Zod et authentification par session
• Tests automatisés avec Vitest et Testing Library
• Optimisation des Core Web Vitals et déploiement sur Vercel ou VPS

À propos de cette formation

Public visé : Développeurs débutants qui maîtrisent les bases de JavaScript (fonctions, tableaux, DOM, fetch), étudiants en informatique, intégrateurs et freelances de Dakar, Thiès, Abidjan, Bamako, Cotonou ou de la diaspora qui veulent livrer des applications web modernes avec React et Next.js.

Programme

Un chemin module par module : leçons, exercices, quiz et projets à rendre.

1. 1

   Module 1· 12 exercices

   Démarrer avec React : composants, JSX et props

   Tu crées ton premier projet React avec Vite et tu découpes la carte d'un restaurant en composants réutilisables.

   • Pourquoi React : du DOM à la main aux composantsAperçu gratuit3 exercices18 min
   • Créer le projet avec Vite et écrire du JSXAperçu gratuit3 exercices20 min
   • Les props : des composants réutilisablesAperçu gratuit3 exercices20 min
   • Composer une page : children, listes simples et stylesAperçu gratuit3 exercices20 min
   • Support du module (PDF)Aperçu gratuit5 min
   • Quiz : composants, JSX et propsQuiz de validation
   • La carte de Chez Fatou en composants ReactProjet à rendre
2. 2

   Module 2· 13 exercices

   State et événements : rendre l'interface interactive

   Tu donnes une mémoire à tes composants avec useState, tu réagis aux clics et tu construis un panier dont le total se calcule tout seul.

   • useState : la mémoire d'un composant3 exercices20 min
   • Gérer les événements et mettre à jour sans muter3 exercices20 min
   • Lever le state : partager des données entre composants3 exercices18 min
   • State dérivé : calculer plutôt que stocker4 exercices18 min
   • Support du module (PDF)5 min
   • Quiz : state et événementsQuiz de validation
   • Le panier interactif de Chez FatouProjet à rendre
3. 3

   Module 3· 12 exercices

   Listes, formulaires et validation

   Tu affiches des listes filtrées et triées, tu construis un formulaire de commande contrôlé et tu le valides avant l'envoi.

   • Afficher, filtrer et trier des listes avec des clés stables3 exercices18 min
   • Formulaires contrôlés : champs, listes déroulantes et cases à cocher3 exercices20 min
   • Valider les saisies : numéros, champs obligatoires et messages d'erreur3 exercices20 min
   • Soumettre proprement : états d'envoi, blocage du double clic et confirmation3 exercices18 min
   • Support du module (PDF)5 min
   • Quiz : listes et formulairesQuiz de validation
   • Le formulaire de commande validéProjet à rendre
4. 4

   Module 4· 12 exercices

   Effets, données et hooks personnalisés

   Tu charges des données depuis une API avec chargement, erreur et annulation, puis tu ranges cette logique dans tes propres hooks.

   • useEffect : synchroniser un composant avec l'extérieur3 exercices20 min
   • Charger des données : chargement, erreur et liste vide3 exercices20 min
   • Écrire ses propres hooks : useFetch et useLocalStorage3 exercices20 min
   • useRef, useMemo et les effets dont tu n'as pas besoin3 exercices18 min
   • Support du module (PDF)5 min
   • Quiz : effets et hooksQuiz de validation
   • Le menu du jour chargé depuis une APIProjet à rendre
5. 5

   Module 5· 12 exercices

   État global et architecture d'une application React

   Tu centralises les transitions d'état avec useReducer, tu partages le panier avec Context et tu organises le projet pour qu'il tienne dans la durée.

   • useReducer : centraliser les transitions d'état3 exercices20 min
   • Context : partager un état sans passer les props partout3 exercices18 min
   • Un panier global persistant : reducer, Context et localStorage3 exercices20 min
   • Organiser les dossiers et choisir une bibliothèque d'état3 exercices18 min
   • Support du module (PDF)5 min
   • Quiz : état global et architectureQuiz de validation
   • L'application de commande complète de Chez FatouProjet à rendre
6. 6

   Module 6· 12 exercices

   Next.js : App Router, rendu serveur et SEO

   Tu passes à Next.js : routes par fichiers, layouts, Server et Client Components, données chargées sur le serveur et métadonnées pour Google.

   • De React à Next.js : pourquoi le rendu serveur compte3 exercices18 min
   • Routing par fichiers, layouts et routes dynamiques3 exercices20 min
   • Server Components, Client Components et chargement des données3 exercices20 min
   • Métadonnées, images et SEO d'une application Next.js3 exercices18 min
   • Support du module (PDF)5 min
   • Quiz : Next.js App RouterQuiz de validation
   • Le site Next.js du salon Awa BeautéProjet à rendre
7. 7

   Module 7· 12 exercices

   Server Actions, validation serveur et authentification

   Tu traites les formulaires sur le serveur avec les Server Actions et Zod, tu exposes une API avec un Route Handler et tu protèges l'espace d'administration.

   • Server Actions : traiter un formulaire sans écrire d'API3 exercices20 min
   • Valider côté serveur avec Zod et renvoyer les erreurs au formulaire3 exercices20 min
   • Route Handlers : exposer une API propre3 exercices18 min
   • Authentification : session, middleware et pages protégées3 exercices22 min
   • Support du module (PDF)5 min
   • Quiz : Server Actions et authentificationQuiz de validation
   • La réservation en ligne et l'espace géranteProjet à rendre
8. 8

   Module 8· 12 exercices

   Tests, performance et mise en production

   Tu testes la logique et les composants, tu mesures et améliores la performance sur mobile, puis tu déploies l'application et tu la présentes dans ton portfolio.

   • Tester la logique avec Vitest3 exercices20 min
   • Tester les composants avec Testing Library3 exercices20 min
   • Performance : Core Web Vitals, poids du JavaScript et réseau mobile3 exercices18 min
   • Déployer : Vercel ou VPS, variables d'environnement et checklist de livraison3 exercices20 min
   • Support du module (PDF)5 min
   • Quiz : tests, performance et déploiementQuiz de validation
   • Projet final : l'application Awa Beauté testée et en ligneCapstone

9. Certificat inclus

Après la formation

Ce qui vous attend une fois la formation terminée

Services facultatifs et gratuits pour les apprenants. Ce n'est pas une promesse d'emploi.