Estoy tratando de usar bootstrap en mi aplicación de reacción, pero me da un Error: Bootstrap's JavaScript requires jQuery . Importé jquery y probé lo siguiente de otras publicaciones:
import $ from 'jquery'; window.jQuery = $; window.$ = $; global.jQuery = $; Sin embargo, sigo recibiendo el error not defined .
La única manera de arreglar esto es poner
src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>en index.html
¿Hay alguna forma de exportar jquery o hacer que Bootstrap pueda detectarlo/leerlo?
Llamo a mi bootstrap a través de
import bootstrap from 'bootstrap'import bootstrap from 'bootstrap'const bootstrap = require('bootstrap');Traté de crear un proyecto con "create-react-app" y descubrí que el orden de carga de los módulos importados no es el mismo que el orden de importación. Y esta es la razón por la que boostrap no puede encontrar jquery. En general, puede usar "requerir" en esta condición. Funciona en mi pc.
import $ from 'jquery'; window.jQuery = $; window.$ = $; global.jQuery = $; const bootstrap = require('bootstrap'); console.log(bootstrap)Cosas relevantes:
importshttps://stackoverflow.com/a/29334761/4831179
imports deben ir primeroEn particular, las importaciones se elevan, lo que significa que los módulos importados se evaluarán antes que cualquiera de las declaraciones intercaladas entre ellos. Mantener todas las importaciones juntas en la parte superior del archivo puede evitar sorpresas resultantes de esta parte de la especificación.
de https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/first.md
¿Estás usando el paquete web? Si es así, agregue esto en su webpack.config.js .
plugins: [ new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery' }) ],Cuando use create-react-app, primero debe instalar el paquete Jquery de esta manera.
sudo npm install jquery --savey reaccionar-bootstrap como este
sudo npm install react-bootstrap --saveAhora, en los archivos JS, puede usar jquery y bootstrap de esta manera.
import $ from 'jquery'; import { Carousel, Modal,Button, Panel,Image,Row,Col } from 'react-bootstrap';puede usar esta URL para los componentes de arranque de reacción https://react-bootstrap.github.io/components.html
puede usar botones con la función onclick como esta
<Button bsStyle="primary" bsSize="large" active onClick={this.getData()}>Sample onClick</Button>en el
getData(){ $.ajax({ method: 'post', url:'http://someurl/getdata', data: 'passing data if any', success: function(data){ console.log(data); alert(data); this.setState({ some: data.content, some2: data.content2, }); }, error: function(err){ console.log(err); } });todo esto es un ejemplo básico usando jquery y bootstrap si necesita más, puede escribir comentarios al respecto.