🧪 Exercices React

cette page rassemble des exercices progressifs pour pratiquer React, du local state au contexte. Chaque exercice contient : objectifs, consignes, pistes et un mini-exemple.

🎯 Objectifs

• Consolider useState, props, composition, context et formulaires.
• Pratiquer la structuration de composants et le passage de données.
• Apprendre des patterns simples pour la production d’interfaces réactives.

📚 Fondamentaux rapides

• useState pour l’état local.
• Props / children pour la communication parent → enfant.
• Callbacks pour l’enfant → parent.
• Context pour l’état global (ex : thème).
• Formulaires contrôlés avec validation simple.

🧩 Exercices détaillés

Exercice 1 : Compteur de clics 🎛️

Objectif : utiliser useState et les mises à jour basées sur la valeur précédente.

Consignes :

• Créer un composant Compteur avec un état compteur.
• Afficher la valeur et un bouton pour incrémenter (+1).
• Utiliser setState avec la forme fonctionnelle.

Piste / exemple :

// Exemple minimal - Compteur.jsx
import React, { useState } from 'react';
 
export default function Compteur() {
  const [compteur, setCompteur] = useState(0);
 
  return (
    <div>
      <p>Valeur : {compteur}</p>
      <button onClick={() => setCompteur(prev => prev + 1)}>+1</button>
    </div>
  );
}

Exercice 2 : Transmission de données entre composants 🔁

Objectif : props, children, callback.

Consignes :

• Créer Parent et Enfant.
• Transmettre une valeur via props.
• L’enfant doit appeler un callback pour informer le parent.

Piste / exemple :

// Exemple minimal - Parent.jsx / Enfant.jsx
// Parent.jsx
import React, { useState } from 'react';
import Enfant from './Enfant';
 
export default function Parent() {
  const [message, setMessage] = useState('Salut');
 
  return (
    <div>
      <Enfant message={message} onNotify={msg => setMessage(msg)} />
      <p>Message actuel: {message}</p>
    </div>
  );
}
 
// Enfant.jsx
export default function Enfant({ message, onNotify, children }) {
  return (
    <div>
      <p>Reçu: {message}</p>
      <button onClick={() => onNotify('Clic depuis l\'enfant')}>Notifier</button>
      {children}
    </div>
  );
}

Exercice 3 : Page 404 🔎

Objectif : créer un composant d’erreur simple et navigable.

Consignes :

• Créer Page404 avec message et lien vers l’accueil.

Piste :

// Page404.jsx
export default function Page404() {
  return (
    <main>
      <h1>404 — Page non trouvée</h1>
      <p>Retournez à <a href="/">l'accueil</a></p>
    </main>
  );
}

Exercice 4 : Liste d’articles de blog 📰

Objectif : afficher des données via .map().

Consignes :

• Déclarer un tableau d’objets (titre, résumé).
• Afficher une liste d’articles avec clé unique.

Piste :

// Articles.jsx
const articles = [
  { id: 1, titre: 'Intro React', resume: 'Bases de React' },
  { id: 2, titre: 'useState', resume: 'Gérer l\'état local' },
];
 
export default function Articles() {
  return (
    <ul>
      {articles.map(a => (
        <li key={a.id}>
          <h3>{a.titre}</h3>
          <p>{a.resume}</p>
        </li>
      ))}
    </ul>
  );
}

Exercice 5 : Menu de navigation 🧭

Objectif : créer une NavBar responsive simple.

Consignes :

• Composant NavBar avec une liste de liens.
• Tester styles et responsive (CSS/Sass).

Astuce : utiliser flexbox et points de rupture simples.

Exercice 6 : Formulaire de contact ✉️

Objectif : formulaires contrôlés et validation simple.

Consignes :

• Champs : nom, email, message.
• useState pour les valeurs.
• Valider présence et format email avant submission.

Piste :

// ContactForm.jsx (extrait)
function validateEmail(email) {
  return /\S+@\S+\.\S+/.test(email);
}

Exercice 7 : Contexte React (thème clair/sombre) 🌗

Objectif : utiliser React Context pour un thème global.

Consignes :

• Créer ThemeContext et un provider.
• Ajouter un bouton pour basculer thème depuis n’importe quel composant.

Piste : stocker “light” | “dark” et appliquer une classe racine.

❓ Mini-quiz (3 questions rapides)

1. Quel hook pour l’état local ? (Réponse : useState)
2. Comment passer une fonction de l’enfant au parent ? (Réponse : callback via props)
3. Quand utiliser Context ? (Réponse : état partagé entre beaucoup de composants, pas pour tout)

🔗 Ressources

• Repo du cours : https://github.com/micmc422/TW3.git 
• Docs React : https://fr.reactjs.org/ 
• Guide useContext : https://fr.reactjs.org/docs/context.html 

🏁 TL;DR

• Exercices progressifs : state → props → context → formulaires.
• Ajouter exemples, objectifs et pistes pour mieux guider l’apprentissage.
• Utiliser les composants réutilisables et respecter la structure pédagogique du repo.

Retour au dépôt GitHub