代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_JSX</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>

<!-- 渲染test1 -->
<script type="text/javascript">
    const msg = 'I Like You!'
    const myId = 'Atguigu'

    //1.创建虚拟DOM
    //var element = React.createElement('h1',{id:'myTitle'},'hello')
    const vDom1 = React.createElement('h2',{id:myId.toLocaleLowerCase()},msg.toLocaleUpperCase())

    //2.渲染虚拟DOM
    ReactDOM.render(vDom1,document.getElementById('test1'))
</script>

<!-- 渲染test2 -->
<script type="text/babel">
    const vDom2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>
    ReactDOM.render(vDom2,document.getElementById('test2'))
</script>
</body>
</html>

运行结果:

代码讲解

const vDom1 = React.createElement('h2',{id:myId.toLocaleLowerCase()},msg.toLocaleUpperCase())

在type="text/javascript"的script中，应当用这种方式来设计虚拟Dom
h2是标签类型，{}里面是一个一个的属性，{}后面的参数是标签的内容

const vDom2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>

在type="text/babel"的script中，可以上述方式来创建虚拟Dom，{}里面的内容是javascript代码。
执行时，浏览器将其转化为type="text/javascript"形式的虚拟Dom