Skip to content
✨ Les cours suivant sont disponible : Html, Css, React, Algorithme ✨
cours
✨ React Js
7.0 Projets pratiques avancés
7.2 Exercices de consolidation des connaissances

Exercices de consolidation des connaissances en React

Voici quelques exercices de consolidation des connaissances en React que vous pouvez réaliser :

  1. Créez un composant "Counter" qui affiche un compteur et des boutons "+" et "-" pour augmenter ou diminuer sa valeur. Utilisez l'état local (useState) pour gérer la valeur du compteur et les événements des boutons pour mettre à jour cette valeur.

  2. Construisez un formulaire de saisie avec les champs "Nom" et "Email". Lorsque le formulaire est soumis, affichez les données saisies dans un composant "UserInfo" distinct.

  3. Implémentez une liste de tâches où vous pouvez ajouter, supprimer et marquer les tâches comme terminées. Utilisez un tableau d'objets pour stocker les tâches et utilisez les méthodes de mise à jour de l'état (useState) pour ajouter, supprimer et mettre à jour l'état des tâches.

  4. Créez un composant "Timer" qui affiche un chronomètre et des boutons "Start", "Pause" et "Reset". Utilisez les méthodes de cycle de vie (useEffect) pour gérer le démarrage, la pause et la réinitialisation du chronomètre.

  5. Concevez un composant "TodoList" qui récupère une liste de tâches depuis une API (utilisez fetch ou axios). Affichez ces tâches dans une liste et ajoutez des fonctionnalités pour marquer les tâches comme terminées et supprimer les tâches de la liste.

  6. Créez un composant "Modal" qui affiche une boîte de dialogue modale avec un contenu personnalisé. Utilisez l'état local (useState) pour gérer l'ouverture et la fermeture de la boîte de dialogue.

  7. Construisez un jeu de mémoire où vous devez cliquer sur des cartes pour les retourner. Les cartes doivent être mélangées à chaque nouvelle partie et vous devez garder une trace du score.

Ces exercices vous permettront de mettre en pratique les concepts clés de React tels que les composants, l'état, les événements et les effets. N'hésitez pas à les personnaliser et à les étendre pour en faire des projets plus complets et stimulants. Bonne pratique !