[解決済み] reactjsアプリでbootstrapのcssとjsをインクルードする方法は？

質問

私はreactjsの初心者です、私は私の反応アプリケーションにbootstrapを含めたい

ブートストラップをインストールするには npm install bootstrap --save

さて、私の反応アプリでブートストラップのCSSとJSをロードしたいと思います。

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 to include bootstrap css and js in reactjs app from node_modules?" How to setup for bootstrap to include in my react app?です。

解決するには？

Reactを初めて使う方で create-react-app cli のセットアップを実行します。 npm コマンドを実行し、最新版の bootstrap をインクルードします。

npm install --save bootstrap

または

npm install --save bootstrap@latest

次に、以下のimport文を index.js ファイルを作成します。( https://getbootstrap.com/docs/4.4/getting-started/webpack/#importing-compiled-css )

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

または

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

を使うことを忘れないでください。 className をターゲット要素の属性として使用します（reactでは className の代わりに属性として class ).