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

百变鹏仔 3个月前 (09-19) #CSS

文章标签应用程序

介绍

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

项目概况

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

特征

使用的技术

项目结构

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

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

关键部件

代码说明

待办事项列表组件

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

import { usestate, useeffect } from "react";import todoitem from "./todoitem";const todolist = () =&gt; {  const [task, settask] = usestate("");  const [tasks, settasks] = usestate([]);  useeffect(() =&gt; {    const savedtasks = json.parse(localstorage.getitem("tasks")) || [];    settasks(savedtasks);  }, []);  useeffect(() =&gt; {    localstorage.setitem("tasks", json.stringify(tasks));  }, [tasks]);  const addtask = () =&gt; {    if (task.trim()) {      settasks([...tasks, { text: task, completed: false }]);      settask("");    }  };  const togglecompletion = (index) =&gt; {    const newtasks = tasks.map((t, i) =&gt;      i === index ? { ...t, completed: !t.completed } : t    );    settasks(newtasks);  };  const deletetask = (index) =&gt; {    const newtasks = tasks.filter((_, i) =&gt; 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} deletetask(index)}>delete

);};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(230, 50%, 20%) , hsl(280, 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.gitcd todo-listnpm installnpm start

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

现场演示

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

结论

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

制作人员

作者

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

文章推荐