❝
本系列文章会展示如何使用
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 组件开始分析该项目。
原文始发于微信公众号（前端华先生）：React实践项目–todolist（1）初始化配置
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/55330.html
