lovecoding
/
web0715


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- jsx 语法浏览器不识别 jsx => js 浏览器可识别的语言 -->
    <script src="./babel.min.js"></script>
    <!-- react的核心库 -->
    <script src="./react.development.js"></script>
    <!-- 解析react中的dom库 -->
    <script src="./react-dom.development.js"></script>
    <style>
        .box {
            color: red;
        }
        .flower {
            font-size: 30px;
            font-weight: bold;
        }
        .a {
            color: red;
        }
        .b {
            color: purple;
        }
    </style>
</head>
<body>
    <div id="root">
    </div>
    <script type="text/babel">
        {/*
            样式绑定:
            1.class => className:在样式表中定义

            2.style => 在jsx语法中直接定义 
        */}
        let root = ReactDOM.createRoot(document.getElementById("root"));
        let element = <div>
            <div className={'box flower'}>哪吒闹海</div>
            <div className='box flower'>哪吒降生</div>
            </div>
        const vase = {
            color: 'blue',
            fontSize: '20px',
            fontWeight: 'bold'
        }
        element = <p style={vase}>熊出没</p>
        // 练习排版 案例图 群里
        const a1 = {
            color: 'pink'
        }
        const b1 = {
            color: 'green'
        }
        // element = <div className={5 > 2 ? 'a' : 'b'}>最终的</div>
        element = <div style={5 > 2 ? a1 : b1}>下一个</div>
        root.render(element)        
    </script>
</body>
</html>