Dans le cadre de ma formation licence professionnelle développeur web, j’ai réalisé un TP afin de découvrir ReactJS. L’objectif de ce travail était de découvrir la bibliothèque ReactJS et ses hooks (useState, useReducer et useContext).
Nous devions réaliser en une après-midi un petit site internet composé de 3 pages.
Sur la page d’accueil devait être présente une carte interactive implémentée avec le plugin React-Leaflet. Cette carte devait être centrée sur la localisation de l’utilisateur si ce dernier l’acceptait. Cela m’a permis d’utiliser un plugin React (React-Leaflet) mais également de découvrir la web API Navigator de Javascript L’utilisateur devrait pouvoir, au clic, ajouter des marqueurs sur la carte. Ces marqueurs devaient être gérés depuis une autre page.
En effet, sur la seconde page, nous devons lister tous les marqueurs présents sur la map avec leurs données, à savoir: leur identifiant et leurs coordonnées. Il devait être possible de les supprimer individuellement. Ça m'a permis de découvrir le hooks useContext de React qui est un moyen de partager des valeurs entre des composants savoir avoir à explicitement passer une prop à chaque niveau de l’arborescence. Ensuite, comme pour l’ajout du marqueur, j’ai réalisé un Reducer avec le hooks useReducer de React pour la suppression du marqueur.
Sur la troisième page, nous devions avoir un formulaire avec un champ prénom et nom et afficher ces données sur les autres pages si elles sont existantes.
