想不想自己动手做个任务管理小工具？那种可以记下待办事项、划掉完成任务的超爽感觉！今天咱就一起用React和Tailwind CSS，从零开始整一个简单又好看的任务管理应用。别担心，我会尽量讲得像聊天一样，带你一步步把这玩意儿搞出来，适合新手，包你学到东西！

简单来说，咱们要做的这个小工具能让你：

我们会用React来搭页面和处理逻辑，用Tailwind CSS来让界面美美哒。而且，为了省事儿，我们直接用CDN把工具引入，不用装一堆乱七八糟的东西，爽快开干！

咱们先创建一个简单的HTML文件，把需要的工具都拉进来。代码长这样：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的任务管理器</title>
  <script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.development.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    // 待会儿在这儿写React代码
  </script>
</body>
</html>

，用浏览器打开，暂时啥也看不到，因为我们还没写核心代码。

这个任务管理器大概有这几个部分：

来存任务列表。每个任务有编号（id）、内容（text）和是否完成（completed）。

是个大管家，负责存任务、加任务、删任务和切换任务状态。界面上有个标题、一个输入框（TaskForm）和任务列表（TaskList）。

输入框部分很简单，就是一个文本框加个按钮。输入任务后点按钮，就能加到列表里。

(3) 任务列表和单个任务：展示和操作

任务列表就是把所有任务列出来，每个任务是个

function TaskList({ tasks, deleteTask, toggleTask }) {
  return (
    <ul className="space-y-2">
      {tasks.map(task => (
        <TaskItem key={task.id} task={task} deleteTask={deleteTask} toggleTask={toggleTask} />
      ))}
    </ul>
  );
}

function TaskItem({ task, deleteTask, toggleTask }) {
  return (
    <li className="flex items-center justify-between p-2 bg-gray-100 rounded-md">
      <span
        onClick={() => toggleTask(task.id)}
        className={`cursor-pointer ${task.completed ? "line-through text-gray-500" : ""}`}
      >
        {task.text}
      </span>
      <button
        onClick={() => deleteTask(task.id)}
        className="p-1 text-red-500 hover:text-red-700"
      >
        删除
      </button>
    </li>
  );
}

点击任务内容可以切换“完成/未完成”，完成的任务会加删除线，点击“删除”按钮就没了。

ReactDOM.render(<App />, document.getElementById("root"));

Tailwind CSS已经帮我们把样式搞得挺漂亮了，比如：

这些类名直接写在组件里，简单又直观。

用浏览器打开，试试加几个任务，比如“买牛奶”“写代码”，然后删掉或者标记完成。爽不爽？

把所有代码放一起，就是这个HTML文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的任务管理器</title>
  <script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.development.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    function App() {
      const [tasks, setTasks] = React.useState([]);

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

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

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

      return (
        <div className="max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-xl">
          <h1 className="text-2xl font-bold text-center mb-6">我的任务管理器</h1>
          <TaskForm addTask={addTask} />
          <TaskList tasks={tasks} deleteTask={deleteTask} toggleTask={toggleTask} />
        </div>
      );
    }

    function TaskForm({ addTask }) {
      const [input, setInput] = React.useState("");

      const handleSubmit = (e) => {
        e.preventDefault();
        if (!input.trim()) return;
        addTask(input);
        setInput("");
      };

      return (
        <div className="mb-6">
          <input
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder="输入新任务，比如'遛狗'"
            className="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          <button
            onClick={handleSubmit}
            className="w-full mt-2 p-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
          >
            加任务
          </button>
        </div>
      );
    }

    function TaskList({ tasks, deleteTask, toggleTask }) {
      return (
        <ul className="space-y-2">
          {tasks.map(task => (
            <TaskItem key={task.id} task={task} deleteTask={deleteTask} toggleTask={toggleTask} />
          ))}
        </ul>
      );
    }

    function TaskItem({ task, deleteTask, toggleTask }) {
      return (
        <li className="flex items-center justify-between p-2 bg-gray-100 rounded-md">
          <span
            onClick={() => toggleTask(task.id)}
            className={`cursor-pointer ${task.completed ? "line-through text-gray-500" : ""}`}
          >
            {task.text}
          </span>
          <button
            onClick={() => deleteTask(task.id)}
            className="p-1 text-red-500 hover:text-red-700"
          >
            删除
          </button>
        </li>
      );
    }

    ReactDOM.render(<App />, document.getElementById("root"));
  </script>
</body>
</html>

这项目简单但实用，React的组件化开发和Tailwind CSS的快速样式真的很香！做完这个，你会对前端开发更有感觉。试着跑跑代码，玩玩看，说不定还能加点自己的创意，比如给任务加个截止日期啥的。快去试试吧，编程的乐趣就在于边做边学！

用React和Tailwind CSS搞个超实用任务管理小工具

想不想自己动手做个任务管理小工具？那种可以记下待办事项、划掉完成任务的超爽感觉！今天咱就一起用React和Tailwind CSS，从零开始整一个简单又好看的任务管理应用。别担心，我会尽量讲得像聊天一样，带你一步步把这玩意儿搞出来，适合新手，包你学到东西！这项目是干啥的？简单来说，咱们要做的这个小工具能让你：添加新任务，比如“买猫粮”或者“写作业”。删掉不要的任务。把任务标记为“已完成”或者“未完

产品KOL

开发工具

用React和Tailwind CSS快速搭建响应式任务管理工具，支持添加、删除、标记任务完成，无需安装环境，通过CDN直接运行，适合新手学习前端开发。

CDN 境内流量包 1元起 ，更有新老同享套餐包0.09元/GB起，立即选购


文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

用React和Tailwind CSS搞个超实用任务管理小工具

用React和Tailwind CSS搞个超实用任务管理小工具

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐