Exercices sur hooks
Avec les hooks, nous arrivons dans les fonctionnalités avancées de React qui se prêtent beaucoup moins à des petits exercices isolés. Nous allons donc commencer à avoir moins d'exercices, mais avec des étapes pour pouvoir tirer parti des fonctionnalités du framework que nous découvrons.
Nous allons aussi continuer à travailler sur l'autonomie et le découpage des problématiques pour que vous puissiez vous habituer à rédiger votre propres consignes détaillées pour vous-même.
Exercice 0
Créez un repository public avec un README sur GitHub, appelez-le
bre05-react-j6Clonez-le dans le dossier
sites/reactde votre IDE.
Exercice 1 : le retour du blog
Pour cet exercice, vous allez utiliser les données de la correction du Mini-Projet Blog, disponible sur Discord.
Étape 1 : charger les données avec un effet
Pour cette première étape, vous allez devoir faire en sorte de charger les données qui étaient contenues dans data.js dans le state du composant Blog lors du premier chargement du composant. Vous allez modifier le composant de sorte qu'il initialise ses données dans un useEffect et utilise son state pour les afficher dans sa boucle.
Cela ne devrait pas en apparence modifier le projet, il sera juste simplement plus conforme aux standards de React.
Étape 2 : sauvegarder l'état de l'App dans le localStorage
Pour cette étape, vous allez devoir sauvegarder l'état du composant App dans le localStorage. Vous allez modifier le composant App de sorte qu'il sauvegarde son state dans le localStorage à chaque modification de son state.
Pour cela, vous allez devoir ajouter un effet dans App qui surveille les modifications de son state et stocke cette information dans le localStorage. Votre App doit donc également initialiser son state à partir des informations contenues dans le localStorage.