React全家桶（三）React脚手架

React全家桶

React全家桶	地址
React全家桶(一)之React入门	https://blog.csdn.net/article/124120080
React全家桶(二)之组件化编程	https://blog.csdn.net/article/124194107
React全家桶(三)之React脚手架	https://blog.csdn.net/article/124281588
React全家桶(四)之axios请求数据	https://blog.csdn.net/article/124281650
React全家桶(五)之React-router路由	https://blog.csdn.net/article/124453733
React全家桶(六)之redux状态管理	https://blog.csdn.net/article/124454379

React脚手架

✍目录总览：

1、React脚手架

React脚手架的概念：

• React脚手架和Vue脚手架类似，都是用来帮助程序员快速创建一个基于React的模板项目，包含了

  1. 所有需要的配置（语法检查、jsx编译、devServer…）

  2. 下载好了所有相关的依赖（基础的依赖库）

  3. 可以直接运行一个简单效果

项目的整体技术架构为: 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、功能界面的组件化编码流程（通用）

1. 拆分组件: 拆分界面,抽取组件
2. 实现静态组件: 使用组件实现静态页面效果
3. 实现动态组件
   1. 动态显示初始化数据（存放在状态state）
      1. 数据类型
      2. 数据名称
      3. 保存在哪个组件?
   2. 交互(从绑定事件监听开始)

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);
	};
}