Use Bootstrap 4 with React

Question

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

Answer 2

Update 2020 - Bootstrap 5

Bootstrap 5 no longer requires jQuery and is modular so you can @import it like any other JS module which makes it easier to use with React. It also means you can use Bootstrap without a 3rd party library like reactstrap or react-bootstrap.

Also, you can import components and reference them directly. For example:

const popover = new Popover(document.querySelector('#myButton'), options)

This makes it easier to use Bootstrap 5 with the React 16.8+ useEffect and useState hooks. So that we avoid direct DOM manipulation in React, get the element instance with a useRef hook...

function PopoverDemo() {
  const popoverRef = useRef()
  useEffect(() => {
    var popover = new Popover(popoverRef.current, {
        content: "Hello popover content!",
        title: "My Popover",
        trigger: 'hover'
    })
  })

  return (
    <div className="py-2">
        <button className="btn btn-danger" ref={popoverRef}>
            Hover for popover
        </button>
    </div>
  )
}

Bootstrap 5 with React Demo

Answer 3

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!