（三）React脚手架
React脚手架
1、React脚手架
React脚手架的概念：
React脚手架和Vue脚手架类似，都是用来帮助程序员快速创建一个基于React的模板项目，包含了
所有需要的配置（语法检查、jsx编译、devServer…）
下载好了所有相关的依赖（基础的依赖库）
可以直接运行一个简单效果
项目的整体技术架构为: react + webpack + es6 + eslint
React脚手架的优点：
● 无需配置；
● 集成了对 React, JSX, ES6 和 Flow 的支持；
● 集成了开发服务器；
● 源码非常清晰，没有多余的文件。
2、React脚手架的基本用法
使用步骤：
1.安装 5.x 版本的 React脚手架
//全局安装
npm i create-react-app -g
2.基于5.x版本的脚手架创建React项目
//切换到想创项目的目录，使用命令，创建 React 项目(基于 交互式命令行 的方式)
create-react-app my-project
3.基于5.x版本的脚手架启动React项目
//进入项目所在的文件夹
cd my-project
//启动项目
npm start
3、React脚手架生成的项目结构分析
项目结构分析
那么这三个红框里面的到底是什么呢？我们来简单做个解释。
index.html 文件 : 这是项目的入口文件，所有的代码运行，都是从这个文件开始的，React 框架代码，也是从这个文件中载入的；
index.js 文件：这是框架的入口文件，React 是组件形式的，所有组件，都会通过 index.js 文件载入；
App.js 文件：这是 React 框架给我们的组件示例代码，一般也作为加载其他组件的主入口文件；
这三者的关系是这样的：index.html 作为项目入口文件，加载 index.js ；index.js 文件作为框架的入口文件，加载 App.js ；App.js 作为组件的主入口文件，加载其他组件。
index.html 文件结构分析
拓展：
html套壳技术：原生 WebView + HTML5 网页内容的形式。（Hybrid App（混合应用））
.html套个壳子就可以生成.apk
- 只需要开发一套 HTML5 业务逻辑，就可以同时运行在不同的平台上，相对比较灵活，内容可以快速更新，开发维护成本较低。最大的缺点就是性能远不及原生应用，交互上也做不到原生的那么自然。 目前非常多的电商或应用APP，只有8Mb这么小，本质就是使用了套壳业务，里面是html5的界面。
- 1）可以使用 原生安卓+WebView 做一个APP外壳
- 2）Flutter外壳的生成方法，可以使用插件flutter_webview、flutter_webview_plugin做个APP外壳
- 3）H5的界面，现在使用手机做UI的前端非常多，目前常用的有Vant等。
- 4）权限认证问题，可以使用token、cookie都可以。
- 5）可以扩展Zxing实现二维码、Android与JS交互、文件下载、自定义交互(进度条、下拉回弹)等功能
4、创建简单Hello组件
初始化一个基本的项目
1.初始化index.js
2.初始化index.html
3.初始化根组件App.jsx
4.初始化子组件Hello.jsx
最终效果
4.1 样式的模块化
问题描述：当不同组件中的
css规则，存在冲突时，高优先级的样式，就会覆盖低优先级的样式。解决方法：css预处理工具（更常用） 和 css 模块化
4.2 vscode中的React插件
- rcc快速生成类式组件模板（React中的class类式component组件）
- rfc快速生成函数式组件模板（React中的function函数式component组件）
5、功能界面的组件化编码流程（通用）
- 拆分组件: 拆分界面,抽取组件
- 实现静态组件: 使用组件实现静态页面效果
- 实现动态组件
- 动态显示初始化数据（存放在状态state）
- 数据类型
- 数据名称
- 保存在哪个组件?
- 交互(从绑定事件监听开始)
6、TodoList待办事项的案例🔥
6.1 拆分组件
- 拆分界面,抽取组件（把一整个静态页面拆分成多个组件）
6.2 实现静态组件
-
使用组件实现静态页面效果（拆组件，拆样式）
6.3 实现动态组件
难点1：子组件如何向父组件传值
难点2：已完成个数统计（数组reduce方法）
难点3：每个doto勾选与总勾选框状态同步（checked）
6.4 总结TodoList案例
需要理解的概念有：
(1)拆分组件时，要拆到位，结构、样式都要拆。
(2)组件化编码流程：
1. 拆分组件: 根据功能抽取组件
2. 实现静态组件: 使用组件实现静态页面效果
3. 实现动态组件
3.1 动态显示初始化数据
3.1.1 数据类型
3.1.2 数据名称
3.1.2 保存在哪个组件?
3.2 交互(从绑定事件监听开始)
(3)src/App.css放程序员写的公共样式
(4)public/css/bootstrap.css放成型的第三方公共样式
(5)关于父子之间通信：
1.【父组件】给【子组件】传递数据：通过props传递
2.【子组件】给【父组件】传递数据：通过props传递，要求父提前给子传递一个函数
(6)动态初始化列表，如何确定将数据放在哪个组件的state中？
——某个组件使用：放在其自身的state中
——某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升）
(7)关于react中<input type="checkbox">的checked属性与defaultChecked
1.checked属性，时时刻刻起作用，而且必须配合disabled或onChange使用，否则就不能改了。
2.defaultChecked属性，只起一次作用，可以单独使用 （不建议使用）
(8)状态在哪里，操作状态的方法就在哪里
(9)熟练使用数组的reduce方法
{
const { todos } = this.props;
const doneCount = todos.reduce((pre, curr) => pre + (curr.done ? 1 : 0), 0);
return (
<div className='todo-footer'>
<label>
<input
type='checkbox'
checked={todos.length === doneCount && todos.length > 0}
onChange={this.updateAll}
/>
</label>
<span>
<span>已完成{doneCount}</span> / 全部{todos.length}
</span>
<button onClick={this.deleteAllDone} className='btn btn-danger'>
清除已完成任务
</button>
</div>
);
}
deleteAllDone = () => {
this.props.deleteAllDoneTodo();
};
updateAll = (e) => {
this.props.updateAllTodo(e.target.checked);
};
}
