20、从 React 类组件迁移：构建动态待办事项应用

从 React 类组件迁移：构建动态待办事项应用

1. 映射容器组件

在构建 React 应用时，我们首先需要规划容器组件，将简单组件组合在一起。以下是我们需要的组件：
- App
- Header
- AddTodo
- TodoList
- TodoItem
- TodoFilter (+ TodoFilterItem)

其中， TodoList 组件使用 TodoItem 组件来显示每个待办事项， TodoFilter 组件内部使用 TodoFilterItem 组件来显示各种过滤器。

2. 初始化项目

我们将使用一个基础的 Vite 应用来创建新项目，具体操作步骤如下：
1. 复制 Chapter01_3 文件夹到新的 Chapter13_1 文件夹：

$ cp -R Chapter01_3 Chapter13_1

2. 在 VS Code 中打开新的 Chapter13_1 文件夹。
3. 删除当前的 src/App.jsx 文件，因为我们将在下一步创建一个新的文件。

3. 定义应用结构

3.1 创建 App 组件