React 包的 CDN 链接以及在使用来自 CDN 的脚本进行反应时如何导入它

Question

我在没有 NPM 和其他工具的情况下尝试 React，而是通过添加 CDN 链接来使用它，但是如何导入依赖包，例如 useState 挂钩？ 如果它是通过另一个脚本标签添加的，那么它的 CDN 链接是什么？ 下面是我的代码，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React Local</title>
  <script type="application/javascript" src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
  <script type="application/javascript" src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script>
  <script type="application/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>

<body>
  <div id="root"></div>

   <script type="text/babel">
    const rootElement = document.getElementById('root') 

    const App = (props) => { 
    const [text, setText] = useState('hello'); 
        return (
            <div>
            <h1>{text}</h1>
            <input type="text" onClick={(e) => setText(e.target.value)}> </input>
            </div>
        );
    }

    ReactDOM.render(<App />, rootElement)
  </script>

</body>
</html>

在这里我会得到错误，useState is not defined。
注意：这只是为了使用直接添加到 html 文件中的 CDN 脚本来测试 React，尽管我知道 create-react-app 和现代工具

Answer 1

当您使用脚本时，React 在窗口对象上作为React公开，您还使用了没有钩子的 React 版本（钩子在 16.8 中发布）

将您的脚本更新为（您可能希望使用开发脚本来获得更好的错误消息）

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

如果你想访问useState从React中解构它或者使用React.useState

此外，使用onChange而不是onClick来处理输入更改事件，以及使用状态中的text value作为输入值

<script type="text/babel">
  const { useState } = React

  const App = (props) => { 
    const [text, setText] = useState('hello');

    return (
      <div>
        <h1>{text}</h1>
        <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
      </div>
    );
  }

  const rootElement = document.getElementById('root')
  ReactDOM.render(<App />, rootElement)
</script>