Un projet web

PWA permettant d’ajouter et de gérer des markers sur une carte interactive en ReactJS avec React-Leaflet

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).

Description du projet

Ce que m’a permis de pratiquer ce TP :
  • installation et utilisation d’un plugin ReactJS, en l’occurence ReactJS
  • utilisation de l’API Javascript Navigator
  • découverte et utilisation des hooks React suivant: useContext, useState, useReducer
  • déploiement d’une application web sur Heroku
  • intégration d’une application React avec SASS

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.

Technologies et outils utilisés

Le projet en image

capture ecran de l'accueil de l'application react permettant d'ajouter et de gerer des marqueurs sur une map affiché avec Leaflet React capture ecran de la page gestion marqueurs de l'application react permettant d'ajouter et de gerer des marqueurs sur une map affiché avec Leaflet React capture ecran de la page des gestions de données de l'application react permettant d'ajouter et de gerer des marqueurs sur une map affiché avec Leaflet React

Projets similaires

Vous êtes encore là ? Je suis flatté, et si nous nous appelions ?

Me contacter