使用React渲染虚拟DOM到页面上
第一步：导入包
React可以直接下载使用，这里我们直接使用Staticfile CDN的React CDN库，地址如下：
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
- react：专门用于创建组件和虚拟DOM的，同时组件的生命周期都在这个包中
- react-dom：专门进行DOM操作的，最主要的应用场景，就是ReactDOM.render()
第二步：创建虚拟DOM元素
// <h1 id="myh1" title="this is a h1">这是一个大大的H1</h1>
const myh1 = React.createElement('h1', {id: "myh1", title: "this is a h1"}, '这是一个大大的H1');
// 模拟DOM嵌套
const mydiv = React.createElement('div', null, '这是一个div元素', myh1);
createElement()参数：
- 参数1：创建的元素的类型，字符串，表示元素的名称
- 参数2：是一个对象或null，表示当前这个DOM元素的属性
- 参数3：子节点（包括其它虚拟DOM或文本子节点）
- 参数n：其它子节点
第三步：创建容器
<div id="app"></div>
将来渲染的虚拟DOM，会放到容器内显示。
第四步：使用ReactDOM把虚拟DOM渲染到页面上
ReactDOM.render(mydiv, document.getElementById('app'));
render()参数：
- 参数1：要渲染的那个虚拟DOM元素
- 参数2：指定页面上一个容器
上代码：
React02.html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React02</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
</head>
<body>
<div id="app"></div>
<script src="../dist/js/React02.js"></script> // 注意该脚本必须要放到div后面，因为其内部含有DOM操作
</body>
</html>
React02.js代码如下：
// <h1 id="myh1" title="this is a h1">这是一个大大的H1</h1>
const myh1 = React.createElement('h1', {id: "myh1", title: "this is a h1"}, '这是一个大大的H1');
// 模拟DOM嵌套
const mydiv = React.createElement('div', null, '这是一个div元素', myh1);
ReactDOM.render(mydiv, document.getElementById('app'));
效果如下：
成功将通过React创建的虚拟DOM元素渲染到页面上了😊