在HTML中通过CDN使用React

3,904 阅读1分钟

当需要使用react写一个小demo时,可以使用cdn来使用react, 官方的教程似乎有点简陋,直接看教程大概率没办法用cdn使用上,似乎缺少一个babel的cdn链接。

通过以下代码,就可以直接在html中,直接使用react的cdn链接了. 需要注意的是:

  • 跨域问题,所以添加了crossorigin属性(好像通过vscode的liver server插件也可以解决跨域问题)。
  • 另一个是在 <script>标签中添加type="text/babel", 否则会报语法错误
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script crossorigin src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.development.js"></script>
  <script crossorigin src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
  <script crossorigin src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.js"></script>
  <title>Document</title>
</head>

<body>
  <div id="root"></div>
  <script type="text/babel">
    function Blog() {
      return <li>Test</li>
    }
    ReactDOM.render(
      <Blog />, document.getElementById('root'))
  </script>
</body>

</html>