Meine Reaktionsreise: Tag 28

Erstellen einer To-Do-Liste in React

Heute habe ich an einem React-Projekt gearbeitet, um eine einfache, aber leistungsstarke To-Do-Listen-App zu erstellen. Dieses Projekt hat mein Verständnis von React-Hooks, Zustandsverwaltung und Ereignisbehandlung vertieft und mir gleichzeitig ermöglicht, die Funktionalität durch zusätzliche Funktionen wie das Verschieben von Aufgaben nach oben oder unten zu erweitern.

Hier ist eine Aufschlüsselung dessen, was ich gelernt und umgesetzt habe.

1. Einrichten der Komponente
Ich habe meine ToDoList.jsx so strukturiert, dass sie den useState-Hook zum Verwalten von Aufgaben verwendet. Dadurch konnte ich die Aufgabenliste dynamisch aktualisieren und rendern. Nachfolgend finden Sie die grundlegende Einrichtung zum Verwalten von Aufgaben:

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. Aufgaben hinzufügen und löschen
Ich habe gelernt, wie man den Status manipuliert, um Aufgaben hinzuzufügen und zu löschen. Die Funktion addTask prüft, ob die Eingabe gültig ist, bevor sie hinzugefügt wird, während deleteTask eine bestimmte Aufgabe basierend auf ihrem Index entfernt:

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

3. Aufgaben nach oben und unten verschieben
Eine wichtige Verbesserung des Projekts war die Implementierung der Neuordnung von Aufgaben. Die Funktionen moveTaskUp und moveTaskDown ordnen Aufgaben basierend auf ihren Indizes neu:

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. Stile mit CSS hinzufügen
Um die App optisch ansprechend zu gestalten, habe ich in index.css benutzerdefinierte Stile angewendet. Hier sind einige der Highlights:

Button-Styling:

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%);
}

Aufgabenelement-Styling:

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. Komplette To-Do-Liste in Aktion
So kommt alles in der ToDoList.jsx-Komponente zusammen:

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>
);

Wichtige Erkenntnisse

1. React Hooks: Der useState Hook ist eine effiziente Möglichkeit, lokale Komponentenzustände zu verwalten.
2. Ereignisbehandlung: Funktionen wie handleInputChange, addTask und deleteTask zeigen, wie Benutzerinteraktionen die Benutzeroberfläche aktualisieren können.
3. Dynamisches Listen-Rendering: Durch die Verwendung der Karte zum Durchlaufen von Aufgaben wird die App dynamisch und reagiert auf Änderungen.
4. Best Practices für das Styling: Die Kombination von CSS-Hover-Effekten und -Übergängen verbessert die Benutzererfahrung.

Schritt für Schritt

Quellcode
Sie können auf GitHub auf den vollständigen Quellcode für dieses Projekt zugreifen:
? To-Do-Liste React App Repository

Fühlen Sie sich frei, das Projekt zu erkunden, zu forken und dazu beizutragen!

Das obige ist der detaillierte Inhalt vonMeine Reaktionsreise: Tag 28. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!