React实践项目--todolist（1）初始化配置

本系列文章会展示如何使用 React 构建一个简单的 todo_list 项目。由于我们还没有学习 redux ，所以 纯 React 来管理数据，以此来巩固 React 基础。 加油💪🏻

初始化项目

1. 使用 npx create-react-app todo_list 初始化项目 等待安装成功后，运行 cd todo_list & npm start，系统会自动打开浏览器页面 http://localhost:3000/ 。此时，看到一个旋转的 React 图标，就说明项目运行成功了！ 💐

运行 npm i sass -D 在项目中使用 sass 来编写 css

2. 删除 src/App.js 部分内容，保留如下内容：

import "./App.css";

function App() {
  return <div className="App"></div>;
}

export default App;

3. 创建 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 此处不再赘述*

4. 创建 src/utils 文件夹 在这个文件夹中，我们将会创建工具方法：

• 创建 Context：src/utils/context.js
• 模拟获取数据接口：src/utils/getData.js
• React 的 Http 组件：src/utils/Http.js
• 导出 utils 中所有方法： src/index.js

至此，项目所需的基本文件结构已经创建完成！下一章我们要开始从 Http 组件开始分析该项目。