3.html 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title></title>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <!-- 将jsx转为js -->
  8. <script src="./babel.min.js"></script>
  9. <!-- react核心库 -->
  10. <script src="./react.development.js"></script>
  11. <!-- react中dom操作库 -->
  12. <script src="./react-dom.development.js"></script>
  13. <style>
  14. .title {
  15. color: red;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div id="root"></div>
  21. <script type="text/babel">
  22. // let element = <h3 className='title'>你好</h3>;
  23. let element = (
  24. <div>
  25. <label htmlFor="same">姓名</label>
  26. <input id="same" type="text" placeholder='请输入姓名' tabIndex='1' />
  27. <br/>
  28. <label htmlFor="age">年龄</label>
  29. <input id="age" type="text" placeholder='请输入年龄' tabIndex='3' />
  30. <br/>
  31. <label htmlFor="address">地址</label>
  32. <input id="address" type="text" placeholder='请输入地址' tabIndex='2' />
  33. <br/>
  34. </div>
  35. )
  36. let getRoot = document.getElementById("root");
  37. ReactDOM.createRoot(getRoot).render(element);
  38. </script>
  39. </body>
  40. </html>