你的第一个React程序
⭐第一步：导入依赖
react官方给出的定义——“ 用于构建用户界面的 JavaScript 库 ”，既然是库，那么便和jQuery类似，我们需要引入它的库。
对于我们的第一个简单的小程序来说，需要引入三个包：
- react.development.js——react的核心库
- react-dom.development.js——ReactDOM的库，我们通过其操纵DOM
- babel.min.js——在React中，我们使用jsx来进行开发，但在浏览器运行时需要将其转换为js，babel在这里为我们起到转换的作用
我在这里对他们三个在线引入，要注意：核心库一定要在DOM库前进行引入
<!-- 引入三个包 -->
<!-- 注意react.development（核心库）要在react-dom.development之前引入 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
⭐第二步：创建容器
在React中，存在着虚拟DOM，虚拟DOM渲染后生成真实DOM（也就是浏览器中渲染出的真实结果），我们的容器就是用来存放生成的DOM元素，容器一般用div标签来定义：
<!-- 容器 -->
<div id="test"></div>
⭐第三步：创建DOM并渲染
此前我们在html文件中编写JavaScript代码，需要在script标签中进行，其type指定为text/javascript（或不进行指定就会自动以此为默认值），但在这里我们用jsx的格式进行开发，需要指定type为text/babel，让babel替我们完成转换
代码块里面就可以创建虚拟DOM了，这里以变量的形式（因为是虚拟DOM，我们习惯性命名以V开头），将其赋值为h1，要注意这里不是字符串，不要加引号！ ，不然就会将字符串中的内容原样输出。
创建好虚拟DOM后就可以进行渲染啦！调用ReactDOM的render方法，参数为 （虚拟DOM变量, 容器DOM对象）
<!-- type中一定要写babel -->
<script type="text/babel">
// 1.创建虚拟DOM
const VDOM = <h1>Hello,React</h1> //这里不写引号，因为值不是字符串
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'));
</script>
完整代码如下：
<!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>
<!-- 引入三个包 -->
<!-- 注意react.development（核心库）要在react-dom.development之前引入 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<!-- 容器 -->
<div id="test"></div>
<!-- type中一定要写babel -->
<script type="text/babel">
// 1.创建虚拟DOM
const VDOM = <h1>Hello,React</h1> //这里不写引号，因为值不是字符串
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'));
</script>
</body>
</html>
这样，我们的第一个react程序就完成啦！
运行：
