lovecoding
/
W250511


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./babel.min.js"></script>
    <script src="./react.development.js"></script>
    <script src="./react-dom.development.js"></script>
    <!-- <link rel="stylesheet" href=""> -->
    <style>
        #tips {
            color: red;
        }
        .hi {
            color: purple;
        }
    </style>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = ReactDOM.createRoot(document.getElementById("root"));
        // 静态属性
        let element = <div id='tips'>hello</div>
        element = <img width='300' height='400' src="https://pic.rmb.bdstatic.com/bjh/bc1118b6d868/250616/4081c418b456da14b12e3d59d67188d5.jpeg" />
        element = (<table border='2'>
            <tr>
                {/* 使用camelCase绑定多单词属性 */}
                <td colSpan='2'>成绩</td>
                {/*<td>成绩</td>    */}
            </tr>
            <tr>
                <td>90</td>
                <td>80</td>
            </tr>
        </table>)
        // class 属于js关键字 在React中不允许作为属性名使用
        // class => className
        element = <h1 className='hi'>大家好</h1>

        element = (
            <div>
                <label htmlFor="username">姓名:</label>
                <input type="text" id='username' />    
            </div>
        )
        root.render(element);
    </script>
</body>

</html>