Testaccount
/
1.Test


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 三个库的引入顺序不能更改 -->
    <!-- 将jsx转化为js -->
    <script src="../babel.min.js"></script>
    <!-- react的核心库 -->
    <script src="../react.development.js"></script>
    <!-- react 操作dom的库 -->
    <script src="../react-dom.development.js"></script>
</head>
<body>
    
    <!--
        react的创建方式：
            1.通过第三方库引入
    -->
    <div id="root">123</div>
    <!-- type="text/babel"
        告诉babel库将jsx转化为js
    -->
    <script type="text/babel">
        // 需求：h1标签渲染到页面中
        // 1.创建标签
        const happy = <div id="happy">你今天开心嘛</div>
        // 2.获取渲染位置
        const getRoot = document.getElementById('root')
        // 3.新标签渲染到页面上
        // ReactDOM.createRoot(渲染页面)  //指定渲染页面
        // 渲染内容 render(渲染内容)
        ReactDOM.createRoot(getRoot).render(happy)
    </script>
</body>
</html>