Projet Final React : Création d'une Application To-Do List

Introduction à la création du projet liste des taches

Dans ce projet final, nous allons créer une application To-Do List interactive avec React. Cette application permettra aux utilisateurs d'ajouter, marquer comme terminées et supprimer des tâches. Elle mettra en pratique les concepts suivants :

• Gestion de l'état : Utilisation de `useState` pour gérer la liste des tâches.
• Listes dynamiques : Itération sur un tableau avec `.map()` pour afficher les tâches.
• Événements React : Gestion des clics et des saisies utilisateur.
• Conditionnelles : Affichage conditionnel des messages ou des styles.
• Stylisation : Design responsive avec CSS ou Sass.

Ce projet est parfait pour les débutants car il combine tous les concepts essentiels de React de manière simple et intuitive.

Étape 1 : Installation de Create React App

Pour commencer, nous allons installer un projet React en utilisant create-react-app. Voici la commande à exécuter dans votre terminal :

📋 Copier le code

npx create-react-app todo-list-app
cd todo-list-app
npm start

Explication ligne par ligne :

1. npx create-react-app todo-list-app :
   • Cette commande initialise un nouveau projet React appelé todo-list-app.
   • npx est un outil qui exécute temporairement des paquets npm sans les installer globalement.
2. cd todo-list-app :
   • Cette commande navigue vers le dossier du projet nouvellement créé.
3. npm start :
   • Lance le serveur de développement local.
   • Ouvrez votre navigateur à l'adresse http://localhost:3000 pour voir votre application en action.

Étape 2 : Structure de Base du Projet

Une fois le projet installé, voici la structure de base que nous allons utiliser :

• src/App.js : Le composant principal où nous écrirons notre logique.
• src/App.css ou src/App.scss : Fichier pour styliser notre application.

Ouvrez App.js et remplacez son contenu par le code suivant pour commencer :

📋 Copier le code

import React from 'react';
import './App.css';

function App() {
return (
<div className="conteneur">
<h1>Ma To-Do List</h1>
</div>
);
}

export default App;

Explication ligne par ligne :

1. import React from 'react'; :
   • Nous importons React pour pouvoir utiliser ses fonctionnalités, notamment JSX.
2. import './App.css'; :
   • Importe le fichier CSS pour styliser notre application.
3. function App() { ... } :
   • Définit un composant fonctionnel appelé App.
4. return ( ... ); :
   • Retourne une structure JSX contenant un élément <div> avec une classe CSS appelée conteneur.
   • Affiche un titre <h1> contenant "Ma To-Do List".
5. export default App; :
   • Exporte le composant App pour qu'il soit utilisé comme point d'entrée de l'application.

Étape 3 : Gestion de l'État avec `useState`

Nous allons maintenant ajouter une fonctionnalité pour gérer une liste de tâches. Pour cela, nous utiliserons le hook useState pour stocker les tâches dans un état local.

📋 Copier le code

import React, { useState } from 'react';
import './App.css';

function App() {
const [taches, setTaches] = useState([]); // Liste des tâches
const [nouvelleTache, setNouvelleTache] = useState(''); // Valeur du champ de saisie

return (
<div className="conteneur">
<h1>Ma To-Do List</h1>
</div>
);
}

export default App;

Explication ligne par ligne :

1. import React, { useState } from 'react'; :
   • Nous importons React ainsi que le hook useState, qui permet de gérer l'état local dans un composant fonctionnel.
2. const [taches, setTaches] = useState([]); :
   • Initialise un état appelé taches avec une valeur initiale vide ([]).
   • setTaches est une fonction permettant de mettre à jour cet état.
3. const [nouvelleTache, setNouvelleTache] = useState(''); :
   • Initialise un état appelé nouvelleTache avec une chaîne vide ('').
   • Cet état représente la valeur saisie dans le champ de texte pour ajouter une nouvelle tâche.

Étape 4 : Ajout de Tâches

Maintenant, ajoutons un champ de saisie et un bouton pour permettre aux utilisateurs d'ajouter des tâches. Voici le code mis à jour :

📋 Copier le code

import React, { useState } from 'react';
import './App.css';

function App() {
const [taches, setTaches] = useState([]); // Liste des tâches
const [nouvelleTache, setNouvelleTache] = useState(''); // Valeur du champ de saisie

// Fonction pour ajouter une nouvelle tâche
function ajouterTache() {
if (nouvelleTache.trim() !== '') {
setTaches([...taches, { texte: nouvelleTache, terminee: false }]);
setNouvelleTache('');
}
}

return (
<div className="conteneur">
<h1>Ma To-Do List</h1>
<input
	type="text"
	value={nouvelleTache}
	onChange={(e) => setNouvelleTache(e.target.value)}
	placeholder="Ajoutez une tâche..."
/>
<button onClick={ajouterTache}>Ajouter</button>
</div>
);
}

export default App;

Explication détaillée :

1. function ajouterTache() { ... } :
   • Cette fonction est appelée lorsque l'utilisateur clique sur le bouton "Ajouter".
   • if (nouvelleTache.trim() !== '') : Vérifie si le champ de saisie n'est pas vide avant d'ajouter une tâche.
   • setTaches([...taches, { texte: nouvelleTache, terminee: false }]) : Ajoute une nouvelle tâche au tableau existant, avec deux propriétés : texte (la description de la tâche) et terminee (indiquant si la tâche est terminée ou non).
   • setNouvelleTache('') : Réinitialise le champ de saisie après avoir ajouté une tâche.
2. <input type="text" value={nouvelleTache} onChange={(e) => setNouvelleTache(e.target.value)} /> :
   • Ce champ de saisie est lié à l'état nouvelleTache.
   • onChange={(e) => setNouvelleTache(e.target.value)} : Met à jour l'état nouvelleTache à chaque modification de texte.
3. <button onClick={ajouterTache}>Ajouter</button> :
   • Ce bouton appelle la fonction ajouterTache lorsqu'il est cliqué.

Étape 5 : Affichage Dynamique des Tâches

Nous allons maintenant afficher la liste des tâches ajoutées par l'utilisateur. Utilisons la méthode .map() pour itérer sur le tableau taches.

📋 Copier le code

import React, { useState } from 'react';
import './App.css';

function App() {
const [taches, setTaches] = useState([]); // Liste des tâches
const [nouvelleTache, setNouvelleTache] = useState(''); // Valeur du champ de saisie

// Fonction pour ajouter une nouvelle tâche
function ajouterTache() {
if (nouvelleTache.trim() !== '') {
setTaches([...taches, { texte: nouvelleTache, terminee: false }]);
setNouvelleTache('');
}
}

return (
<div className="conteneur">
<h1>Ma To-Do List</h1>
<input
	type="text"
	value={nouvelleTache}
	onChange={(e) => setNouvelleTache(e.target.value)}
	placeholder="Ajoutez une tâche..."
/>
<button onClick={ajouterTache}>Ajouter</button>
<ul>
	{taches.map((tache, index) => (
		<li key={index}>{tache.texte}</li>
	))}
</ul>
</div>
);
}

export default App;

Explication détaillée :

1. {taches.map((tache, index) => (...))} :
   • La méthode .map() itère sur le tableau taches pour générer dynamiquement des éléments <li>.
   • (tache, index) : Pour chaque tâche, tache représente l'objet actuel, et index sa position dans le tableau.
   • key={index} : Une clé unique est assignée à chaque élément pour aider React à identifier les changements dans la liste.
2. <li>{tache.texte}</li> :
   • Affiche le texte de chaque tâche dans une liste non ordonnée (<ul>).

Étape 6 : Marquer une Tâche comme Terminée

Ajoutons une fonctionnalité pour permettre aux utilisateurs de marquer une tâche comme terminée. Cela implique de mettre à jour la propriété terminee de chaque tâche.

📋 Copier le code

import React, { useState } from 'react';
import './App.css';

function App() {
const [taches, setTaches] = useState([]); // Liste des tâches
const [nouvelleTache, setNouvelleTache] = useState(''); // Valeur du champ de saisie

// Fonction pour ajouter une nouvelle tâche
function ajouterTache() {
if (nouvelleTache.trim() !== '') {
setTaches([...taches, { texte: nouvelleTache, terminee: false }]);
setNouvelleTache('');
}
}

// Fonction pour marquer une tâche comme terminée
function marquerCommeTerminee(index) {
const nouvellesTaches = [...taches];
nouvellesTaches[index].terminee = true;
setTaches(nouvellesTaches);
}

return (
<div className="conteneur">
<h1>Ma To-Do List</h1>
<input
	type="text"
	value={nouvelleTache}
	onChange={(e) => setNouvelleTache(e.target.value)}
	placeholder="Ajoutez une tâche..."
/>
<button onClick={ajouterTache}>Ajouter</button>
<ul>
	{taches.map((tache, index) => (
		<li key={index} style={{ textDecoration: tache.terminee ? 'line-through' : 'none' }}>
			{tache.texte}
			<button onClick={() => marquerCommeTerminee(index)}>Terminée</button>
		</li>
	))}
</ul>
</div>
);
}

export default App;

Explication détaillée :

1. function marquerCommeTerminee(index) { ... } :
   • Cette fonction met à jour la propriété terminee de la tâche correspondante.
   • const nouvellesTaches = [...taches]; : Crée une copie du tableau taches pour éviter de modifier directement l'état.
   • nouvellesTaches[index].terminee = true; : Change la propriété terminee de la tâche sélectionnée.
   • setTaches(nouvellesTaches); : Met à jour l'état avec le nouveau tableau modifié.
2. style={{ textDecoration: tache.terminee ? 'line-through' : 'none' }} :
   • Cette ligne applique un style conditionnel : si tache.terminee est vrai, le texte est barré (line-through).
3. <button onClick={() => marquerCommeTerminee(index)}>Terminée</button> :
   • Ce bouton appelle la fonction marquerCommeTerminee avec l'index de la tâche correspondante.

Étape 7 : Suppression de Tâches

Enfin, ajoutons une fonctionnalité pour supprimer des tâches individuelles. Voici le code final :

📋 Copier le code

import React, { useState } from 'react';
import './App.css';

function App() {
const [taches, setTaches] = useState([]); // Liste des tâches
const [nouvelleTache, setNouvelleTache] = useState(''); // Valeur du champ de saisie

// Fonction pour ajouter une nouvelle tâche
function ajouterTache() {
if (nouvelleTache.trim() !== '') {
setTaches([...taches, { texte: nouvelleTache, terminee: false }]);
setNouvelleTache('');
}
}

// Fonction pour marquer une tâche comme terminée
function marquerCommeTerminee(index) {
const nouvellesTaches = [...taches];
nouvellesTaches[index].terminee = true;
setTaches(nouvellesTaches);
}

// Fonction pour supprimer une tâche
function supprimerTache(index) {
const nouvellesTaches = taches.filter((_, i) => i !== index);
setTaches(nouvellesTaches);
}

return (
<div className="conteneur">
<h1>Ma To-Do List</h1>
<input
	type="text"
	value={nouvelleTache}
	onChange={(e) => setNouvelleTache(e.target.value)}
	placeholder="Ajoutez une tâche..."
/>
<button onClick={ajouterTache}>Ajouter</button>
<ul>
	{taches.map((tache, index) => (
		<li key={index} style={{ textDecoration: tache.terminee ? 'line-through' : 'none' }}>
			{tache.texte}
			<button onClick={() => marquerCommeTerminee(index)}>Terminée</button>
			<button onClick={() => supprimerTache(index)}>Supprimer</button>
		</li>
	))}
</ul>
</div>
);
}

export default App;

Explication détaillée :

1. function supprimerTache(index) { ... } :
   • Cette fonction filtre le tableau taches pour exclure la tâche correspondante à l'index spécifié.
   • taches.filter((_, i) => i !== index) : Crée un nouveau tableau sans la tâche à supprimer.
   • setTaches(nouvellesTaches); : Met à jour l'état avec le nouveau tableau filtré.
2. <button onClick={() => supprimerTache(index)}>Supprimer</button> :
   • Ce bouton appelle la fonction supprimerTache avec l'index de la tâche correspondante.

Étape 8 : Stylisation avec CSS/Sass

Pour rendre l'interface utilisateur plus attrayante, ajoutons quelques styles basiques dans App.css ou App.scss :

📋 Copier le code

/* App.css */
/* App.css */
.conteneur {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 10px;
font-family: Arial, sans-serif;
}

input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box; /* Inclut les bordures dans la largeur totale */
}

button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease; /* Ajoute une transition fluide */
}

button:hover {
background-color: #45a049; /* Assombrit légèrement le fond au survol */
}

ul {
list-style-type: none; /* Supprime les puces par défaut */
padding: 0; /* Enlève le padding interne */
margin-top: 20px; /* Espace entre le champ de saisie et la liste */
}

li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #fff;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}

li button {
margin-left: 10px; /* Espacement entre les boutons */
}

Explication des Styles :

1. .conteneur { ... } :
   • Définit un conteneur principal avec une largeur maximale de 400px, centré sur la page grâce à margin: 0 auto;.
   • Ajoute un padding de 20px pour espacer le contenu.
   • Inclut un arrière-plan clair (#f9f9f9) et une bordure subtile (1px solid #ddd) pour structurer visuellement l'application.
2. input { ... } :
   • Rend le champ de saisie responsive avec une largeur de 100%.
   • Ajoute un padding de 10px pour améliorer l'expérience utilisateur.
   • Inclut une bordure légère (1px solid #ccc) et un arrondi des coins (border-radius: 5px) pour un design moderne.
3. button { ... } :
   • Crée des boutons avec un fond vert (#4CAF50) et un texte blanc pour une meilleure lisibilité.
   • Supprime la bordure par défaut (border: none) et ajoute un arrondi des coins (border-radius: 5px).
   • Ajoute un effet interactif (cursor: pointer) pour indiquer que le bouton est cliquable.
4. li { ... } :
   • Style chaque élément de la liste avec un espace entre les tâches (margin-bottom: 10px).
   • Les boutons "Terminée" et "Supprimer" sont alignés à droite pour une meilleure organisation visuelle.

Code CSS Complet

📋 Copier le code

/* App.css */
.conteneur {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 10px;
font-family: Arial, sans-serif;
}

input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box; /* Inclut les bordures dans la largeur totale */
}

button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease; /* Ajoute une transition fluide */
}

button:hover {
background-color: #45a049; /* Assombrit légèrement le fond au survol */
}

ul {
list-style-type: none; /* Supprime les puces par défaut */
padding: 0; /* Enlève le padding interne */
margin-top: 20px; /* Espace entre le champ de saisie et la liste */
}

li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #fff;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}

li button {
margin-left: 10px; /* Espacement entre les boutons */
}

Explication ligne par ligne :

1. .conteneur { ... } :
   • Définit un conteneur centralisé avec une largeur maximale de 400px.
   • Inclut un arrière-plan clair (#f9f9f9) et une bordure subtile (1px solid #ddd).
   • Ajoute un padding de 20px pour aérer le contenu.
   • Utilise une police standard (Arial, sans-serif) pour garantir une compatibilité croisée.
2. input { ... } :
   • Rend le champ de saisie responsive avec une largeur de 100%.
   • Ajoute un padding de 10px pour améliorer la lisibilité.
   • Supprime la bordure par défaut et ajoute un arrondi (border-radius: 5px).
   • box-sizing: border-box; : Inclut les bordures dans la largeur totale pour éviter des débordements.
3. button { ... } :
   • Crée des boutons modernes avec un fond vert (#4CAF50) et un texte blanc.
   • Supprime toute bordure (border: none) pour un design minimaliste.
   • Ajoute une transition fluide (transition: background-color 0.3s ease) pour un effet visuel agréable.
4. button:hover { ... } :
   • Change la couleur de fond du bouton lorsqu'il est survolé pour indiquer l'interaction.
5. ul { ... } :
   • Supprime les puces par défaut (list-style-type: none) pour un rendu propre.
   • Enlève le padding interne (padding: 0) et ajoute un espace en haut (margin-top: 20px).
6. li { ... } :
   • Chaque élément de la liste est affiché comme une ligne flexible (display: flex).
   • Aligne le texte et les boutons horizontalement (justify-content: space-between).
   • Ajoute un arrière-plan blanc (#fff) et une bordure légère (1px solid #ddd).
7. li button { ... } :
   • Ajoute un petit espace entre les boutons (margin-left: 10px).

Étape 9 : Finalisation et Test de l'Application

Maintenant que notre application To-Do List est fonctionnelle et stylisée, il est temps de la tester pour vous assurer qu'elle fonctionne correctement. Voici quelques points à vérifier :

• Ajout de Tâches : Vérifiez que vous pouvez ajouter plusieurs tâches sans problème.
• Marquage comme Terminée : Testez si les tâches sont bien barrées lorsque vous cliquez sur "Terminée".
• Suppression de Tâches : Assurez-vous que chaque tâche peut être supprimée individuellement.
• Responsive Design : Redimensionnez votre navigateur pour vérifier que l'interface reste utilisable sur différents appareils.

Si tout fonctionne correctement, félicitez-vous ! Vous avez maintenant une application To-Do List complète qui met en pratique tous les concepts fondamentaux de React.

Conclusion

Dans ce projet final, vous avez appris à créer une application To-Do List interactive avec React. Vous avez mis en œuvre des concepts essentiels tels que la gestion de l'état avec useState, l'affichage dynamique de listes avec .map(), la gestion d'événements React, et la stylisation avec CSS/Sass.

Projet suivant : Gestionnaire de Dépenses