私はReactJSの初心者ですが、ReactアプリにBootstrapを組み込みたいです
私はbootstrapをインストールしましたnpm install bootstrap --save
ここで、React アプリに Bootstrap CSS と JS をロードしたいと思います。
私は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;
私の問題は、「ノード モジュールから ReactJS アプリにブートストラップ CSS と JS を含めるにはどうすればよいか」ということです。React アプリにブートストラップを含めるように設定するにはどうすればよいですか?
ベストアンサー1
React を初めて使用し、create-react-app
cli セットアップを使用する場合は、以下のnpmコマンドを実行して最新バージョンの bootstrap を含めます。
npm install --save bootstrap
または
npm install --save bootstrap@latest
次に、次のインポート ステートメントを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
)。