Use bootstrap 4 with react

问题:

Sorry for my lack of knowledge but I'm new and currently learning react. Just wanted to ask if I wanted to use bootstrap 4 with my react app, do I have to install JQUERY? I read somewhere that using JQUERY with React is a NO-NO. So now Im wondering. Thanks for the reply. Your advice and suggestions are truly appreciated.

回答1:

Certain functionalities such as dropdown, modal requires JS to manipulate the DOM, and bootstrap uses jQuery to handle the DOM manipulations.

However, React uses virtual DOM, so manipulating the browser DOM outside your React app through jQuery means React is potentially no longer handling state, events and UI rendering. And React broadly expects/assumes that nothing else will be modifying the DOM.

---

This is why react-bootstrap (for bootstrap v3) and reactstrap (for bootstrap v4) are recommended. The CSS remains exactly the same, but the components that initially require jQuery are rewritten.

Take this bootstrap 4 modal as example, you need to define modal state which determines whether the modal is being shown or hidden.

So essentially these react bootstrap libraries rewrite each bootstrap component into a React component, CSS wise it's entirely the same.

回答2:

You should be looking to use react-bootstrap. Instead, you can install it using npm: $npm install --save react-bootstrap Find more about it on this link

just remember that it uses the Bootstrap v3.

Happy coding!