React pour débutants est une introduction en neuf laboratoires à la création d’interfaces web avec des composants fonctionnels. À partir d’un projet Vite, vous modifiez du JSX, composez des composants, transmettez des données, gérez l’état local et ajoutez boutons, listes dynamiques, contenu conditionnel et formulaires.
Chaque laboratoire guidé cible un concept. Vous lancez le serveur, observez les changements dans le navigateur intégré et effectuez de petites modifications pour comprendre le workflow par composants.
Ce que vous apprendrez
- Explorer un projet Vite React, installer les dépendances et lancer le serveur
- Créer, exporter, importer et composer des composants fonctionnels
- Écrire du JSX avec expressions, attributs, éléments autofermants et fragments
- Transmettre des valeurs parent-enfant avec props, déstructuration et valeurs par défaut
- Gérer l’état local et ses mises à jour avec le Hook
useState - Attacher des gestionnaires, inspecter les événements et empêcher les actions par défaut
- Effectuer un rendu conditionnel avec ternaires, opérateurs logiques, variables et état
- Mapper des tableaux vers des éléments avec key et créer des champs contrôlés et soumissions
À qui s’adresse ce cours
Le cours vise les débutants React connaissant déjà les bases de JavaScript et souhaitant découvrir les composants fonctionnels avec un guidage. Il convient aussi aux débutants frontend voulant relier JSX, props, état et événements avant une application plus grande.
Prérequis : Les bases de JavaScript sont recommandées : fonctions, variables, tableaux, objets, imports et map. Connaître les éléments et attributs HTML aide. Aucune expérience React ou Vite n’est requise.
Environnement d’apprentissage : Les neuf laboratoires utilisent un WebIDE React Ubuntu 22.04 avec Node.js, npm, éditeur, terminal et aperçu Web 8080. Chaque laboratoire emploie un projet Vite React ; vous lancez le serveur et observez les mises à jour à chaud.
Questions fréquentes
Vais-je construire une application React complète ?
Non. Vous réalisez des exemples ciblés : composants, compteur, vues conditionnelles, listes et formulaire contrôlé. Le cours pose les mécanismes essentiels sans application finale cumulative.
Utilise-t-il des composants fonctionnels ou de classe ?
Il utilise des composants fonctionnels et le Hook useState. Les composants de classe et leurs cycles de vie ne sont pas abordés.
Couvre-t-il le routage, les API ou les Hooks avancés ?
Non. React Router, récupération de données, useEffect, Context, Hooks personnalisés, TypeScript, tests, bibliothèques d’état et déploiement sont hors périmètre.
Dois-je installer React sur mon ordinateur ?
Non. Chaque laboratoire prépare un projet Vite React dans le WebIDE. npm et le serveur fonctionnent dans l’environnement fourni ; aucune configuration locale n’est nécessaire.
