Use Bootstrap 4 with React

javascript reactjs react-bootstrap
Sonson Ixon picture Sonson Ixon · Dec 27, 2018 · Viewed 8.2k times · Source

Sorry for my lack of knowledge but I'm new and currently learning React. I 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 I'm wondering. Thanks for the reply. Your advice and suggestions are truly appreciated.

Answer

Liren Yeo picture Liren Yeo · Dec 27, 2018

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 or reactstrap 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.

Related questions

How do I create a dynamic drop down list with react-bootstrap

The example code in the react-bootstrap site shows the following. I need to drive the options using an array, but I'm having trouble finding examples that will compile. <Input type="select" label="Multiple Select" multiple> <option value="…

Read More
How to get select element's value in react-bootstrap?

So I'm trying to get a select element's value in reactjs, but just can't figure it out. The this.refs.selectElement.getDOMNode().value is always coming as undefined. All other controls on the form like text are working fine. Any …

Read More
How to get values/properties from a react-bootstrap checkbox?

I'm trying to use the react-bootstrap checkbox (https://react-bootstrap.github.io/components.html#forms-controls) and I need to fire an event when it changes state. It would also be great to be able to programatically un/check it and/or …

Read More