1. react- 用于构建用户界面的javaScript 库
发送请求获取数据
处理数据（过滤、整理）
操作dom 呈现页面
react 是一个将数据渲染微HTML视图的开源 JavaScript库
2. facebook开发，且开源
3. 原生JavaScript
原生javaScript操作DOM繁琐、效率低（DOM-APL 操作 UI)。
使用javascript直接操作DOM,浏览器会进行大量的重绘重排。
原生JavaScript没有组件化编码方案，代码复用率低。
4. react 特点
采用组件化模式、声明式编码，提高开发效率及组件复用率。
React Native 中可以使用 React语法进行移动端开发
使用虚拟DOM + 优秀的Diffing算法，尽量减少与真实DOM的交互
1、hello react
react 核心库和react-dom的引入要放在前面
<!DOCTYPE html>
<html lang="en">
<head>
<meta chartset="UTF-8">
<title>hello_react</title>
</head>
<body>
<!-- 准备一个容器 -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作DOM -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel"> /* 此处一定为babel*/
// 1. 创建虚拟DOM
const VDOM = <h1>Hello,React</h1> /* 不用写引号，因为不是字符串,是jsx*/
// 2. 渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>
2. 创建虚拟DOM
JSX创建虚拟DOM更方便，相当于语法糖
3. 虚拟DOM和真实DOM
虚拟DOM：
1、本质上是一个Object对象，一般对象
2、虚拟DOM比较 ”轻",真实DOM比较 “重”， 因为虚拟DOM是React内部在用，无需真实DOM这么多的属性
3、虚拟DOM最终会被React转化成真实DOM,呈现在页面上。
4. jsx 语法规则
--XML早期用于存储和传输的数据
-- JSON 也是用于存储和传输的数据，js内置对象
1、定义虚拟DOM时，不要写引号
2、标签中混入JS表达式时要用 {}
3、样式的类名指定不用 class,要用className.
4、内联样式，要用style = {{key: value}} 的形式去写
5、只有一个跟标签
6、标签必须闭合
7、标签首字母
（1）若小写字母开头，则将该标签转为 html同名元素，若html中无该标签，则报错
（2）若大写字母开头，react就去喧嚷对应的组件，若组件没有定义，则报错
