How to insert bootstrap.js to react app?

Question

How to insert twitter-bootstrap js file to react app using webpack?

I know about react libraries like reactstrap and react-bootstrap, but I want to know how to insert bootstrap.js file without these libs.

Answer 1

You can just install Bootstrap and jQuery via npm/yarn:

npm install bootstrap jquery

Then import Bootstrap in your top-level React file (the entry point):

import 'bootstrap/dist/css/bootstrap.min.css'
import 'jquery/dist/jquery.min.js'
import 'bootstrap/dist/js/bootstrap.min.js'

You'll need the appropriate Webpack rules to transform CSS, of course.

The problem with using Bootstrap in React is that it requires jQuery, and now you have two things mucking with the DOM, which is a recipe for trouble. That's the real value proposition of Reactstrap (for Bootstrap 4) and React-Bootstrap (which also supports Bootstrap 4 now); they remove the dependence on jQuery, and implement the functionality as React components. I highly recommend you leverage the work of these projects; you're opening a can of worms by trying to combine jQuery with React. It's possible; I've done it; I don't recommend it.