How to include bootstrap css and js in reactjs app

Question

I want to incorporate bootstrap into my ReactJS app because I'm new to it.

Npm install bootstrap —save is how I installed Bootstrap.

In my React app, I now want to load the bootstrap CSS and JS.

I employ Webpack.

webpack.config.js

var config = {
    entry: './src/index',

    output: {
        path: './',
        filename: 'index.js'
    },

    devServer: {
        inline: true,
        port: 8080,
        historyApiFallback: true,
        contentBase:'./src'
    },

    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel',

                query: {
                    presets: ['es2015', 'react']
               }
            }
        ]
    }
};

module. exports = config;

How do I include bootstrap CSS and JS in a ReactJS app from node modules? is my problem. How can I configure bootstrap such that it is included in my React app?

Answer 1

To begin, we will use npm to install the reactstrap library:

1. 1npm install —save reactstrap@next. javascript. 
2. 1import'reactstrap/dist/css/bootstrap.css'; 
3. 1npm install —save reactstrap@next. javascript. 
4. 1import'reactstrap/dist/css/bootstrap.css'; 

For more information, you can refer to our React Course today.