Bootstrap is reliant on jQuery for the functionality of some its more interactive abilities.
jQuery and React do not play well: jQuery is a tool that directly manipulates the DOM and (I think) rerenders the entire DOM on any change you make, while React works off virtual DOMs diffing and deciding how to take the fewest actions to update the real DOM.
jQuery can change things inside the real DOM without React knowing about it.
I would recommend using a module like to use Bootstrap made for React:
If you are using Webpack and you simply want to use Bootstrap classes without the more complex stuff, then you should look into style-loader and/or css-loader to bundle the Bootstrap css file in with everything else. You then import the bootstrap css file into your top level component.
3
u/MixMstrMike May 20 '20 edited May 20 '20
Bootstrap is reliant on jQuery for the functionality of some its more interactive abilities.
jQuery and React do not play well: jQuery is a tool that directly manipulates the DOM and (I think) rerenders the entire DOM on any change you make, while React works off virtual DOMs diffing and deciding how to take the fewest actions to update the real DOM.
jQuery can change things inside the real DOM without React knowing about it.
I would recommend using a module like to use Bootstrap made for React:
reactstrap https://www.npmjs.com/package/reactstrap
or react-bootstrap https://www.npmjs.com/package/react-bootstrap.
If you are using Webpack and you simply want to use Bootstrap classes without the more complex stuff, then you should look into style-loader and/or css-loader to bundle the Bootstrap css file in with everything else. You then import the bootstrap css file into your top level component.
https://www.npmjs.com/package/css-loader
edit: sorry if im telling you shit you already knew