React项目 cdn引用

最新推荐文章于 2024-07-25 07:20:20 发布

b7410852963

最新推荐文章于 2024-07-25 07:20:20 发布

阅读量7.9k

点赞数 1

分类专栏： web项目

本文链接：https://blog.csdn.net/b7410852963/article/details/106543621

版权

web项目专栏收录该内容

11 篇文章 0 订阅

订阅专栏

React项目 cdn引用

怎么写一个一个cdn 引用的lib
怎么创建一个hook
- 为什么引用三个js

怎么写一个一个cdn 引用的lib

怎么创建一个hook

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
<script src="https://cdn.bootcdn.net/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
  </body>
  <script type="text/babel">
    const compsButton = React.createElement(() => {
      const { useEffect, useRef, useState } = window.React;

      const [state, upState] = useState({ num: 1 });

      const fun = {
        update() {
          state.num++;
          upState({ ...state });
        }
      };
      useEffect(() => {
        console.log(123);
      }, []);
      return <button onClick={fun.update}>{state.num}</button>;
    });

    ReactDOM.render(<h1>{compsButton}</h1>, document.getElementById("example"));
  </script>
</html>

为什么使用 createElement

很无奈，网上搜索了半天找不到，只有再次回到官网，只有再次回归官网发现

在这里插入图片描述

为什么引用三个js

react.min.js - React 的核心库
react-dom.min.js - 提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的