Integrate React App with webpack and bootstrap

The first thing need to install react, react-dom, webpack, babel-preset-es2015, bootstrap, react-bootstrap, css-loader, url-loader. As all components are installed already I paste the package.json file contents.

“devDependencies”: {
 “babel-cli”: “⁶.18.0”,
 “babel-core”: “⁶.25.0”,
 “babel-loader”: “⁶.2.7”,
 “babel-preset-es2015”: “⁶.24.1”,
 “babel-preset-es2015-node4”: “².1.1”,
 “babel-preset-es2015-node6”: “⁰.4.0”,
 “babel-preset-latest”: “⁶.16.0”,
 “babel-preset-react”: “⁶.16.0”,
 “babel-preset-stage-0”: “⁶.16.0”,
 “css-loader”: “⁰.28.4”,
 “file-loader”: “⁰.11.2”,
 “react-bootstrap”: “⁰.31.0”,
 “style-loader”: “⁰.18.2”,
 “url-loader”: “⁰.5.9”,
 “webpack”: “¹.13.3”,
 “webpack-dev-server”: “¹.16.2”
 },
 “dependencies”: {
 “assert”: “¹.4.1”,
 “bootstrap”: “³.3.7”,
 “react”: “¹⁵.3.2”,
 “react-dom”: “¹⁵.3.2”,
 “react-icons”: “².2.1”,
 “react-router”: “³.0.0”,
 “serve-favicon”: “~2.4.2”
 }

For install react-bootstrap and bootstrap use command

npm install — save-dev react-bootstrap
npm install — save bootstrap

Next we need to configure webpack.config.js file.

module: {
 loaders: [
 { 
 test: /\.css$/, 
 loader: “style-loader!css-loader” 
 }, 
 {
 test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
 loader: ‘url-loader’
 }
 ]
 }

Then in your root js file import bootstrap/dist/css/bootstrap.css using code

import Bootstrap from ‘bootstrap/dist/css/bootstrap.css’;

Now to use Button component of bootstrap import into component’s js file using code

import { Button } from ‘react-bootstrap’
Next add the
<Button type=”button” className=”btn btn-primary”>Primary</Button>

where it’s needed. Enjoy!