实践记录：使用React实现一个简单的待办事项列表
一、项目背景 在参加字节青训营前端基础课程期间，我选择了以React框架为基础，实现一个简单的待办事项列表的实践项目。通过这个项目，我可以加深对React的理解，并熟悉React的开发流程和工具使用。
二、项目准备 在开始项目之前，首先需要配置React开发环境。我选择使用create-react-app工具来快速创建项目。使用以下命令创建一个新的React应用：
npx create-react-app todo-list
cd todo-list
三、项目实施
-
创建组件 首先，我创建了两个组件：TodoList和TodoItem。TodoList组件负责渲染整个待办事项列表，TodoItem组件负责渲染每一个待办事项。 在src目录下创建components文件夹，并在该文件夹下创建TodoList.js和TodoItem.js两个文件。
-
实现待办事项添加功能 在TodoList组件中，我使用useState钩子来管理待办事项列表的状态。通过输入框获取用户输入的待办事项内容，并将其添加至列表中。在提交表单时，我用一个自定义的函数handleAdd来处理添加操作，并更新列表的状态。
-
实现待办事项编辑和删除功能 在TodoItem组件中，我使用useState钩子来管理每一个待办事项的状态。通过点击待办事项，可以将其内容显示在输入框中，并进行编辑操作。同时，我在每一个待办事项后面添加了一个删除按钮，点击按钮可以删除该待办事项。
-
整合组件 在App.js中，我将TodoList组件引入，并在其中使用TodoItem组件来渲染每一个待办事项。通过传递props的方式，实现待办事项的删除功能。
import React, { useState } from 'react';
import TodoList from './components/TodoList';
function App() {
const [todos, setTodos] = useState([]);
const handleDelete = (todo) => {
const updatedTodos = todos.filter((item) => item !== todo);
setTodos(updatedTodos);
};
return (
<div>
<h1>待办事项列表</h1>
<TodoList todos={todos} onDelete={handleDelete} />
</div>
);
}
export default App;
- 运行项目 在命令行中输入以下命令启动项目：
npm start
此时，会自动打开一个浏览器窗口，显示出待办事项列表页面。你可以尝试添加、编辑和删除待办事项，页面上的列表会实时更新。
四、总结与收获 通过完成以上实践项目，我深入了解了React框架的基本概念和开发流程。在实践中，我学会了如何使用React的函数式组件和钩子函数来管理组件的状态，以及如何通过props来传递参数和实现组件间的通信。同时，我还掌握了使用useState钩子来处理表单提交和按钮点击等交互事件的方法。
在工具使用方面，我熟悉了create-react-app工具的基本操作，它能够帮助我们快速搭建React项目的开发环境。此外，我还学习了使用npm命令来安装和管理项目依赖。
通过这个实践项目，我不仅加深了对React的理解，还提升了前端开发的实际操作能力。我相信这些收获将对我在字节青训营的学习和未来的工作中产生积极的影响。
