1、使用jsx创建虚拟DOM
<body>
<!-- 准备一个容器 -->
<div id="test"></div>
<!-- 引入react核心库，需要在react-dom文件之前引入 -->
<script type="text/javascript" src="/js/react.development.js"></script>
<!-- 引入react-dom，用于react操作dom -->
<script type="text/javascript" src="/js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="/js/babel.min.js"></script>
<script type="text/babel"> /*此处一定要写babel，如果不写浏览器就会默认认为是js语法，写babel表示通过babel把jsx转化为js*/
// 1、创建虚拟DOM
const VDOM = <h1 id="title">Hello,React</h1> /*此处一定不写引号，因为不是字符串*/
// 2、渲染虚拟DOM到页面 render(虚拟DOM,容器)
ReactDOM.render(VDOM, document.getElementById('test'));
</script>
</body>
2、使用js创建虚拟DOM
缺点：元素一多，写起来繁琐
<body>
<!-- 准备一个容器 -->
<div id="test"></div>
<!-- 引入react核心库，需要在react-dom文件之前引入 -->
<script type="text/javascript" src="/js/react.development.js"></script>
<!-- 引入react-dom，用于react操作dom -->
<script type="text/javascript" src="/js/react-dom.development.js"></script>
<script type="text/javascript">
// 1、创建虚拟DOM
const VDOM = React.createElement('h1',{id:'title',className:'h1'},'hello react') //React.createElement(标签名,标签属性,标签体内容)
// 2、渲染虚拟DOM到页面 render(虚拟DOM,容器)
ReactDOM.render(VDOM, document.getElementById('test'));
</script>
</body>