Using Bootstrap4 with React

@tookapic

Story

I like Bootstrap.

Using React

create directories

mkdir practice-react-bootstrap4 && cd $_
mkdir src www 

install required modules for using ES6 and React

npm init -y
npm install --save-dev webpack webpack-dev-server
npm install --save-dev babel-core babel-loader babel-preset-es2015
npm install --save-dev babel-preset-stage-0 babel-polyfill
npm install --save-dev babel-preset-react
npm install --save react react-dom

create webpack.config.js:

const webpack = require('webpack')

module.exports = {
  entry: ['./src/index.js'],
  output: {
    path: './www',
    filename: 'bundle.js'
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './www',
    port: 3000,
    hot: false,
    inline: true,
    colors: true
  },
  resolve: {
    extensions: ['', '.js']
  },
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }
    ]
  }
}

create .babelrc:

{
  "presets": ["react", "es2015", "stage-0"],
  "comments": false
}

run webpack-dev-server and browse it.

% $(npm bin)/webpack

Then, you can see "Hello React."

Bootstrap4 CSS

install required modules

npm install --save-dev style-loader css-loader
npm install --save bootstrap@next

edit src/index.js:

 const React = require('react')
 import { render } from 'react-dom'
 
+import 'bootstrap/dist/css/bootstrap.css'
+
 const Hello = React.createClass({
   render: function() {
     return (
-      <div className="container">Hello {this.props.name}</div>
+      <div className="container">
+        <button className="btn btn-default">Hello {this.props.name}</button>
+      </div>
     )
   }
 })

edit webpack.config.js:

   module: {
     loaders: [
-      { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }
+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel' },
+      { test: /\.css$/, loader: "style-loader!css-loader" }
     ]

Bootstrap4 JS

Note: Bootstrap4 requires jquery and tether,

practice-bootstrap4@1.0.0 /Users/okamuuu/practice-bootstrap4
└─┬ bootstrap@4.0.0-alpha.5 
  ├── jquery@3.1.1 
  └── tether@1.4.0 

edit webpack.config.js to add jquery and tether

       { test: /\.js$/, exclude: /node_modules/, loader: 'babel' },
       { test: /\.css$/, loader: "style-loader!css-loader" }
     ]
-  }
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      jQuery: 'jquery',
+      $: "jquery",
+      "window.Tether": 'tether'
+    })
+  ]
 }

edit src/index.js:

 const React = require('react')
 import { render } from 'react-dom'
 
+import 'bootstrap'
 import 'bootstrap/dist/css/bootstrap.css'
 
 const Hello = React.createClass({
   render: function() {
     return (
       <div className="container">
-        <button className="btn btn-default">Hello {this.props.name}</button>
+        <div className="dropdown open">
+          <button className="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Dropdown button
+          </button>
+          <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
+            <a className="dropdown-item" href="#">Action</a>
+            <a className="dropdown-item" href="#">Another action</a>
+            <a className="dropdown-item" href="#">Something else here</a>
+          </div>
+        </div>
       </div>
     )
   }

Enjoy:)