create-react-app: Cleanly Importing Bootstrap with jQuery with Minimal Packages

There is much discussion out there as to how one may include Bootstrap in their Node.js + create-react-app deployments. This article shows a simple, clean, and usable example to import and use Bootstrap/jQuery without the need to configure webpack, modify node modules, or eject the entire project.

It has been a struggle for me to find a clean way to do the imports, so I hope this helps a lot of people.

This article describes the installation and usage for both Bootstrap 4 and Bootstrap 3.

Note: This article discusses importing Bootstrap scripts, and not using the npm react-bootstrap components package as they are different things. If that is what you want, see here.

I prefer the import method described in this article as it is much cleaner and does not require an additional layer of overhead.

Setting Up

Step 1: Installing Node Packages

1. Have a package created with create-react-app
2. Install the following packages below. (Use npm install -D <package_name> if you would like to install in devDependencies rather than dependencies)

At the time of writing, Bootstrap is at 4, but this should be applicable to all versions if specified below. Some dependencies may be required such as popper.js, which can be included similarly to jquery.

npm packages required for node

# jquery is a dependency
npm install jquery bootstrap

Step 2: Imports

1. Create a folder in src called include.
2. Create the following files inside your src/include folder.

src/include/jquery.js

import * as $ from 'jquery'
window.jQuery = window.$ = $

src/include/bootstrap.js

// bootstrap.js
// This is the main file to import.
// ./jquery.js must be included before the bootstrap package. Order is important.
import './jquery'

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

Technical note: It is important to separate each package in its own file because, that way, we import the package and assign to window before importing additional packages that depend on the previous package (ie. bootstrap requires jQuery to exist as window.$).

The order of imports in src/include/bootstrap.js is important. Otherwise, the console will log an error due to missing dependencies.

Step 3: Importing to your app

Now, we can import these includes in our main app. The easiest way is to add these imports to src/index.js:

src/index.js

import React from 'react'
import ReactDOM from 'react-dom'

// Insert this import line in your code:
import './include/bootstrap'

import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))

That’s all there is to it! You can start using Bootstrap and jQuery in your React app following the examples below.

Using Bootstrap in React Components / JSX

After having Bootstrap imported in a parent module, we can start using it in our components. There is not much difference in syntax from pure Bootstrap, other than using the standard attribute className="" rather than class="" for JSX.

Example React Component with Bootstrap

export default function MyComponent()
   return <div>
     <h3>Hello there!</h3>
     <button className="btn btn-primary">
       Bootstrap Button!
     </button>
   </div>
 }

Using jQuery

If you would like to use jQuery in your React components, simply retrieve it from window, or use it directly from window.

Helpful note: Calls to jQuery are typically made inside componentDidMount(), componentDidUpdate(), and comopnentWillUnmount() since it is being used as a layer after React renders.

Example jQuery usage in React.Component

import React from 'react'
 const $ = window.jQuery
 class MyComponent extends React.Component {
   componentDidMount() {
     // Use your jQuery as usual!
     $('#myDiv').css('color', '#f22')
     // Or, if you do not want to declare the global variable $ above:
     window.$('#myDiv').css('color', '#f22')
   }
   render() {
     return (<div id="myDiv">Hello, there.</div>)
   }
 }
 export default MyComponent

That being said, I have found it much easier (and cleaner) to use React without relying on jQuery, other than as a dependency for bootstrap.