初学者 - 如何在将 CDN 连接到 index.html 后创建 react/react-bootstrap js 模块

Question

我正在玩 React/React-Bootstrap 网站的 Glitch 托管，所以我可以做一些网络开发培训。 所有这些工具对我来说都是新的，但我多年来一直是一名开发人员。 我已经成功地将我的 React、React-Dom、Babel 和 React-Bootstrap CDN 连接到我的 index.html 页面，并且我能够使用 JSX 语法运行基本的 hello world 类型的 react 示例。 但是，由于这些库是通过 head script 标签访问的 CDN，它们已成为浏览器窗口对象的全局变量。 这很好，但我不知道如何构建可以从 window 对象导入这些库的模块。 您会注意到在第一行脚本中，我不知道如何导入 ReactBootstrap 的 ProgressBar。 如果您进一步查看脚本，我会直接使用 window.React.Component 和 window.ReactDOM.render 对象而无需导入，但我认为这不是我应该学习的正确语法。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!--
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>    
    -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js"
      crossorigin
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"
      crossorigin
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js"
      crossorigin
    ></script>
    <title>Hello React!</title>
  </head>
  <body>
    <div id="root">
      <div id="el1"></div>
      <div id="el2"></div>
    </div>
    <script type="text/babel" data-type="module" src="/script.js"></script>
  </body>
</html>

script.js
import {ProgressBar} from ???????;
class Hello extends window.React.Component {
  render() {
    return <h1>hello H1</h1>;
  }
}
class Prog extends window.React.Component {
  render() {
    return <ProgressBar now={60} id='myPB'/>;
  }
}
window.ReactDOM.render(<Hello />, document.getElementById('el1'));

Answer 1

这是相关文档的链接： https ://react-bootstrap.github.io/getting-started/introduction/#browser-globals

...以及措辞本身：

我们提供 react-bootstrap.js 和 react-bootstrap.min.js 捆绑包，其中包含在 window.ReactBootstrap 对象上导出的所有组件。

所以你可以：

return <ReactBootstrap.ProgressBar now={60} id='myPB'/>;

要么：

const ProgressBar  = ReactBootstrap.ProgressBar; // replace the import with this

...

return <ProgressBar now={60} id='myPB'/>;

当您准备好移动 npm 安装时，后一种情况更容易重构回导入。

初学者 - 如何在将 CDN 连接到 index.html 后创建 react/react-bootstrap js 模块

问题描述

1 个解决方案

解决方案1
0 2022-12-22 15:27:07

初学者 - 如何在将 CDN 连接到 index.html 后创建 react/react-bootstrap js 模块

问题描述

1 个解决方案

解决方案1 0 2022-12-22 15:27:07

解决方案1
0 2022-12-22 15:27:07