React.js : créer sa première application moderne
Par DevWorkWeb
Ce cours part du problème que React résout (mettre à jour une interface de façon déclarative) puis construit progressivement une application React complète avec Vite : composants, props, state, gestion d'événements, formulaires, effets de bord, appels API et routage.
Ce que vous allez apprendre
Prérequis
Avoir suivi le cours « JavaScript de zéro : les fondamentaux » ou avoir un niveau JavaScript équivalent (fonctions, arrays, async/await).
Public cible
- • Développeurs à l'aise en JavaScript souhaitant découvrir un framework front-end
- • Étudiants ayant suivi le cours « JavaScript de zéro »
Programme détaillé
12 modules · 36 leçons1. Pourquoi React ? 3 leçons
Le problème que React résout : mettre à jour l'interface de façon déclarative plutôt que manipuler le DOM à la main.
- Le problème du DOM manuel 10 min
- React : bibliothèque, pas framework 8 min
- Panorama rapide des alternatives (Vue, Svelte) 8 min
2. Vite 3 leçons
Créer et faire tourner un projet React moderne avec l'outil de build Vite.
- Créer un projet avec Vite 10 min
- Structure d'un projet Vite + React 10 min
- Serveur de développement et Hot Module Replacement 8 min
3. JSX 3 leçons
La syntaxe qui permet d'écrire du HTML directement dans du JavaScript.
- Syntaxe JSX et règles 12 min
- Expressions JavaScript dans le JSX 10 min
- Rendu conditionnel et listes 12 min
4. Components 3 leçons
Découper l'interface en components fonctionnels réutilisables et les composer entre eux.
- Components fonctionnels 12 min
- Composition de components 12 min
- Fragments et clés de liste 8 min
5. Props 3 leçons
Faire circuler des données d'un component parent vers ses components enfants.
- Passer des props 10 min
- Props par défaut 8 min
- children et composition avancée 12 min
6. State 3 leçons
Gérer les données qui changent dans le temps avec le hook useState.
- useState : déclarer un état 12 min
- Mettre à jour l'état correctement (immutabilité) 14 min
- État dérivé vs état stocké 10 min
7. Events 3 leçons
Gérer les interactions utilisateur : clics, saisie, et le comportement par défaut du navigateur.
- Gérer les événements (onClick, onChange) 10 min
- Passer des données via les handlers 10 min
- Empêcher le comportement par défaut 8 min
8. Forms 3 leçons
Construire des formulaires contrôlés, où React garde la source de vérité des valeurs saisies.
- Components contrôlés 12 min
- Validation de formulaire 12 min
- Soumission et retour utilisateur 10 min
9. useEffect 3 leçons
Synchroniser un component avec un système externe (API, timer, DOM) et gérer le cycle de vie.
- Le cycle de vie d'un component 10 min
- useEffect et le tableau de dépendances 14 min
- Nettoyer un effet (cleanup) 10 min
10. API 3 leçons
Récupérer des données depuis une API externe et gérer les états de chargement et d'erreur.
- Appeler une API avec fetch dans React 12 min
- Gérer loading, erreur et données 12 min
- Introduction à un custom hook de fetch 12 min
11. Routing 3 leçons
Naviguer entre plusieurs pages dans une application React avec React Router.
- Installer et configurer React Router 10 min
- Routes et navigation 10 min
- Routes dynamiques et paramètres 12 min
12. Organisation d'un projet 3 leçons
Structurer un projet React pour qu'il reste lisible et maintenable en grandissant.
- Structurer les dossiers (components, hooks, pages) 10 min
- Bonnes pratiques de nommage et de réutilisabilité 8 min
- Préparer le déploiement 10 min
🎯 Projet final
Dashboard développeur connecté à une API
Le projet fil rouge consiste à construire un tableau de bord qui affiche des données récupérées depuis une API publique (par exemple l'API GitHub), avec navigation entre plusieurs vues.
- Accès à vie
- Certificat inclus
- Exercices pratiques
- Mises à jour gratuites