使用 React 和 Tailwind CSS 的简单待办事项列表应用程序

在这篇博文中，我将引导您完成使用 React 和 TailwindCSS 构建简单的待办事项列表应用程序的过程。该项目非常适合想要深入研究 React 来管理状态并学习如何使用实用优先 CSS 框架 TailwindCSS 设计组件样式的初学者。

项目概况

这个项目的目标是创建一个基本的待办事项列表，用户可以：

• 添加新任务。

• 在已完成和未完成之间切换任务。

• 删除他们不再需要的任务。

我们将利用 React 的状态管理功能并使用 TailwindCSS 设计所有内容。

Step1：设置项目

首先，我们将使用 create-react-app 设置一个 React 项目并安装 TailwindCSS。

• 创建 React 应用程序：

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

• 安装 TailwindCSS：TailwindCSS 需要与 PostCSS 和 autoprefixer 一起安装，以实现自动浏览器兼容性。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

• 配置 Tailwind：在 tailwind.config.js 中，更新内容部分以指向您的 React 应用程序的文件：

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

• 在 CSS 中包含 Tailwind：在 src/index.css 中，导入 TailwindCSS 指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

现在，TailwindCSS 已完全集成到我们的 React 应用程序中！

第 2 步：创建 Todo 列表组件

接下来，让我们创建一个待办事项列表组件，用户可以在其中添加、删除和切换任务。

这是 TodoList.js 组件的核心结构：

import { useState } from 'react';

function TodoList() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  const addTask = () => {
    if (newTask.trim()) {
      setTasks([...tasks, { text: newTask, completed: false }]);
      setNewTask('');
    }
  };

  const toggleTaskCompletion = (index) => {
    const updatedTasks = tasks.map((task, i) =>
      i === index ? { ...task, completed: !task.completed } : task
    );
    setTasks(updatedTasks);
  };

  const deleteTask = (index) => {
    const updatedTasks = tasks.filter((_, i) => i !== index);
    setTasks(updatedTasks);
  };

  return (
    <div className="max-w-md mx-auto mt-10 p-4 bg-white rounded-lg shadow-lg">
      <h1 className="text-2xl font-bold mb-4">Todo List</h1>
      <div className="flex mb-4">
        <input
          type="text"
          className="flex-1 p-2 border rounded"
          value={newTask}
          onChange={(e) => setNewTask(e.target.value)}
          placeholder="Add a new task..."
        />
        <button
          onClick={addTask}
          className="ml-2 p-2 bg-blue-500 text-white rounded hover:bg-blue-600"
        >
          Add
        </button>
      </div>
      <ul>
        {tasks.map((task, index) => (
          <li key={index} className="flex justify-between items-center mb-2">
            <span
              className={`flex-1 ${task.completed ? 'line-through text-gray-500' : ''}`}
              onClick={() => toggleTaskCompletion(index)}
            >
              {task.text}
            </span>
            <button
              onClick={() => deleteTask(index)}
              className="ml-4 p-1 bg-red-500 text-white rounded hover:bg-red-600"
            >
              Delete
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

第 3 步：将组件集成到应用程序中

TodoList 组件准备就绪后，将其集成到主 App.js 文件中。方法如下：

import './App.css';
import TodoList from './components/TodoList';

function App() {
  return (
    <div className="App">
      <TodoList />
    </div>
  );
}

export default App;

第四步：测试你的工作！

通过运行：

npm start

我们可以看到待办事项列表页面的基本布局，如下所示：

输入您的待办事项：

单击“添加”按钮添加待办事项：

切换已完成的任务：

点击删除按钮删除您不再想要的任务：

结论

使用 React 和 TailwindCSS 构建此待办事项列表有助于展示将 React 等基于组件的库与实用程序优先的 CSS 框架相结合的强大功能。 React 的状态管理与 Tailwind 简单、直观的样式相结合，使我们能够快速创建响应式、交互式应用程序。

您可以通过以下方式继续增强此应用程序：

• 将任务保留在 localStorage 中，以便在页面刷新之间保存它们。

• 为任务添加截止日期或优先级。

• 用更复杂的样式和动画扩展设计。

感谢您的阅读！我希望这个项目能够激发您使用 React 和 TailwindCSS 进行更多探索。

以上是使用 React 和 Tailwind CSS 的简单待办事项列表应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！