|
|
@@ -0,0 +1,56 @@
|
|
|
+<!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>
|
e