💡 如果还不了解 HTML 、 CSS和JS，可以参考本号下的 HTML21 天入门教程、 CSS 21 天入门教程和JS21天入门教程。

前面在学习前端基础知识的时候，有一个小小的练手项目，我的任务管理。

当时是、使用 HTML + CSS + JavaScript 开发的。

现在我们使用 React 对它进行改造，来看看有哪些不同。

组件拆分

在进行 React 开发的第一件事，是要清楚我们要开发哪些组件。

不要忘了 React 是基于组件的。

​

• CreateTask
• TaskList
• Task

其中子组件 Task 在组件 TaskList 里面，展示所有的 Task。

数据传递

与此同时，要考虑数据在组件之间的传递。

基于上述的组件划分和功能，可以比较清楚地得到这里有两个主要的数据传输。

• 在最顶层的父组件 App 里，维护任务列表。
• 组件 CreateTask 通过回调函数，在每次新增 Task 里把数据传递回父组件。
• 组件 TaskList 从父组件 App 获得任务列表。
• 组件 Task 从父组件 TaskList 获得单个任务数据。

基于这样的设计，每个组件的实现部分就相对明确了。

创建 React 项目

来复习一下如何创建 React 项目。

在本地某个工作目录中，使用 create-react-app my-task-react 创建一个新的 react 项目。

切换到目录 my-task-react 之后使用 npm start 运行此项目。

明天来实现细节。

总结

最后来总结一下今天的内容要点：