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?