9

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.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Sonson Ixon
  • 385
  • 1
  • 5
  • 17
  • You do need jQuery for some Bootstrap functionality (like list-item tabs, etc.) but it should be okay without it. If you *do* want the full functionality of Bootstrap in a React app, see [here](https://stackoverflow.com/questions/38518278/how-to-use-jquery-on-reactjs). – Jack Bashford Dec 27 '18 at 07:30
  • Im trying to avoid using JQuery with react since its a bad practice according to what I have read so far. But there's a theme in bootstrap 4 that I want to use so Im wondering if JQuery is necessary for me to use that theme. – Sonson Ixon Dec 27 '18 at 07:35
  • As said by Jack jQuery is only for some intercation with components so you could figure it out without. However you can use the css part, have a look at this [article](https://m.pardel.net/react-and-bootstrap-4-part-1-setup-navigation-d4767e2ed9f0). Ps : `@import "~bootstrap"` – Baldráni Dec 27 '18 at 07:37
  • https://reactstrap.github.io/ seems to be a react port of the JS part of bootstrap 4 – apokryfos Dec 27 '18 at 10:03

3 Answers3

21

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.

Liren Yeo
  • 3,215
  • 2
  • 20
  • 41
  • 1
    react-bootstrap (https://react-bootstrap.github.io/) now supports bootstrap version 4.5 – coder247 Jun 04 '20 at 15:13
  • @coder247 thank you for the reminder. this answer was written when react-bootstrap only supports bootstrap v3. I have updated my answer accordingly. – Liren Yeo Jun 12 '20 at 23:11
1

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!

Jean Rauwers
  • 65
  • 1
  • 7
  • There's active work to get it to work with Bootstrap 4 and can be tracked at https://github.com/react-bootstrap/react-bootstrap/projects/1 – apokryfos Dec 27 '18 at 09:59
1

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624