1.使用JS创建虚拟DOM(这种方式开发中绝对不会使用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.使用js创建虚拟DOM</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="test">
</div>
<!-- 本地资源 -->
<!-- 引入React核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入React-dom，用于支持react操作DOM -->
<script src="../js/react-dom.development.js"></script>
<script type="text/javascript">/** 此处一定要写type="text/babel **/
//1.创建虚拟DOM
const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'));// 1.标签名 2.标签属性 3.标签内容
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById("test"));// 参数1：虚拟DOM 参数2：容器
</script>
</body>
</html>
2.使用JSX创建虚拟DOM(开发中使用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.使用jsx创建虚拟DOM</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="test">
</div>
<!-- 本地资源 -->
<!-- 引入React核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入React-dom，用于支持react操作DOM -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将JSX转化为JS -->
<script src="../js/babel.min.js"></script>
<script type="text/babel">/** 此处一定要写type="text/babel **/
//1.创建虚拟DOM
const VDOM = (
<h1 id="title">
<span>Hello,React</span>
</h1>
); /* 此处一定不要写引号，因为不是字符串 */
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById("test"));// 参数1：虚拟DOM 参数2：容器
</script>
</body>
</html>3.这两种写法在浏览器中都显示同样的效果，但是第二种方式要比第一种方式更加的简单
