首页 > 文章 > web前端 > 使用 React 和 Tailwind CSS 的简单待办事项列表应用程序

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

Susan Sarandon原创: 2024-10-04 11:39:291057浏览

在这篇博文中，我将引导您完成使用 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;