-
{todos.map(todo => (
当前位置： 技术文章>> 如何在React中创建一个简单的Todo List应用？
文章标题：如何在React中创建一个简单的Todo List应用？
在React中创建一个简单的Todo List应用是一个绝佳的入门项目，它不仅能帮助你理解React的基本概念，如组件、状态（state）和事件处理（event handling），还能让你实践React的应用架构。接下来，我将引导你一步步构建一个功能完备的Todo List应用，过程中会融入React的核心思想，并适时提及“码小课”网站上的学习资源，以便你在遇到难题时进一步深入学习。
### 第一步：项目初始化
首先，确保你已经安装了Node.js和npm（Node Package Manager）。然后，你可以使用Create React App这个脚手架工具来快速搭建项目框架。打开终端或命令行界面，运行以下命令来创建一个新的React应用：
```bash
npx create-react-app todo-list
cd todo-list
npm start
```
上述命令会创建一个名为`todo-list`的新目录，并在其中设置React应用的初始结构。运行`npm start`后，应用将在浏览器中自动打开（通常是`http://localhost:3000/`），并显示React的欢迎页面。
### 第二步：创建TodoItem组件
在Todo List应用中，每个待办事项（Todo Item）都可以视为一个独立的组件。首先，在`src`目录下创建一个新的文件夹命名为`components`，然后在该文件夹内创建一个名为`TodoItem.js`的文件。这个文件将定义TodoItem组件。
```jsx
// src/components/TodoItem.js
import React from 'react';
function TodoItem({ todo, onToggleComplete }) {
return (
onToggleComplete(todo.id)}
/>
{todo.text}
);
}
export default TodoItem;
```
这个组件接收两个props：`todo`（一个包含待办事项文本和完成状态的对象）和`onToggleComplete`（一个函数，用于切换待办事项的完成状态）。注意，我们使用了内联样式来根据待办事项的完成状态添加删除线效果。
### 第三步：创建TodoList组件
接下来，我们需要一个`TodoList`组件来管理多个TodoItem的渲染。在`src/components`目录下创建`TodoList.js`文件。
```jsx
// src/components/TodoList.js
import React from 'react';
import TodoItem from './TodoItem';
function TodoList({ todos, onToggleComplete }) {
return (