← Retour au programme
Module 07

React : construire des interfaces dynamiques

Abandonnez la manipulation manuelle du DOM et adoptez une approche déclarative.

React révolutionne la construction d'interfaces en vous permettant de décrire ce que l'écran doit afficher pour un état donné.

Module suivant →

Philosophie

Pensez en composants, pas en pages.

Prérequis & Outils

  • JavaScript moderne (ES6+)
  • HTML/CSS
ReactJSXHooksComposants

Objectifs du module

  • ✦Créer des composants réutilisables
  • ✦Gérer l'état avec useState
  • ✦Passer des données avec les props

Ressource complémentaire

React pour les débutants — Cours complet

Ressource complémentaire pour découvrir React à votre rythme.

Contenu du module

Progression pas à pas.

Chaque leçon s'appuie sur la précédente avec un rythme pensé pour laisser de l'espace à la compréhension, à la pratique et à la révision.

Leçon 1

Introduction aux composants React

Comprendre comment diviser l'UI en morceaux réutilisables.

Un composant est une fonction JavaScript qui retourne du JSX.

Les composants peuvent être imbriqués les uns dans les autres.

Les props permettent de passer des données d'un parent à un enfant.

Un composant React simpletsx
function Welcome({ name }) {
  return <h1>Bonjour {name} !</h1>;
}

Exercice pratique

Créer un composant Button

Créez un composant Button qui accepte une prop 'label'.

  1. Déclarez la fonction Button
  2. Acceptez la prop label
  3. Retournez un élément <button>

✓Le composant Button s'affiche correctement.

Projet final

Flashcards interactives de révision

Construisez une application de flashcards pour réviser React.

Critères de réussite

  • ✓L'état contrôle quelle face de la carte est visible
  • ✓Les cartes sont générées à partir d'un tableau de données
  • ✓L'interface est propre

Guide de réalisation

  • 1Utilisez useState pour la face visible
  • 2Utilisez map() pour rendre les cartes

Consolidez vos acquis avant de poursuivre.

Prenez le temps de revoir les concepts difficiles et de refaire les exercices qui méritent une seconde passe.

← Module précédentModule suivant →