Actualmente, solo uso React y estoy pensando en agregar React-Bootstrap a mi proyecto. Resulta ser un poco más problemático de lo que inicialmente pensé. Como no estoy usando node.js , incorporo React en mi página HTML haciendo lo siguiente:
índice.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>mi_reaccionar.js:
class Comp extends React.Component { render() { return (<div>Hello world!</div>); } } ReactDOM.render(<Comp />, document.getElementById('root'));Para React puro, este enfoque funciona. Sin embargo, cuando lo amplío para incluir React-Bootstrap y reviso el código de la siguiente manera, no funciona:
índice.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>mi_reaccionar.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')); El mensaje de error que puedo ver desde la consola de un navegador es Uncaught ReferenceError: Dropdown is not defined lanzado desde bable-standalone.
Así que la pregunta es... ¿funciona este enfoque? ¿Es posible que haga algunos cambios para que funcione de nuevo?