描述
用于动态构建用户界面的JavaScript库（只关注视图）、由Facebook开源
特点
1.采用组件化模式、声明式编码，提高开发效率及组件复用率。
2.在React Native中可以使用React语法进行移动端开发。
使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互。
前置知识
判断this指向、class（类）、ES6语法规范、npm包管理器、原型及原型链、数组常用方法、模块化。
官网：https://react.docschina.org/
React高效原因
1.使用虚拟DOM，不总是直接操作页面真实DOM。
2.DOM Diffing算法，最小化页面重绘。
相关js库
1.react.js：React核心库。
2.react-dom.js：提供操作DOM的react扩展库。
3.babel.min.js：解析JSX语法代码转为JS代码的库。
在线引入（需按序）：
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>创建虚拟DOM的两种方式
1.js方式（一般不用）
2.jsx方式
hello react：
多级DOM：
const VDOM=（<div><h1></h1><input type=”text”/></div>）
虚拟DOM
1.本质是Object类型的对象（一般对象）。
2.虚拟DOM比较“轻”，真实DOM比较“重”。虚拟DOM是react在用，无需真实DOM上那么多的属性。
3.虚拟DOM最终会被react转化为真实DOM，呈现在页面上。
React JSX
1.全称：JavaScript XML
2.react定义的一种类似于XML的JS扩展语法
3.本质是React.createElement(component,props,...children)方法的语法糖
4.作用：简化创建虚拟DOM
写法：var ele=<h1>hello jsx<h1>
注意：它不是字符串，也不是HTML/XML标签，它最终产生的就是一个JS对象。
5.标签名任意：HTML标签或其他标签
jsx语法规则
1.定义虚拟DOM时，不要写引号。
2.标签中混入JS表达式时要用{}（id={myId.toLowerCase()}）。
3.样式的类名指定不要用class，要用className。
4.内联样式要写成style={{color:’white’}}形式。
5.创建虚拟DOM只能有一个根标签。
6.标签必须闭合（自结束在>内加/）。
7.引入自定义组件的标签首字母大写。
使用列表输出数组中的内容：
<body>
<div id="test"></div>
<script type="text/babel">
// 创建虚拟DOM
const data=['Vue','React']
const VDOM=(
<ul>
{
data.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
)
// 渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>（B站尚硅谷）