第八部分：阶段项目 6：构建 React 前端应用

现在，是时候将你学到的 React 基础知识付诸实践，构建一个简单的前端应用来模拟与后端 API 的交互了。在这个阶段，你可以先使用模拟数据，或者如果你的后端 API（阶段项目 5）已经搭建好，可以直接连接真实的 API。

选择以下一个项目：

项目选择 1：React 博客文章查看器

构建一个简单的 React 应用，用于显示博客文章列表和单篇文章详情。

• 主页显示所有文章的列表（标题和作者）。
• 点击文章标题，跳转到文章详情页面，显示文章的标题、作者和内容。

项目选择 2：React 任务列表应用

构建一个简单的 React 应用，用于显示待办任务列表。

• 显示所有任务的列表（任务描述和完成状态）。
• 每个任务项旁边有一个标记完成的按钮或复选框。点击可以切换任务的完成状态。
• 顶部有一个输入框和按钮，用于添加新的任务。

项目要求：

1. 使用 Vite 创建 React 项目。
2. 使用功能组件和 Hooks (useState, useEffect)。
3. 使用 Props 在父子组件之间传递数据。
4. 使用 State 管理组件内部状态（如输入框的值，加载状态等）。
5. 使用 useEffect Hook 在组件挂载时获取数据（可以是模拟数据，或者从你之前构建的后端 API 获取）。
6. 使用 map 方法渲染列表数据。
7. 使用条件渲染根据数据或状态显示不同内容（如加载提示，任务完成状态等）。
8. 处理用户交互事件（点击按钮，输入文本）。
9. （可选）如果你的项目涉及跨组件状态共享，尝试使用 Context API。
10. 组织你的组件到单独的文件和目录中（例如 src/components）。

实施步骤建议：

1. 使用 Vite 创建项目。
2. 根据项目需求，规划组件结构（例如，一个列表容器组件，一个列表项组件；或者一个表单组件，一个任务列表组件）。
3. 使用 useState 创建 State 来存储需要动态显示的数据（例如，文章列表、任务列表、加载状态、输入框值）。
4. 使用 useEffect Hook 在应用启动或特定条件变化时获取数据（模拟或真实 API）。
5. 创建子组件，并使用 Props 从父组件接收数据。
6. 在组件中实现列表渲染和条件渲染。
7. 添加事件处理函数来响应用户操作（如点击、输入），并更新 State 或调用模拟/真实 API 进行数据操作。
8. 如果需要，使用 Context API 共享状态。
9. 运行开发服务器 (npm run dev)，在浏览器中查看和测试你的应用。

完成这个项目，你将能够独立构建一个简单的 React 前端应用，并为后续学习如何将它与后端 API 完整集成打下坚实基础。