一、 React是什么？
概念：轻量级视图层框架、组件系统、单向数据流、前后端分离的单页面应用
创造：2012 开源：2013
MVC不适合大规模的应用，每当需要添加一项新功能或者特性时，系统的复杂度就成级数的增长，致使代码变得脆弱而不可预测，结果导致他们的MVC土崩瓦解。
二、React 特点
（1）虚拟DOM（Virtual DOM）优化减少真实Dom
（2）Diff算法：React Fiber—分片，把一个耗时长的任务分成很多小片；<br>
（3）组件系统：React最核心的思想是将页面中任何一个区域或者元素都可以看做一个组件；
（4）单向数据流：reactjs的核心内容就是数据绑定，所谓数据绑定指的是只要将一些服务端的数据和前端页面绑定好，开发者只关注实现业务就行了；
（5）JSX语法：
-全称：JavaScript + xml
-表示：可以在js中书写dom结构，是对js语法的扩展
` Vue.component('Hello',{
data () {
return {
msg: 'Hello React '
}
}
template: '<div> {{ msg }} </div>'
}) `
（6）函数式编程：JS最大的特点就是函数式编程，在React中，函数式编程无处不见
- 为什么vue/react都要写jsx?
- VDOM - 对象模型去模拟dom结构
三、 React准备：通过脚手架快速编译
（1）CRA：create-react-app
React应用程序快速创建脚手架：底层：Webpack
（2）CRA应用：
A、全局安装： npm i create-react-app -g
create-react-app 项目名
cd 项目名
yarn start
B.npx创建CRA项目
npx create-react-app 项目名
cd 项目名
npm start
（3）CRA安装的主要三个包
- react: react顶级库，它为我们提供了使用react的api和jsx的支持
- react-dom： 解析组件，然后将组件渲染为真实dom，插入到页面
- react-scripts ： webpack配置文件，主要作用是为项目启动和配置做支持
（4）CRA 命令介绍
yarn start -- 表示开发环境下运行整个项目
yarn build -- 表示生产环境打包，进行编译、压缩等操作
yarn eject -- 配置文件抽离，将项目的webpack配置和项目运行文件从node_modules的react-script中抽离到项目根目录
如何处理配置文件抽离报错
- 单独安装缺失的包
4、其他脚手架
（1）Dva安装
npm install dva-cli -g
dva new 项目名
cd 项目名
yarn start
（2）UMI安装
npm install umi -g
mkdir 项目名
cd 项目名
umi g page index
umi g page user
umi dev
5、为什么我们不能像vue一样使用cdn直接用呢？
- React使用jsx，浏览器不能直接使用，所以得借助webpack编译，将jsx -> js 才能用
6、React编写过程 （1）必须要有入口文件（src/index.js)
/*
! 此文件为webpack的入口文件，其他文件是依赖于入口文件的
*/
/* 引入react、ReactDOM （ES6模块化） */
import React from 'react'
import ReactDOM from 'react-dom'
// ReactDOM.render(React元素或是React组件,已存在的DOM作为react的作用范围)
// 创建一个React元素
const element = <h1> Hello React </h1>
ReactDOM.render(
element
,document.querySelector('#root'))
(2) react元素
元素是构成React应用的最小砖块；
元素描述了你在屏幕上想看到的内容；
组件是由元素构成的
const element = {
tag: 'div',
attr: {
className: 'box'
},
content: [
{
tag: 'span',
attr: {},
content: 'Hello React'
}
]
}
