|
|
@@ -0,0 +1,54 @@
|
|
|
+<!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>
|
zheng