创建 react 项目

刚开始学习，就用简单的 html写，以后会用高阶写法

<!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">
    <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/babel.min.js"></script>
    <title>01 react test</title>
</head>
<body>
    <div id="test"></div>
    <div id="test2"></div>
</body>
</html>
<script type="text/babel">
    // 创建虚拟 dom
    const VDOM = <h1><span>hello，React</span></h1>   // 创建虚拟 dom
    console.log(VDOM,typeof VDOM,'虚拟 dom')
    
    const RDOM = document.getElementById('test2') // 创建真实 dom
    console.log(RDOM,typeof  RDOM,'真实 dom') 
    
    ReactDOM.render(VDOM,document.getElementById('test'))  // 渲染 dom 节点
    debugger; // 创建 调试点击调试看一看真实 dom和虚拟dom 的参数不同，虚拟dom 轻
</script>

区别：
1.虚拟 dom 是一个object 类型的对象，真实 dom 是节点；
2.虚拟 dom 比较轻，真实 dom 重，debugger 可查；
3.虚拟 dom 最终会被 react 转化为真实 dom，呈现在页面上；