web-dev-qa-db-ja.com

create-react-appで、Bootstrap 4？

Create-react-appはejectを使用せずにWebpack構成を非表示にするため、reactstrapやreact-bootstrapなどを使用したい場合、イジェクトする必要がありますか、イジェクトせずに問題ありませんか？

必要なものを使用するためにejectをいつ必要とするのかを決定するポイントについて興味がありますか？私のアプリのこの時点では、単にプロトタイプを作成しているだけですが、依存関係が増えればどうなるでしょう。

twitter-bootstrapreactjswebpackcreate-react-appreactstrap
17
Mark

Create-react-appを使用する場合、react-bootstrapを使用するためにwebpack構成をイジェクトまたは編集する必要はありません。

React-bootstrapをインストールする

npm install --save react-bootstrap bootstrap@3

これをsrc/index.jsの先頭に追加して、CSSを個別にインポートする必要があります

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

react-bootstrapを使用するためのドキュメント を確認してください。

ほとんどの依存関係は、webpackの設定を変更せずに追加できます。パッケージを追加して、使用を開始できます。

Webpackの設定を変更する可能性を本当に懸念している場合は、 roadhog をチェックアウトすることをお勧めします。 create-react-appの構成可能な代替手段です

23
sudo bangbang

ブートストラップの最新バージョンで簡単になりました： https://getbootstrap.com/docs/4.1/getting-started/webpack/

インストールbootstrapおよび依存関係：

npm install bootstrap jquery popper.js --save

次に、アプリのエントリポイント（index.js）import bootstrapおよびcss：

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

行ってもいい！

[〜＃〜] edit [〜＃〜]

Create-react-appドキュメントにセクションがあります： https://facebook.github.io/create-react-app/docs/adding-bootstrap#docsNav

彼らは react-bootstrap と reactstrap に言及しており、それを使用したい場合は、イジェクトする必要はありません。

15
mofojed

まず、アプリケーションにブートストラップの最新バージョンをインストールします。

//To install bootstrap 4(latest version), jQuery, popper.js
npm i bootstrap jquery popper.js --save

注：jQueryとpopper.jsは、ブートストラップの依存関係です。

ルートディレクトリのindex.jsで、以下の行を追加します

//Include bootstrap's css 
import './../node_modules/bootstrap/dist/css/bootstrap.min.css';
//Include bootstrap's js
import './../node_modules/bootstrap/dist/js/bootstrap.min.js';

Webpack.config.dev.jsで（プラグインを探し、以下のコードを追加します）

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    Popper: ['popper.js', 'default'] 
})

だから、このようになります。

plugins: [
  ....
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    Popper: ['popper.js', 'default'] 
  })
]
3
Johnsackson

「reactstrap」と呼ばれるプロジェクトがあります https://reactstrap.github.io/ これには、統合するために必要なすべてのステップがありますBootstrap= React

npm install bootstrap --save
npm install --save reactstrap react react-dom

Import Bootstrap src/index.jsファイルのCSS：

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

Src/App.jsファイルまたはカスタムコンポーネントファイル内に必要な反応ストラップコンポーネントをインポートします。

import { Button } from 'reactstrap';
3
sendon1982