Comme pour le semestre précédent, vous allez initialiser votre projet à l'aide de l'outil vite.

Vous pourrez ensuite réaliser un peu de néttoyage pour ne conserver que le minimum nécessaire dans votre projet.

Vous finaliserez la mise en place du projet en créant un dépôt Git local dans le répertoire r505-react. Vous créerez alors un dépôt distant associé, nommé r505-react, puis vous réaliserez votre premier commit.

Vous penserez à ajouter votre intervenant de TP comme membre du dépôt distant, avec un rôle au moins de Reporter.

Vous installerez et configurerez les outils de qualité de code eslint et Prettier afin d'améliorer la qualité du code de votre projet.

Vous ajouterez ensuite un script npm permettant de tester la qualité de votre code.

Vous vous assurerez aussi de l'intégration de ces outils dans votre IDE afin d'améliorer votre expérience de développement.

Dans la suite des TP de ce module, vous vous assurerez que vos commits soient toujours valide au vu des outils de qualité de code.

Si vous le souhaité, un outil similaire à GrumPHP existe pour l'écosystème JavaScript, il s'agit de husky, vous pouvez l'utiliser pour vous assurer d'exécuter le script npm avant chaque commit, mais la configuration correcte de votre IDE devrait suffire.

Afin de ne pas perdre trop de temps à créer des composants d'affichage, vous allez utiliser une des nombreuses bibliothèques de composants utilisées par la communauté React : MUI.

Vous installerez cette bibliothèque conjointement à Emotion, une bibliothèque de gestion du CSS dans le JavaScript.

En vous familiarisant avec la documentation, vous créerez trois composants :

• Header, l'en-tête contenant le titre de l'application
• Footer, le pied de page contenant deux boutons :
• un bouton de changement de mode pour le thème (clair/sombre)
• un bouton d'affichage des notifications
• Main, la zone d'affichage principale contenant quatre boutons :
• un bouton permettant plus tard de créer une notification d'erreur
• un bouton permettant plus tard de créer une notification d'avertissement
• un bouton permettant plus tard de créer une notification d'information
• un bouton permettant plus tard de créer une notification de succès

Pour l'instant aucune action n'est attachée aux boutons, vous vous focaliserez pour l'instant sur la structuration de l'application. Vous devriez obtenir une organisation similaire à l'illustration suivante :

Pour le thème de votre application, vous pouvez utiliser le générateur de thème.

Pour la mise en forme de votre application, vous êtes invités à utiliser les composants de mise en forme de la bibliothèque. Et pour les besoin spécifique de votre application, vous prendrez soin de comprendre l'utilisation de la propriété de style des composants MUI : la prop sx.

Pour finir, afin de reprendre en main la gestion de données et de l'interaction en React, vous allez maintenant gérer le basculement de l'application en thème clair ou sombre lors de l'appuie sur le bouton dans le pied de page.

Vous commencerez par créer un nouveau hook personnaliser appelé useTheme, dont le rôle sera de définir et fournir le thème fournit à votre application.

Dans ce hook, vous ajouterez une variable d'état permettant d'identifier si le thème employé est clair ou foncé, que vous initialiserez avec le thème du navigateur. Cette variable, ainsi que sa fonction de modification, seront exposées par votre hook personnalisé.

Vous pourrez alors rendre actif le bouton de modification du thème du pied de page de votre application afin d'obtenir des rendus similaires à l'illustration suivante :