Testaccount
/
1.Test


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
							<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 将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 {
                width: 500px;
                height: 500px;
                border: 1px solid #000;
                margin: 0 auto;
            } */
        </style>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/babel">
            let newBox = {
                width: '500px',
                height: '500px',
                border: '1px solid #f00',
                margin: '0 auto',
                display: 'flex',
                justifyContent: 'space-between',
                alignItem: 'center'
            }
            let left = {
                width: '200px',
                height: '200px',
                backgroundColor: 'purple',
                color: "#fff"
            }
            let box = (
                <div style={newBox}>
                    <div style={left}>左侧盒子</div>
                    <div style={{
                        width:'200px',
                        height:'200px',
                        backgroundColor:'#ff0',
                        color:'#f00'
                    }}>右侧盒子</div>
                </div>
            )
            let showPage = document.querySelector("#root");
            ReactDOM.createRoot(showPage).render(box);
        </script>

    </body>
</html>