| 1234567891011121314151617181920212223242526 |
- <!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>
- </head>
- <body>
- <div id="root">
- </div>
- <script type="text/babel">
- let root = ReactDOM.createRoot(document.getElementById("root"));
- // 动态属性
- let url = 'https://ts1.cn.mm.bing.net/th/id/R-C.ac133896b2735871271f35272484cfbf?rik=k0a86ZhyanNt9g&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn10114%2f600%2fw1920h1080%2f20190518%2f1372-hwzkfpv2143245.jpg&ehk=DU3HSmHLIjdJx1fj6fhR1FLcDsewKDsoKdyrELfab%2bg%3d&risl=&pid=ImgRaw&r=0';
- // jsx 语法
- let element = <img width='200' height='200' src={url} alt=""></img>
- root.render(element)
- </script>
- </body>
- </html>
|
