9_函数组件创建.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  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. <!-- 组件:类组件 函数组件 -->
  18. <script type="text/babel">
  19. // 这是一个函数组件 首写字母要大写
  20. // null undefined boolean Object 无法渲染
  21. function hunshu() {
  22. return (
  23. <div>
  24. <h3>今天真的好冷</h3>
  25. {[1,2,3]} {/*对象*/}
  26. {null}
  27. {undefined}
  28. {'helloword'}
  29. {false}
  30. {true}
  31. {123456}
  32. {/**
  33. {{aaa:'啦啦啦啦'}} 无法渲染 报错
  34. */}
  35. </div>
  36. )
  37. }
  38. let element = <New/>
  39. ReactDOM.createRoot(document.querySelector("#root")).render(element);
  40. </script>
  41. </body>
  42. </html>