react可以理解为一个强大的js库，其本质上也是一堆js代码，只不过是多了jsx这种东西，首先在之前的开发中我们用js操作dom树是一件比较繁琐的事情，dom树的不断更改产生重绘、回流会对用户的体验造成很大的影响。于是为了增加用户的体验，react框架使用了虚拟dom的方法，既然是虚拟dom就是在真实dom之前先建一个虚拟dom树，以后根据虚拟dom的变化来改变真实dom。

构建react开发环境

需要引入三个js文件 react.min.js react-dom.min.js babel.min.js
引入babel是为了将es6的一些内容转化为浏览器可以适用的es5的内容，比如我们使用JSX浏览器是不能识别的，babel会把JSX转化为浏览器可以识别的React.createElement()这样的语法。
所以我们可以发现我们创建虚拟dom的两种方法，一种是使用原始的React.createElement()这样的语法，这样的话就不需要引入bable，另一种的就是JSX了。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>
  <script src="./needJSFile/react.production.min.js"></script>
  <script src="./needJSFile/react-dom.production.min.js"></script>

  <script>
    const vDom = React.createElement('span', {id: 'ppp'}, 'Hello React!');
    ReactDOM.render(vDom, document.getElementById('app'));
  </script>
</body>

</html>

<div id="app"></div>
  <script src="./needJSFile/react.production.min.js"></script>
  <script src="./needJSFile/react-dom.production.min.js"></script>
  <script src="./needJSFile/babel.min.js"></script>

  <script type="text/babel">
    const vDom = <h1>hello react!</h1>
    ReactDOM.render(vDom, document.getElementById('app'));
  </script>

从上述的内容可以很容易的发现，我们使用JSX会非常的简便开发

react01构造原始的react代码

构建react开发环境