Ce TP a pour objectif de mettre en pratique l'utilisation des Hooks React (useState, useEffect, useContext) ainsi que la création de Hooks personnalisés.
- Cloner le dépôt :
git clone https://github.com/pr-daaif/tp-react-hooks.git
cd tp-react-hooks- Créer votre propre dépôt sur Github et changer le remote :
# Supprimer le remote origine
git remote remove origin
# Ajouter votre nouveau remote
git remote add origin https://github.com/[votre-username]/tp-react-hooks.git
# Premier push
git push -u origin main- Installer les dépendances :
npm install- Lancer l'application :
npm startPour chaque exercice :
- Lisez attentivement l'énoncé
- Implémentez la solution
- Testez votre implémentation (pensez à faire des copies d'écran)
- Mettez à jour la section correspondante dans ce README avec :
- Une brève explication de votre solution
- Des captures d'écran montrant le fonctionnement
- Les difficultés rencontrées et comment vous les avez résolues
- Commitez vos changements avec un message descriptif
- 1.1 Modifier le composant ProductSearch pour utiliser la recherche
- 1.2 Implémenter le debounce sur la recherche
- 1.3 Documenter votre solution ici
J’ai déplacé l’état de l’input dans le composant parent pour le partager plus facilement avec ProductList via les props. Ensuite, j’ai passé le searchTerm à ProductList pour l’utiliser afin de filtrer les produits reçus du hook useProductSearch. Cela permet d’afficher uniquement les produits correspondant au terme de recherche saisi par l’utilisateur.
Pour éviter les rendus inutiles lors de la saisie rapide, j’ai créé un hook personnalisé de debounce, qui retarde l’exécution après un court délai. Intégré dans ProductSearch, il réduit les re-renders et améliore la fluidité de l’application.
De plus, si aucun produit ne correspond à la recherche, un message "Not Found" s'affiche pour informer l'utilisateur.
- 2.1 Créer le LanguageContext
- 2.2 Ajouter le sélecteur de langue
- 2.3 Documenter votre solution ici
J’ai créé le LanguageContext pour gérer les préférences de langue dans l’application. Cela permet de partager l’état de la langue sélectionnée entre les différents composants sans avoir à passer les props manuellement à chaque niveau.
J’ai également ajouté un sélecteur de langue dans le composant LanguageSelector, qui permet à l’utilisateur de changer la langue de l’interface. Lorsqu’un utilisateur sélectionne une langue, l’état est mis à jour dans le LanguageContext, ce qui entraîne une mise à jour automatique des composants qui consomment ce contexte, comme ThemeToggle et ProductList.
- 3.1 Créer le hook useDebounce
- 3.2 Créer le hook useLocalStorage
- 3.3 Documenter votre solution ici
J'ai créé deux hooks personnalisés : useDebounce et useLocalStorage.
Le hook useDebounce permet de retarder la mise à jour d'une valeur jusqu'à ce qu'un certain délai soit écoulé.
Le hook useLocalStorage gère la synchronisation d'un état avec le localStorage du navigateur.
- 4.1 Ajouter le bouton de rechargement
- 4.2 Implémenter la pagination
- 4.3 Documenter votre solution ici
J'ai ajouté une fonction de rechargement pour permettre à l'utilisateur de rafraîchir la liste des produits. Cette fonction est appelée lorsque l'utilisateur clique sur le bouton "Recharger". Le bouton de rechargement a été intégré dans le composant ProductList, et il est stylisé pour s'adapter à l'interface existante.
Pour implémenter la pagination, j'ai utilisé le hook useState pour suivre la page actuelle (currentPage). J'ai ensuite intégré les paramètres skip et limit dans l'appel API pour gérer la pagination. Le paramètre skip indique combien de produits doivent être ignorés en fonction de la page actuelle, tandis que limit définit le nombre de produits à récupérer par page.
J’ai aussi ajouté des fonctions pour gérer la navigation, comme previousPage et nextPage, qui mettent à jour la page actuelle tout en vérifiant que l’utilisateur ne dépasse pas les limites (première ou dernière page). J’ai intégré des boutons "Précédent" et "Suivant" dans l’interface. Ces boutons se désactivent automatiquement quand l’utilisateur atteint la première ou la dernière page, ce qui évite toute confusion.
- Ajoutez l'URL de votre dépôt Github dans Classroom et envoyer la réponse dès le démarage de votre projet.
- Les push doivent se faire au fûr et à mesure que vous avancez dans votre projet.
- Le README.md doit être à jour avec vos réponses et captures d'écran.
- Chaques exercice doit faire l'objet d'au moins un commit avec un message mentionnant le numéro de l'exercice.