lovecoding
/
web0715


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
							<!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>
      .tips {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      let root = ReactDOM.createRoot(document.getElementById("root"));

      // 静态属性
      let element = <div color="red">hello</div>;
      // element = <img width='200' height='200' src="https://ts1.cn.mm.bing.net/th/id/R-C.57384e4c2dd256a755578f00845e60af?rik=uy9%2bvT4%2b7Rur%2fA&riu=http%3a%2f%2fimg06file.tooopen.com%2fimages%2f20171224%2ftooopen_sy_231021357463.jpg&ehk=whpCWn%2byPBvtGi1%2boY1sEBq%2frEUaP6w2N5bnBQsLWdo%3d&risl=&pid=ImgRaw&r=0" alt=""></img>
      // 表格
      element = (
        <table border="2">
          <tr>
            {/*
                注释：
                小驼峰命名
            */}
            <td colSpan="2" align="center">
              花朵
            </td>
          </tr>
          <tr>
            <td> 牡丹</td>
            <td>水仙</td>
          </tr>
        </table>
      );
      // class => className
      // element = <div className='tips'>hello</div>;
      element = (
        <div>
          <label htmlFor="user">用户名</label>
          <input type="text" placeholder="请输入姓名" id='user' />
        </div>
      );
      root.render(element);
    </script>
  </body>
</html>