Créer une application de liste de tâches simple avec React

Créer une application de liste de tâches simple avec React
Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

Apprendre une nouvelle technologie comme React peut être déroutant sans expérience pratique. En tant que développeur, la création de projets réels est l'un des moyens les plus efficaces de comprendre les concepts et les fonctionnalités.





Vidéo MUO du jour FAITES DÉFILER POUR CONTINUER AVEC LE CONTENU

Suivez le processus de création d'une simple liste de tâches avec React et améliorez votre compréhension des principes fondamentaux de React.



Conditions préalables à la création d'une liste de tâches

Avant de commencer ce projet, il y a plusieurs exigences. Vous devez avoir une compréhension de base des éléments suivants, HTML, CSS, JavaScript, ES6 , et Réagissez. Vous devez avoir Node.js et npm, le gestionnaire de packages JavaScript . Vous avez également besoin d'un éditeur de code, comme Visual Studio Code.





Voici le CSS que ce projet utilisera :

 /* styles.css */ 
.App { 
  font-family: sans-serif; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 100vh; 
} 
 
.Todo { 
  background-color: wheat; 
  text-align: center; 
  width: 50%; 
  padding: 20px; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
  margin: auto; 
} 
 
ul { 
  list-style-type: none; 
  padding: 10px; 
  margin: 0; 
} 
 
button { 
  width: 70px; 
  height: 35px; 
  background-color: sandybrown; 
  border: none; 
  font-size: 15px; 
  font-weight: 800; 
  border-radius: 4px; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
} 
 
.input { 
  border: none; 
  width: 340px; 
  height: 35px; 
  border-radius: 9px; 
  text-align: center; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
} 
 
.Top { 
  display: flex; 
  justify-content: center; 
  gap: 12px; 
} 
 
li { 
  display: flex; 
  justify-content: space-evenly; 
  align-items: center; 
  padding: 10px; 
} 
 
li:before { 
  content: "*"; 
  margin-right: 5px; 
}

1. Configurer l'environnement du projet

Cette étape comprend toutes les commandes et tous les fichiers nécessaires à la configuration du projet. Pour commencer, créez un nouveau projet React. Ouvrez un terminal et exécutez cette commande :



 npx create-react-app todo-list

Cela prend quelques minutes pour installer tous les fichiers nécessaires ainsi que les packages. Il crée une nouvelle application React nommée todo-list. Une fois que vous voyez quelque chose comme ça, vous êtes sur la bonne voie :

Une liste de commandes à exécuter dans un répertoire.

Accédez au répertoire de votre projet nouvellement créé à l'aide de cette commande :



 cd todo-list

Exécutez votre projet localement avec cette commande :

 npm start

Et puis affichez le projet dans votre navigateur à http://localhost:3000/.



Dans le dossier src de votre projet, il y a quelques fichiers dont vous n'avez pas besoin. Supprimez ces fichiers : App.css , App.test.js , logo.svg , reportWebVitals.js , setupTests.js .

comment regarder un film avec quelqu'un sur internet
Fichiers dans le dossier src d'une application React.

Assurez-vous de rechercher les instructions d'importation dans les fichiers disponibles et supprimez toutes les références aux fichiers supprimés.

2. Créer un composant TodoList

C'est le composant dans lequel nous allons implémenter tous les codes nécessaires à la liste de tâches. Créez un fichier nommé 'TodoList.js' dans votre dossier src. Ensuite, pour tester que tout fonctionne comme il se doit, ajoutez le code suivant :

 import React from 'react'; 
 
const TodoList = () => { 
    return ( 
        <div> 
            <h2>Hello World </h2> 
        </div> 
    ); 
}; 
 
export default TodoList;  
 

Ouvrez votre fichier App.js, importez le composant TodoList et affichez-le dans le composant App. Cela ressemblera à ceci :

 import React from 'react'; 
import './styles.css' 
import TodoList from './TodoList'; 
 
const App = () => { 
    return ( 
        <div> 
            <TodoList /> 
        </div> 
    ); 
}; 
 
export default App;

Accédez à votre navigateur local sur lequel le localhost: 3000 est en cours d'exécution et vérifiez que 'Hello World' est écrit en gras. Tout bon? A l'étape suivante.

3. Gérer l'entrée et le changement d'entrée

Cette étape vous permet de déclencher un événement lorsque vous saisissez une tâche dans la zone de saisie. Importez le crochet useState à partir de votre package React. useState est un crochet React qui vous permet de gérer efficacement l'état .

 import React, { useState } from 'react';

Utilisez le crochet useState pour créer une variable d'état nommée 'inputTask' avec une valeur initiale d'une chaîne vide. De plus, affectez la fonction 'setInputTask' pour mettre à jour la valeur de 'inputTask' en fonction de l'entrée de l'utilisateur.

 const [inputTask, setInputTask] = useState("");

Créez une fonction appelée 'handleInputChange', en prenant un paramètre d'événement. Il doit mettre à jour l'état inputTask à l'aide de la fonction setInputTask. Accédez à la valeur de la cible de l'événement avec event.target.value. Cela s'exécutera chaque fois que la valeur du champ de saisie changera.

 const handleInputChange = (event) => { 
    setInputTask(event.target.value); 
};

Renvoie quelques éléments JSX. Le premier est l'en-tête qui se lit 'My Todo-List', vous pouvez choisir n'importe quel en-tête que vous aimez. Incluez quelques attributs à vos éléments d'entrée. taper='texte' : Cela spécifie votre type d'entrée en tant que texte, valeur={inputTask} : cela lie la valeur du champ d'entrée à la variable d'état inputTask, garantissant qu'elle reflète la valeur actuelle. onChange={handleInputChange} : cela appelle la fonction handleInputChange lorsque la valeur du champ d'entrée change, mettant à jour l'état inputTask.

 <div className="Todo"> 
    <h1>My To-Do List</h1> 
    <div className="Top"> 
        <input className="input" type="text" value={inputTask} 
           onChange={handleInputChange} placeholder="Enter a task" />

Ensuite, créez un bouton qui ajoutera la tâche saisie à la liste.

         <button className="btn">ADD</button> 
   </div> 
</div>

À ce stade, voici à quoi ressemblera la sortie de votre navigateur.

Une liste de tâches vide.

4. Ajouter une fonctionnalité au bouton 'AJOUTER'

Utilisez le useState hook pour créer une variable d'état nommée 'list' avec une valeur initiale d'un tableau vide. La variable 'setList' stocke le tableau des tâches en fonction de l'entrée de l'utilisateur.

 const [list, setList] = useState([]);

Créez une fonction handleAddTodo qui s'exécutera lorsque l'utilisateur cliquera sur le bouton 'AJOUTER' pour ajouter une nouvelle tâche. Il prend le paramètre todo, qui représente la nouvelle tâche saisie par l'utilisateur. Ensuite, créez un objet newTask avec un identifiant unique généré à l'aide de Math.random() et la propriété todo qui contient le texte d'entrée.

pourquoi n'ai-je que 2 filtres snapchat

Ensuite, mettez à jour l'état de la liste en utilisant l'opérateur de propagation [… liste] pour créer un nouveau tableau avec les tâches existantes dans la liste. Ajoutez la newTask à la fin du tableau. Cela garantit que nous ne modifions pas le tableau d'état d'origine. Enfin, réinitialisez l'état inputTask sur une chaîne vide, en effaçant le champ de saisie lorsque l'utilisateur clique sur le bouton.

 const handleAddTodo = (todo) => { 
    const newTask = { 
        id: Math.random(), 
        todo: todo 
   }; 
 
   setList([...list, newTask]); 
    setInputTask(''); 
};

Inclure le onClick attribut à l'élément bouton avec le texte 'AJOUTER'. Lorsqu'il est cliqué, il déclenche la fonction handleAddTodo, qui ajoute une nouvelle tâche à l'état de la liste

 <button onClick={() => handleAddTodo(inputTask)}>ADD</button>

À ce stade, la sortie de votre navigateur aura la même apparence, mais si vous cliquez sur le bouton 'AJOUTER' après avoir saisi une tâche, le champ de saisie se videra. Si tout fonctionne bien, passez à l'étape suivante.

5. Ajouter un bouton Supprimer

Il s'agit de la dernière étape pour permettre aux utilisateurs de supprimer leur tâche s'ils ont fait une erreur ou ont terminé la tâche. Créez une fonction handleDeleteTodo qui agit comme un gestionnaire d'événements lorsque l'utilisateur clique sur le bouton 'Supprimer' pour une tâche spécifique. Il prend l'identifiant de la tâche comme paramètre.

Dans la fonction, utilisez la méthode filter sur le tableau list pour créer un nouveau tableau newList qui exclut la tâche avec l'identifiant correspondant. La méthode de filtrage parcourt chaque élément du tableau de liste et renvoie un nouveau tableau contenant uniquement les éléments qui satisfont la condition donnée. Dans ce cas, vérifiez si l'ID de chaque tâche est égal à l'ID passé en paramètre. Mettez à jour l'état de la liste en appelant setList(newList), qui définit l'état sur le nouveau tableau filtré, supprimant ainsi la tâche avec l'identifiant correspondant de la liste.

 const handleDeleteTodo = (id) => { 
    const newList = list.filter((todo) =>  
        todo.id !== id 
   ); 
 
    setList(newList);  
};

Utilisez la méthode map pour itérer sur chaque élément du tableau de liste et renvoyer un nouveau tableau. Ensuite, créez un élément

  • pour représenter une tâche pour chaque objet todo dans le tableau de liste. Assurez-vous d'ajouter l'attribut key lors du rendu d'une liste d'éléments dans React. Cela aide React à identifier de manière unique chaque élément de la liste et à mettre à jour efficacement l'interface utilisateur lorsqu'elle change. Dans ce cas, définissez la clé sur l'ID de chaque objet todo pour garantir l'unicité.

    Accédez à la propriété todo de chaque objet todo. enfin, créez un bouton qui, lorsqu'il est cliqué, déclenche la fonction handleDeleteTodo avec l'id de la tâche correspondante en paramètre, nous permettant de supprimer la tâche de la liste.

     <ul> 
    { list.map((todo) => ( 
       <li className="task" key={todo.id}> 
            {todo.todo} 
            <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button> 
        </li> 
    ))} 
    </ul>

    Voici à quoi devrait ressembler votre code final :

     import React, { useState } from 'react'; 
     
    const TodoList = () => { 
        const [inputTask, setInputTask] = useState(''); 
        const [list, setList] = useState([]); 
     
        const handleAddTodo = () => { 
            const newTask = { 
                id: Math.random(), 
                todo: inputTask 
            }; 
     
           setList([...list, newTask]); 
            setInputTask(''); 
        }; 
     
       const handleDeleteTodo = (id) => { 
            const newList = list.filter((todo) => todo.id !== id); 
            setList(newList); 
        }; 
     
       const handleInputChange = (event) => { 
            setInputTask(event.target.value); 
        }; 
     
       return ( 
            <div className="Todo"> 
                <h1>My To-Do List</h1> 
     
                <div className="Top"> 
                    <input className="input" type="text" value={inputTask} 
                       onChange={handleInputChange} placeholder="Enter a task" /> 
     
                    <button className="btn" onClick={handleAddTodo}>ADD</button> 
                </div> 
     
               <ul> 
                    { list.map((todo) => ( 
                        <li className="task" key={todo.id}> 
                            {todo.todo} 
                            <button onClick={() => handleDeleteTodo(todo.id)}> 
                               Delete 
                           </button> 
                        </li> 
                    ))} 
                </ul> 
            </div> 
        ); 
    }; 
     
    export default TodoList;

    Voici comment sera votre sortie finale, les boutons d'ajout et de suppression fonctionnant comme prévu.

    Une liste de tâches montrant plusieurs tâches.

    Félicitations, vous avez créé une liste de tâches qui ajoute et supprime des tâches. Vous pouvez aller plus loin en ajoutant du style et plus de fonctionnalités.

    Utiliser des projets du monde réel pour apprendre à réagir

    La pratique peut être un moyen efficace d'apprendre. Il vous permet d'appliquer les concepts et les meilleures pratiques de React de manière pratique, renforçant ainsi votre compréhension du framework. Il existe des tonnes de projets, vous devez trouver les bons.