Can I use react-bootstrap without a bundler

Viewed 82

Currently, I am only using React and I am thinking about adding React-Bootstrap into my project. It turns out to be a bit more problematic than I initially thought. Since I am not using node.js, I incorporate React into my HTML page by doing the following:

index.html

<script src="./static/lib/babel-standalone/6.26.0/babel.js"></script>
<script src="./static/lib/react/17.0.2/umd/react.js"></script>
<script src="./static/lib/react-dom/17.0.2/umd/react-dom.js"></script>
<script src="./static/my_react.js" type="text/jsx"></script>
<html>
<body><div id="root"></div></body>
</html>

my_react.js:

class Comp extends React.Component {
    render() {
          return (<div>Hello world!</div>);
    }
}

ReactDOM.render(<Comp />, document.getElementById('root'));

For pure React, this approach works. However, when I expand it to include React-Bootstrap, and revise the code in the following way, it doesn't work:

index.html

<script src="./static/lib/babel-standalone/6.26.0/babel.js"></script>
<script src="./static/lib/react/17.0.2/umd/react.js"></script>
<script src="./static/lib/react-dom/17.0.2/umd/react-dom.js"></script>
<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script>
<script src="./static/my_react.js" type="text/jsx"></script>
<html>
<body><div id="root"></div></body>
</html>

my_react.js:

class Comp extends React.Component {
    render() {
          return (<div>
                <Dropdown>
                    <Dropdown.Toggle variant="success" id="dropdown-basic">
                        Dropdown Button
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                        <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
                        <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
                    </Dropdown.Menu>
                </Dropdown></div>
);
    }
}

ReactDOM.render(<Comp />, document.getElementById('root'));

The error message I can see from a browser's console is Uncaught ReferenceError: Dropdown is not defined thrown from bable-standalone.

So the question is...does this approach work? Is it possible that I make a few changes to make it work again?

0 Answers
Related