1_认识react.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. <!--
  17. React:用于构建web与原生交互界面的库
  18. vue和react区别:
  19. vue.js => 偏向于html扩展
  20. react.js => 偏向于javascript扩展
  21. vue:
  22. 1.直接引入vue第三方库
  23. 2.vue.ui去创建
  24. 3.vue create 项目名
  25. react:
  26. 通过第三方库引入
  27. -->
  28. <div id="root"></div>
  29. <!--
  30. type ="text/babel"
  31. 告诉babel库 将jsx转成js
  32. -->
  33. <script type="text/babel">
  34. // 需求:将标签渲染到页面中
  35. //创建标签
  36. const text = <div>这是一块div</div>
  37. // 获取渲染位置
  38. const gettext =document.getElementById("root");
  39. // 将新标签渲染到页面上
  40. // ReactDOM.createRoot(指定渲染页面)
  41. // render(渲染的内容)
  42. ReactDOM.createRoot(gettext).render(text);
  43. </script>
  44. </body>
  45. </html>