11_类组件创建.html 1017 B

1234567891011121314151617181920212223242526272829303132333435
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <!-- 引入文件 *顺序不能改变-->
  8. <!-- 将jsx转为js -->
  9. <script src="./babel.min.js"></script>
  10. <!-- react核心库 -->
  11. <script src="./react.development.js"></script>
  12. <!-- react中的dom操作库 -->
  13. <script src="./react-dom.development.js"></script>
  14. </head>
  15. <body>
  16. <div id="root"></div>
  17. <script type="text/babel">
  18. // 类组件 遵从es6规范 可以修改=>state
  19. class Fath extends React.Component {
  20. render() {
  21. return (
  22. <div style={{ border: "2px solid #0e7fc7", padding: "10px" }}>
  23. <p>父级标签</p>
  24. </div>
  25. );
  26. }
  27. }
  28. let element = <Fath/>
  29. ReactDOM.createRoot(document.querySelector("#root")).render(element);
  30. </script>
  31. </body>
  32. </html>