React起手式
引入方式
两种方式，一种是通过CDN引入，一种是通过webpack引入。
CDN方式
先引入React：https://.../react.x.min.js
然后引入ReactDOM:https://.../react-dom.x.min.js
（注意顺序）
示例：
<script src="https://cdn.bootcss.com/react/16.10.2/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.10.2/umd/react-dom.development.js"></script>
此处引入的是umd版本的react
cjs和umd的区别
cjs全称是CommonJS，是Node.js支持的模块规范
umd是统一模块定义，各种模块规范，理论上优先使用umd，同时支持Node.js和各种浏览器
最新的模块规范是使用import和export
webpack方式
import...from...
yarn add react react-dom
import React from 'react'
import ReactDom from 'react-dom'
除了webpack，rollup，parcel也支持如上写法
成熟的前端用webpack/rollup自己配置
新人的话可以使用create-react-app
步骤：
安装create-react-app
yarn global add create-react-app
运行
create-react-app <项目名>
成功创建
用webstorm打开
可以看到是通过import来进行引入的
进行一点修改
运行yarn start
用react实现+1
使用React.createElement()来进行创建元素
React.createElement(
type,
[props],
[...children])
第一个参数是必填，传入的是似HTML标签名称，eg: ul, li
第二个参数是选填，表示的是属性，eg: className
第三个参数是选填, 子节点，eg: 要显示的文本内容
const React = window.React; //声明react是全局的react
const ReactDOM = window.ReactDOM;
const root = document.querySelector("#root");
let n = 0;
//用react创建一个div，div的className叫red，里面有一个n,以及一个按钮
const App = React.createElement("div", { className: "red" }, [
n,
React.createElement(
"button",
{
onClick: () => {
n += 1;
ReactDOM.render(App, root);//重新渲染
}
},
"+1"
)
]);
//通过ReactDOM来把app渲染到root里面
ReactDOM.render(App, root);
这样写完代码会发现点击按钮无法实现加一的功能，这是因为
app.createElement()就执行了一次执行之后n的值有变化和App就没有关系了。所以需要想办法让他重新执行来获取n的最新的值。**
解决办法
const React = window.React; //声明react是全局的react
const ReactDOM = window.ReactDOM;
const root = document.querySelector("#root");
let n = 0;
//用react创建一个div，div的className叫red，里面有一个n,以及一个按钮
const App = () =>
React.createElement("div", { className: "red" }, [
n,
React.createElement(
"button",
{
onClick: () => {
n += 1;
ReactDOM.render(App(), root);//重新渲染
}
},
"+1"
)
]);
//通过ReactDOM来把app渲染到root里面
ReactDOM.render(App(), root);
因为函数可以获得变量的最新值，具体内容可看我的另一篇博客 JS的执行时机
//普通代码
let b = 1 + a
//函数
let f = ()=> 1 + a
let b = f()
普通代码会立即求值，而函数会等调用时执行，即延迟求值，求值时可以得到变量的最新值。
将app改成函数，实现只有在app这个函数执行的时候才能获取n的值，所以渲染也要改成App()
这样就实现了按钮+1的效果
总结
React元素
createElement返回值element可以代表一个div，但element不是一个真正的DOM对象，我们一般称为虚拟DOM对象
()=>React元素
返回element的函数，也可以代表一个div
这个函数可以多次执行，每次得到最新的虚拟div，
React会对比两个虚拟的div，找出不同，局部更新视图。
这个找不同的算法叫做DOM Diff算法
