本系列文章会展示如何使用
React构建一个简单的todo_list项目。由于我们还没有学习redux，所以纯 React来管理数据，以此来巩固React基础。
加油💪🏻
初始化项目
- 使用
npx create-react-app todo_list初始化项目
等待安装成功后，运行cd todo_list & npm start，系统会自动打开浏览器页面http://localhost:3000/。此时，看到一个旋转的React图标，就说明项目运行成功了！ 💐
运行 npm i sass -D 在项目中使用 sass 来编写 css
- 删除
src/App.js部分内容，保留如下内容：
import "./App.css";
function App() {
return <div className="App"></div>;
}
export default App;
- 创建
src/components文件夹
由于我们要实践React的基本传值功能（也是为了对比后面学习的redux），我们要抽离出简单的组件，体会通过props传值和基本事件的不便。
在这个文件夹中，我们要创建几个基础组件文件夹:
- 输入框：
src/components/InputItem - 切换全部/已完成 Tab：
src/components/TodoTabs - todo 列表：
src/components/TodoList - 列表项：
src/components/TodoItem - 加载中：
src/components/Loading - 操作列表项：
src/components/IsCheck
- 每个组件文件夹中都创建
index.jsx和index.scss此处不再赘述*
- 创建
src/utils文件夹
在这个文件夹中，我们将会创建工具方法：
- 创建
Context：src/utils/context.js - 模拟获取数据接口：
src/utils/getData.js -
React的Http组件：src/utils/Http.js - 导出
utils中所有方法：src/index.js
至此，项目所需的基本文件结构已经创建完成！下一章我们要开始从 Http 组件开始分析该项目。
