React项目 cdn引用

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

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

React项目 cdn引用_第1张图片

为什么引用 三个js

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

你可能感兴趣的:(web项目)