ROYAUME DU MAROC
Formateur : HAFSA MHAND OUAMMI
Office de la Forma on Professionnelle et de la Promo on du Travail
Filière : devofs 202 Niveau : 2ème Année
Module : M204 – Développer en Front End Année de forma on: 2024/2025
TP 5 - Redux :
L’objec f : Se familiariser avec Redux
Contexte :
Réaliser une applica on de ges on des tâches sous React, en u lisant Redux
Travail demandé :
1. Créer une applica on React avec l'ou l create-react-app
2. Installer la bibliothèque Redux.
3. Pour l’u lisa on des icons, on peut installer la bibliothèque React-icons (h ps://react-
icons.github.io/react-icons).
4. Dans le dossier src, créer deux dossiers :
- Redux : pour les programmes de redux.
- components : pour les composants de react .
5. Dans le dossier Redux, créer les programmes suivants :
ROYAUME DU MAROC
Formateur : HAFSA MHAND OUAMMI
Office de la Forma on Professionnelle et de la Promo on du Travail
Filière : devofs 202 Niveau : 2ème Année
Module : M204 – Développer en Front End Année de forma on: 2024/2025
- ReducerTodo.jsx : qui créer un reducer et ini alise le state avec l'objet suivant :
const initial_state = {
lastid:5,
tasks : [
{
id:1,
task: "Réaliser le TP React",
completed: true
},
{
id:2,
task: "Préparer la présentation finale du React",
completed: false
},
{
id:3,
task: "Réaliser Figma Projet de synthèse",
completed: false
},
{
id:4,
task: "Préparer le CC1 React",
completed: true
},
{
id:5,
task: "Réaliser de la conception du Projet de synthèse",
completed: false
}
]
}
- Store.jsx : qui va créer un store en lui associe le reducer "ReducerTodo".
- Ac onsTypes.jsx pour déclarer les types d'ac ons
- Ac onsCreators.jsx pour déclarer les créateurs d'ac on.
6. Dans le dossier components, créer :
a. Le composant ListTasks qui affiche la liste des tâches
b. Le composant Task qui affiche une tache
ROYAUME DU MAROC
Formateur : HAFSA MHAND OUAMMI
Office de la Forma on Professionnelle et de la Promo on du Travail
Filière : devofs 202 Niveau : 2ème Année
Module : M204 – Développer en Front End Année de forma on: 2024/2025
qui vont afficher les tâches dans le store sous la forme suivante :
7. Ajouter un composant AddTache.jsx qui va permet l'ajout d'une tache dans le store, composé
d’un input et un bouton pour ajouter une tâche à la liste ini ale
8. Ecrire le code du bouton ajouter une tache.
9. Ecrire le code du bouton modifier une tache.
10. Ecrire le code du bouton supprimer une tache.
11. Ecrire le code du bouton valider une tache.
12. Ajouter un composant contenant le nombre des tâches complètes, comme suit :
13. Ajouter un composant à la fin de l'écran contenant 3 boutons :
a. Supprimer toutes les tâches
b. Supprimer les tâches complètes
c. Supprimer les tâches non complètes
d. Marquer toutes les tâches non complètes comme complètes
