如何使用 ReactJS 建立 ToDo 應用？

---

建立 ToDo 應用是開始學習 ReactJS 的最佳方法。在本文中，我們將瞭解如何使用 React 構建一個簡單的 ToDo 應用。該專案將涵蓋 React 的關鍵概念，例如元件、狀態管理、屬性和事件處理。

待辦事項列表的功能

ToDo 應用將允許使用者。

• 新增新的任務。
• 將任務標記為已完成。
• 從列表中刪除任務。

為了更好地管理，我們將應用程式分解成小的可重用元件，並使用 React 的useState鉤子來管理狀態。

先決條件

首先，您必須在系統中安裝 Node.js 和 npm。然後，使用以下命令建立一個新的 React 專案。

npx create-react-app todo-app
cd todo-app

專案結構

以下是 ToDo 應用的基本專案結構。

建立元件

如您在專案結構中所見，我們建立了一個目錄和 3 個元件檔案，這些檔案將匯出到 App.js 檔案。

TodoForm.js

TodoForm 元件包含一個帶有輸入欄位和提交按鈕的表單。提交表單時，將呼叫 App.js 中的 addTask 函式，並傳入任務文字。

import React, { useState } from 'react';

function TodoForm({ addTask }) {
  const [task, setTask] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (task.trim()) {
      addTask(task);
      setTask('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Add a task..."
        value={task}
        onChange={(e) => setTask(e.target.value)}
      />
      <button type="submit">Add Task</button>
    </form>
  );
}

export default TodoForm;

TodoItem.js

此元件表示每個單獨的任務，並提供標記為已完成和刪除的選項。在 TodoItem.js 中，單擊任務會透過呼叫 completeTask 函式來切換其完成狀態。

import React from 'react';

function TodoItem({ task, completeTask, deleteTask }) {
  return (
    <div className={`task ${task.completed ? 'completed' : ''}`}>
      <span onClick={() => completeTask(task.id)}>{task.text}</span>
      <button onClick={() => deleteTask(task.id)}>Delete</button>
    </div>
  );
}

export default TodoItem;

TodoList.js

TodoItem.js 中的刪除按鈕透過呼叫 deleteTask 函式來刪除任務。此元件遍歷任務列表，並使用 TodoItem 顯示每個任務。

import React from 'react';
import TodoItem from './TodoItem';

function TodoList({ tasks, completeTask, deleteTask }) {
  return (
    <div>
      {tasks.map((task) => (
        <TodoItem
          key={task.id}
          task={task}
          completeTask={completeTask}
          deleteTask={deleteTask}
        />
      ))}
    </div>
  );
}

export default TodoList;

App.js

將所有內容整合在一起的主要元件。它管理任務的狀態。

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

function App() {
  const [tasks, setTasks] = useState([]);

  const addTask = (taskText) => {
    const newTask = { id: Date.now(), text: taskText, completed: false };
    setTasks([...tasks, newTask]);
  };

  const completeTask = (id) => {
    setTasks(
      tasks.map((task) =>
        task.id === id ? { ...task, completed: !task.completed } : task
      )
    );
  };

  const deleteTask = (id) => {
    setTasks(tasks.filter((task) => task.id !== id));
  };

  return (
    <div className="App">
      <h1>ToDo App</h1>
      <TodoForm addTask={addTask} />
      <TodoList tasks={tasks} completeTask={completeTask} 
            deleteTask={deleteTask} />
    </div>
  );
}

export default App;

App.css

新增一些基本樣式以使應用程式更具吸引力。

.App {
  text-align: center;
  max-width: 500px;
  margin: auto;
}

form {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

input {
  width: 80%;
  padding: 10px;
  font-size: 16px;
}

button {
  padding: 10px;
  font-size: 16px;
}

.task {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.task.completed span {
  text-decoration: line-through;
}

button {
  background-color: #40a944;
  border: none;
  border-radius: 3px;
  color: white;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

輸出

因此，我們的待辦事項列表可以使用了，如您所見，我們可以新增任務，將任務標記為已完成，並在任何時候我們想要刪除它時刪除它。