Beginner - How to create react/react-bootstrap js modules after connecting CDN's to index.html

I am playing around with Glitch hosting of React/React-Bootstrap site so I can do some web dev training. All of these tools are new to me but I have been a developer for years. I have successfully connected my React, React-Dom, Babel, and React-Bootstrap CDN's to my index.html page and I am able to run the basic hello world type react example using the JSX syntax. However, because the libraries are CDN accessed via head script tags, they have become global variables off the browser's window object. This is fine, but I can't figure out how to build modules that can import these libraries from the window object. You will notice that on the 1st script line, I can't figure out how to import the ReactBootstrap's ProgressBar. If you look further down in the script, I used the window.React.Component and window.ReactDOM.render objects directly without importing but I don't think that is the proper syntax I should be learning.

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'));

Solution

Here is a link to the relevant documentation: https://react-bootstrap.github.io/getting-started/introduction/#browser-globals

...and the wording itself:

We provide react-bootstrap.js and react-bootstrap.min.js bundles with all components exported on the window.ReactBootstrap object.

So you can either:

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

or:

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

...

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

The latter case would be easier to refactor back to imports when you are ready to move an npm installation.