插件窝 干货文章 使用 React 构建主题切换的 Todo 应用程序

使用 React 构建主题切换的 Todo 应用程序

strong background 待办 color 848    来源:    2024-10-20

介绍

在本教程中,我们将使用 react 构建一个 待办事项列表 web 应用程序。该项目有助于理解状态管理、事件处理以及在 react 中使用列表。对于想要增强 react 开发技能的初学者来说,它是完美的选择。

项目概况

待办事项列表应用程序允许用户添加、标记为已完成和删除任务。它提供了一个干净的界面来管理日常任务。该项目展示了如何使用 react 来管理简单而动态的应用程序的状态。

特征

  • 添加新任务:用户可以将任务添加到列表中。
  • 标记为已完成:用户可以将任务标记为已完成。
  • 删除任务:用户可以从列表中删除任务。
  • 本地存储:使用 localstorage 在页面重新加载时保留任务。

使用的技术

  • react:用于构建用户界面和管理组件状态。
  • css:用于设计应用程序的样式。
  • javascript:核心逻辑和功能。

项目结构

项目结构遵循典型的 react 项目布局:

├── public
├── src
│   ├── components
│   │   ├── todolist.jsx
│   │   ├── todoitem.jsx
│   ├── app.jsx
│   ├── app.css
│   ├── index.js
│   └── index.css
├── package.json
└── readme.md

关键部件

  • todolist.jsx:处理待办事项列表的显示和管理。
  • todoitem.jsx:管理单个待办事项,包括将它们标记为已完成或删除它们。

代码说明

待办事项列表组件

该组件处理整个待办事项列表的状态,包括添加新任务和渲染列表。

import { usestate, useeffect } from "react";
import todoitem from "./todoitem";

const todolist = () => {
  const [task, settask] = usestate("");
  const [tasks, settasks] = usestate([]);

  useeffect(() => {
    const savedtasks = json.parse(localstorage.getitem("tasks")) || [];
    settasks(savedtasks);
  }, []);

  useeffect(() => {
    localstorage.setitem("tasks", json.stringify(tasks));
  }, [tasks]);

  const addtask = () => {
    if (task.trim()) {
      settasks([...tasks, { text: task, completed: false }]);
      settask("");
    }
  };

  const togglecompletion = (index) => {
    const newtasks = tasks.map((t, i) =>
      i === index ? { ...t, completed: !t.completed } : t
    );
    settasks(newtasks);
  };

  const deletetask = (index) => {
    const newtasks = tasks.filter((_, i) => i !== index);
    settasks(newtasks);
  };

  return (
    <div classname="todo-list">
      <h1>todo list</h1>
      <input type="text" value="{task}" onchange="{(e)"> settask(e.target.value)}
        placeholder="add a new task"
      /&gt;
      <button onclick="{addtask}">add task</button>
      <ul>
        {tasks.map((t, index) =&gt; (
          <todoitem key="{index}" task="{t}" index="{index}" togglecompletion="{togglecompletion}" deletetask="{deletetask}"></todoitem>
        ))}
      </ul>
</div>
  );
};

export default todolist;

todoitem 组件

todoitem 组件管理每个任务的显示,以及将其标记为已完成或删除的选项。

const todoitem = ({ task, index, togglecompletion, deletetask }) =&gt; {
  return (
    

  • togglecompletion(index)}>{task.text}
  • ); };

    export default todoitem;

    在此组件中,我们从父 todolist 接收 props 并处理诸如切换任务完成或删除任务之类的操作。

    应用程序组件

    app.jsx 作为应用程序的根,渲染 todolist 组件。

    import  { usestate } from "react";
    import "./app.css";
    import todolist from './components/todolist';
    import sun from "./assets/images/icon-sun.svg";
    import moon from "./assets/images/icon-moon.svg";
    
    const app = () =&gt; {
      const [islighttheme, setislighttheme] = usestate(false);
    
      const toggletheme = () =&gt; {
        setislighttheme(!islighttheme);
      };
    
      return (
        <div classname="{islighttheme" :>
          <div classname="app">
            <div classname="header">
              <div classname="title">
                <h1>todo</h1>
              </div>
              <div classname="mode" onclick="{toggletheme}">
                @@##@@
              </div>
            </div>
            <todo></todo><div classname="footer">
            <p>made with ❤️ by abhishek gurjar</p>
          </div>
          </div>
    
        </div>
      );
    };
    
    export default app;
    
    

    css 样式

    css 确保待办事项列表应用程序用户友好且响应迅速。

    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      padding: 0;
      font-family: josefin sans, sans-serif;
    }
    
    .app {
      width: 100%;
      height: 100vh;
      background-color: #161722;
      color: white;
      background-image: url(./assets//images/bg-desktop-dark.jpg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position-x: center;
      background-position-y: top;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-direction: column;
    }
    .header {
      width: 350px;
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .title h1 {
      font-size: 30px;
      letter-spacing: 7px;
    }
    .mode {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mode img {
      width: 22px;
    }
    
    .todo {
      width: 350px;
      flex-direction: column;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .input-box {
      border-bottom: 1px solid white;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #25273c;
      width: 100%;
      gap: 10px;
      padding: 8px;
      border-radius: 10px;
    }
    .check-circle {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 1px solid white;
      display: flex;
      align-items: center;
      justify-content: center;
      background-image: linear-gradient(to right,hsl(null, 50%, 20%) , hsl(null, 46%, 28%));
    }
    
    .input-task {
      width: 90%;
      border: none;
      color: white;
      background-color: #25273c;
    }
    .input-task:focus {
      outline: none;
    }
    .todo-list {
    
      margin-top: 20px;
      width: 350px;
      background-color: #25273c;
    }
    .todo-box {
    
      margin-inline: 15px;
      margin-block: 10px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 15px;
    }
    .todo-box .cross{
    width: 14px;
    }
    .details {
      margin-bottom: 40px;
    border-bottom: 1px solid white;
      width: 350px;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      background-color: #25273c;
      font-size: 12px;
      padding: 12px;
      border-bottom-right-radius: 7px;
      border-bottom-left-radius: 7px;
    }
    
    .details .clickbtn{
      cursor: pointer;
    
    }
    .details .clickbtn:hover{
    color: #3074fd;
    
    }
    
    
    /* //light theme  */
    
    
    .light-theme .app {
      background-color: #fff;
      color: #000;
      background-image: url(./assets//images/bg-desktop-light.jpg);
    }
    
    .light-theme .header {
    color: white;
    }
    
    .light-theme .input-box{
      background-color: white;
      color: black;
      border-bottom: 1px solid black;
    }
    .light-theme input{
      background-color: white;
      color: black;
    }
    .light-theme .check-circle{
      border:1px solid black;
    
    }
    .light-theme  .todo-list{
      background-color: white;
      color: black;
    }
    .light-theme .details{
      border-bottom: 1px solid black;
      background-color: white;
      color: black;
    }
    
    .footer{
     margin: 40px;
    }
    

    这些样式确保待办事项列表简单干净,同时允许任务管理。

    安装与使用

    首先,克隆存储库并安装依赖项:

    git clone https://github.com/abhishekgurjar-in/todo_list.git
    cd todo-list
    npm install
    npm start
    

    应用程序将在 http://localhost:3000 开始运行。

    现场演示

    在此处查看待办事项列表的现场演示。

    结论

    todo list 项目是练习在 react 中使用状态、列表和事件处理的好方法。它演示了如何构建一个有用的应用程序,可以使用 localstorage 跨会话保存数据。

    制作人员

    • 灵感:受到对简单有效的任务管理工具的需求的启发。

    作者

    abhishek gurjar 是一位充满热情的 web 开发人员。你可以在 github 上查看他的更多项目。

        <img src="%7Bislighttheme" moon : sun alt="theme-icon">