Mon parcours React : jour 28

Créer une liste de tâches dans React

Aujourd'hui, j'ai travaillé sur un projet React pour créer une application de liste de tâches simple mais puissante. Ce projet a approfondi ma compréhension des hooks React, de la gestion des états et de la gestion des événements tout en me permettant d'améliorer les fonctionnalités avec des fonctionnalités supplémentaires telles que le déplacement de tâches vers le haut ou vers le bas.

Voici un aperçu de ce que j'ai appris et mis en œuvre.

1. Configuration du composant
J'ai structuré mon ToDoList.jsx pour utiliser le hook useState pour gérer les tâches. Cela m'a permis de mettre à jour et de restituer dynamiquement la liste des tâches. Vous trouverez ci-dessous la configuration de base pour la gestion des tâches :

import React, { useState } from 'react';

export default function ToDoList() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState("");

  function handleInputChange(event) {
    setNewTask(event.target.value); // Enables us to see what we type
  }

  function addTask() {
    if (newTask.trim() !== "") {
      setTasks(t => [...t, newTask]); // Adds the new task to the task list
      setNewTask(""); // Resets the input field
    }
  }
}

2. Ajout et suppression de tâches
J'ai appris à manipuler l'état pour ajouter et supprimer des tâches. La fonction addTask vérifie si l'entrée est valide avant de l'ajouter, tandis que deleteTask supprime une tâche spécifique en fonction de son index :

function deleteTask(index) {
  const updatedTasks = tasks.filter((_, i) => i !== index); // Removes the task at the given index
  setTasks(updatedTasks);
}

3. Déplacer des tâches de haut en bas
Une amélioration clé du projet a été la mise en œuvre de la réorganisation des tâches. Les fonctions moveTaskUp et moveTaskDown réorganisent les tâches en fonction de leurs indices :

function moveTaskUp(index) {
  if (index > 0) {
    const updatedTasks = [...tasks];
    [updatedTasks[index], updatedTasks[index - 1]] = [updatedTasks[index - 1], updatedTasks[index]];
    setTasks(updatedTasks);
  }
}

function moveTaskDown(index) {
  if (index < tasks.length - 1) {
    const updatedTasks = [...tasks];
    [updatedTasks[index], updatedTasks[index + 1]] = [updatedTasks[index + 1], updatedTasks[index]];
    setTasks(updatedTasks);
  }
}

4. Ajout de styles avec CSS
Pour rendre l'application visuellement attrayante, j'ai appliqué des styles personnalisés dans index.css. Voici quelques-uns des faits saillants :

Style des boutons :

button {
  font-size: 1.7rem;
  font-weight: bold;
  padding: 10px 20px;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.5s ease;
}
.add-button {
  background-color: hsl(125, 47%, 54%);
}
.add-button:hover {
  background-color: hsl(125, 47%, 44%);
}

Style des éléments de tâche :

li {
  font-size: 2rem;
  font-weight: bold;
  padding: 15px;
  background-color: hsl(0, 0%, 97%);
  margin-bottom: 10px;
  border: 3px solid hsla(0, 0%, 85%, 0.75);
  border-radius: 5px;
  display: flex;
  align-items: center;
}

5. Liste complète des tâches en action
Voici comment tout se déroule dans le composant ToDoList.jsx :

return (
  <div className='to-do-list'>
    <h1>To-Do List</h1>
    <div>
      <input 
        type='text'
        placeholder='Enter a task...'
        value={newTask}
        onChange={handleInputChange}
      />
      <button className='add-button' onClick={addTask}>
        Add
      </button>
    </div>

    <ol>
      {tasks.map((task, index) => (
        <li key={index}>
          <span className='text'>{task}</span>
          <button className='delete-button' onClick={() => deleteTask(index)}>Delete</button>
          <button className='move-button' onClick={() => moveTaskUp(index)}>☝️</button>
          <button className='move-button' onClick={() => moveTaskDown(index)}>?</button>
        </li>
      ))}
    </ol>
  </div>
);

Points clés à retenir

1. React Hooks : le hook useState est un moyen efficace de gérer les états des composants locaux.
2. Gestion des événements : des fonctions telles que handleInputChange, addTask et deleteTask montrent comment les interactions des utilisateurs peuvent mettre à jour l'interface utilisateur.
3. Rendu de liste dynamique : l'utilisation de la carte pour parcourir les tâches rend l'application dynamique et réactive aux changements.
4. Meilleures pratiques de style : la combinaison d'effets de survol et de transitions CSS améliore l'expérience utilisateur.

Une étape à la fois

Code source
Vous pouvez accéder au code source complet de ce projet sur GitHub :
? Référentiel d'applications React de liste de tâches

N'hésitez pas à explorer, bifurquer et contribuer au projet !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!