5.组件创建.html 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  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. <script src="./babel.min.js"></script>
  8. <script src="./react.development.js"></script>
  9. <script src="./react-dom.development.js"></script>
  10. </head>
  11. <body>
  12. <div id="root"></div>
  13. <!--
  14. 组件:类组件 函数组件
  15. 函数组件
  16. -->
  17. <script type="text/babel">
  18. // 这是一个函数组件
  19. // null undefined boolean Object无法渲染
  20. function New() {
  21. return (
  22. <div>
  23. <h3>一会考你俩面试题</h3>
  24. {[1,2,3,4,5]}
  25. {null}
  26. {undefined}
  27. {'helloWorld'}
  28. {false}
  29. {true}
  30. {13456}
  31. {/**
  32. {{aaa:"哈哈哈"}} 无法渲染 报错
  33. */}
  34. </div>
  35. )
  36. }
  37. let element = <New/>
  38. ReactDOM.createRoot(document.querySelector("#root")).render(element);
  39. </script>
  40. </body>
  41. </html>