Lab React et React Router

On veut écrire une nouvelle itération de notre Web app de manipulation IoT. On s’intéresse ici à l’arborescence de la Web App.

Voici la structure de l’application :

IoT Sketch

En reprenant l’idée du Lifting State Up dans la démo de React, Proposer une implémentation avec React et React Router de l’application qui stocke son état dans un composant globale et délègue l’affichage des différents éléments de la page à des sous-composants React.

On souhaite avoir des url du type :

On réutilisera les éléments déjà développés dans les labs précédents. (modèle objets, connecteur MQTT/WebSocket).

Flexbox ou CSS Grid Layout

Pour la mise en page de l’application, on utilisera au choix le mode de mise en page flexbox ou ‘CSS grid layouts’, ou les deux.

CSS modules

On utilise les CSS modules pour gérer les feuilles de style.

On veillera a bien nommer les fichier comme décrit dans la documentation de create-react-app.

Rendu

Comme pour les autres TP, on va forker un projet de base : https://www-apps.univ-lehavre.fr/forge/WEB-IHM/react-router-lab et en proposer un Merge Request une fois le travail terminé. On n’oubliera pas de modifier le fichier README.md et de nommer correctement votre Merge Request avec vos nom, prénom et numéro d’étudiant.

Évaluation

Liste des Capacités évaluées.