How to Use Webpack with React and Bootstrap

Hello everyone and welcome to “Continuous Improvement”, the podcast where we explore various tips, tricks, and techniques to constantly improve our development skills. I’m your host, Victor, and today we’re going to talk about setting up a project using Webpack, React, and Bootstrap without jQuery.

So, I recently had the experience of setting up a project with these technologies and it turned out to be a bit more time-consuming than I initially anticipated. But worry not! I’ve decided to share the steps I followed to save you from any possible headaches.

The first step is to install all the required dependencies. Open up your terminal and type in the following commands:

npm install react react-dom bootstrap react-bootstrap babel-preset-react --save
npm install webpack css-loader style-loader file-loader url-loader babel-core babel-loader babel-preset-es2015 --save-dev

Once you have installed the dependencies, it’s time to move on to step two. In this step, we need to make some changes to the webpack.config.js file. Open it up and add the necessary loaders. Here’s an example of how your webpack.config.js file might look:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './main.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['es2015', 'react']
        }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.png$/,
        loader: "url-loader?limit=100000"
      },
      // ... more loaders ...
    ]
  },
};

Great! Now that we have our loaders set up, let’s move on to step three. In this step, you need to import the Bootstrap CSS into your main.js file. This can be done with a simple import statement, like this:

import App from './app.jsx';
import Bootstrap from 'bootstrap/dist/css/bootstrap.css';

Finally, we’re at step four! In this step, we’ll import React Bootstrap components into our app.jsx file. Here’s an example of how that might look:

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'react-bootstrap';

const buttonsInstance = (
  <Button>Click me!</Button>
);

ReactDOM.render(buttonsInstance, document.getElementById('here'));

Don’t forget to include a div with the appropriate ID in your HTML file, as well as the bundle.js file. Here’s an example of what your HTML file might look like:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello React</title>
  </head>
  <body>
    <div id="here"></div>
    <script src="bundle.js"></script>
  </body>
</html>

And that’s it! By following these steps, you should be able to set up a project using Webpack, React, and Bootstrap without the need for jQuery. But remember, continuous improvement is all about learning and adapting, so feel free to explore and experiment with different setups that suit your needs.

If you have any questions or need further assistance, don’t hesitate to reach out. You can find me on Twitter, my handle is @VictorDev. Thanks for joining me on this episode of “Continuous Improvement”. Stay tuned for more exciting topics in the world of development. Until next time, happy coding!