介绍
在本教程中，我们将使用 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"
/>
<button onclick={addtask}>add task</button>
<ul>
{tasks.map((t, index) => (
<todoitem
key={index}
task={t}
index={index}
togglecompletion={togglecompletion}
deletetask={deletetask}
/>
))}
</ul>
</div>
);
};
export default todolist;
todoitem 组件
todoitem 组件管理每个任务的显示，以及将其标记为已完成或删除的选项。
const todoitem = ({ task, index, togglecompletion, deletetask }) => {
return (
<li classname={task.completed ? "completed" : ""}>
<span onclick={() => togglecompletion(index)}>{task.text}</span>
<button onclick={() => deletetask(index)}>delete</button>
</li>
);
};
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 = () => {
const [islighttheme, setislighttheme] = usestate(false);
const toggletheme = () => {
setislighttheme(!islighttheme);
};
return (
<div classname={islighttheme ? "light-theme" : ""}>
<div classname="app">
<div classname="header">
<div classname="title">
<h1>todo</h1>
</div>
<div classname="mode" onclick={toggletheme}>
<img src={islighttheme ? moon : sun} alt="theme-icon" />
</div>
</div>
<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.git cd todo-list npm install npm start
应用程序将在 http://localhost:3000 开始运行。
现场演示
在此处查看待办事项列表的现场演示。
结论
todo list 项目是练习在 react 中使用状态、列表和事件处理的好方法。它演示了如何构建一个有用的应用程序，可以使用 localstorage 跨会话保存数据。
制作人员
- 灵感：受到对简单有效的任务管理工具的需求的启发。
作者
abhishek gurjar 是一位充满热情的 web 开发人员。你可以在 github 上查看他的更多项目。
