介绍
在本教程中，我们将使用 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 ( todo list
settask(e.target.value)} placeholder="add a new task" /> {tasks.map((t, index) => ( ))}
);};export default todolist;
todoitem 组件
todoitem 组件管理每个任务的显示，以及将其标记为已完成或删除的选项。
const todoitem = ({ task, index, togglecompletion, deletetask }) => { return ( 在此组件中，我们从父 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 = () => { const [islighttheme, setislighttheme] = usestate(false); const toggletheme = () => { setislighttheme(!islighttheme); }; return ( todo
@@##@@ made with ❤️ by abhishek gurjar
拍客piikee竞拍系统 拍客竞拍系统是一款免费竞拍网站建设软件，任何个人可以下载使用，但未经商业授权不能进行商业活动，程序源代码开源，任何个人和企业可以进行二次开发，但不能以出售和盈利为目的。安装方法，将www文件夹里面的所有文件上传至虚拟主机，在浏览器执行http://你的域名/install.php或者直接导入数据库文件执行。本次升级优化了一下内容1，程序和模板完美分离。2，优化了安装文件。3，后台增加模板切换功能。
0 查看详情 
);};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 上查看他的更多项目。
以上就是使用 React 构建主题切换的 Todo 应用程序的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1629834.html
微信扫一扫 
支付宝扫一扫 
