17

Since create-react-app hides Webpack config without having to use eject, if I want to use something like reactstrap or react-bootstrap, should I eject or will I be fine without ejecting?

Just curious as to what point one would decide when they need to eject in order to use what they need? At this point in my app, I am merely prototyping, but it will go further with more dependencies and whatnot.

sudo bangbang
  • 27,127
  • 11
  • 75
  • 77
Mark
  • 1,812
  • 3
  • 29
  • 51
  • 1
    try not to ever eject if you can. I don't see anything about react-bootstrap that requires modifying webpack – azium Jan 03 '18 at 01:14

5 Answers5

24

When using create-react-app, you don't need to eject or edit webpack config for using react-bootstrap.

Install react-bootstrap

npm install --save react-bootstrap bootstrap@3

You have to import css separately by adding this to the top of your src/index.js

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

Check out the documentation for using react-bootstrap.

Most dependencies can be added without changing webpack config. You can add packages and start using them.

If you're really concerned about the possibility of changing webpack config, I'd urge you to checkout roadhog. It's a configurable alternative of create-react-app

sudo bangbang
  • 27,127
  • 11
  • 75
  • 77
15

It's easier now with the latest version of bootstrap: https://getbootstrap.com/docs/4.1/getting-started/webpack/

Install bootstrap and dependencies:

npm install bootstrap jquery popper.js --save

Then in your app entry point (index.js) import bootstrap and the css:

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

Good to go!

EDIT

There's now a section in the create-react-app documentation: https://facebook.github.io/create-react-app/docs/adding-bootstrap#docsNav

They mention react-bootstrap and reactstrap if you'd rather use that, and you will not need to eject.

mofojed
  • 1,342
  • 9
  • 11
  • 1
    Wish I saw this sooner, thanks! During the upgrade it was looking for stuff it shouldn't – BRogers May 24 '18 at 21:15
  • 1
    Problem with that is that many folks are trying to avoid using jquery or mixing it in with their projects. – Mark May 25 '18 at 19:57
  • Why adding jquery ? Is this not against React principle ? Or this is a must-have with bootstrap ? – Ragnar Jun 02 '18 at 12:19
  • 1
    Yes jquery is required for bootstrap. There is react-bootstrap that doesn't require jquery but it's only at bootstrap 3: https://react-bootstrap.github.io/ – mofojed Jun 04 '18 at 13:11
4

First off, install bootstrap's latest version in your application.

//To install bootstrap 4(latest version), jQuery, popper.js
npm i bootstrap jquery popper.js --save

Note: jQuery and popper.js are the dependencies of bootstrap.

In index.js in your root directory and add the below line

//Include bootstrap's css 
import './../node_modules/bootstrap/dist/css/bootstrap.min.css';
//Include bootstrap's js
import './../node_modules/bootstrap/dist/js/bootstrap.min.js';

In webpack.config.dev.js(Look for plugins and add the below code)

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    Popper: ['popper.js', 'default'] 
})

So It would look like this.

plugins: [
  ....
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    Popper: ['popper.js', 'default'] 
  })
]
Johnsackson
  • 439
  • 2
  • 7
  • Thanks. While that works, I had preferred not using the JQuery implementation. That said, within React, I have found `reactstrap`to do great. – Mark Feb 15 '18 at 18:36
3

There is a project called 'reactstrap' https://reactstrap.github.io/ which has all the steps you need to integrate Bootstrap with React

npm install bootstrap --save
npm install --save reactstrap react react-dom

Import Bootstrap CSS in the src/index.js file:

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

Import required reactstrap components within src/App.js file or your custom component files:

import { Button } from 'reactstrap';
sendon1982
  • 9,982
  • 61
  • 44
0

for BS5, new and not stable yet.

npm i bootstrap@5.0.0-alpha1 --save

then in the index.js file

import 'bootstrap/dist/css/bootstrap.min.css';
eliram9
  • 39
  • 3