どのようにブートストラップCSSとJSをreactjsアプリに含めるのですか？

135

私はreactjsの初心者です。reactアプリにブートストラップを含めたいです

ブートストラップをインストールしました 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;

私の問題は「node_modulesからreactjsアプリにブートストラップcssとjsを含める方法？」です。反応アプリに含めるブートストラップの設定方法は？

twitter-bootstrap  reactjs  webpack 
— メフル・マリ
ソース
バックエンドでNode.jsを使用していますか？
— DanielKhan 2016年
BootstrapファイルをHTMLページにインポートするだけ
— Mistalis
@DanielKhan：いいえ、Node.jsを使用していません。
— Mehul Mali
使用しているブートストラップのバージョンが少ないのですか、それともプレーンなCSSだけですか？後者の場合は、CDNバージョンを使用してCSSを含めるだけで、JavaScript部分のブートストラップに反応します。
— DanielKhan
@DanielKhanプレーンなcssを使用しました。CDNをしたくありません。node_modulesからのブートストラップを使用したい。
— Mehul Mali

回答:

245

Reactが初めてで、create-react-appcliセットアップを使用している場合は、以下のnpmコマンドを実行して、最新バージョンのブートストラップを含めます。

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）。

— プラヴィーンMP
ソース
1
Bootstrap 4を使用する場合は、次のコマンドを使用します。npm install bootstrap@4.0.0-alpha.6 --save（現在のところ、上記のインストールコマンドでは、Bootstrapの最新の安定バージョン（3.3.7）がインストールされます）
— lgants
5
Relative imports outside of src/ are not supported.
— riv
3
なぜそれをhtmlテンプレートにリンクしないのか
— わかり
2
— Enrico Giurin
16
jsファイルはどうですか？jquery bootstrap.js
— molikh
49

npmを介して、以下を実行します

npm install bootstrap jquery --save
npm install css-loader style-loader --save-dev

ブートストラップ4の場合は、popper.jsも追加します

npm install popper.js --save

以下を（新しいオブジェクトとして）webpack構成 loaders: [配列に追加します

{
  test: /\.css$/,
  loader: 'style-loader!css-loader'
}

以下をインデックスまたはレイアウトに追加します

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
— 子羊
ソース
4
最新の完璧な回答の1つ+1
— Sushin Pv
33

ReactアプリでBootstrap JqueryベースのJavaScriptコンポーネントを使用することはできません。Reactの外部でDOMを操作しようとすることはすべて悪い習慣と見なされているためです。ここであなたはそれについてより多くの情報を読むことができます。

ReactアプリにBootstrapを含める方法：

1）推奨。他の回答で指定されているように、Bootstrapの生のCSSファイルを含めることができます。

2）react-bootstrapライブラリを見てください。React専用に作成されています。

3）Bootstrap 4の場合、reactstrapがあります

ボーナス

最近では、すぐに使用できるコンポーネント（上記のreact-bootstrapまたはreactstrapなど）を提供するBootstrapライブラリーは一般的に避けています。プロップに依存するようになり（その中にカスタム動作を追加することはできません）、これらのコンポーネントが生成するDOMを制御できなくなります。

したがって、Bootstrap CSSのみを使用するか、Bootstrapを省略します。一般的な経験則は次のとおりです。それが必要かどうかわからない場合は、必要ありません。Bootstrapを含む多くのアプリケーションを見てきましたが、使用しているCSSはごくわずかであり、このCSSの大部分がカスタムスタイルによってオーバーライドされることがあります。

— 翔太
ソース
1
オプション1）で、Bootstrap Javascript（およびjquery）をどのように含めますか？それともしませんか？
— LordAlpaca
1
残念ながら、react-bootstrapもreactstrapもまだBootstrap 4をサポートしていません。
— ジム
1
「ブートストラップを残す」はかなり実行可能なオプションです。素晴らしいアドバイス。
@ジム今彼らはします！
— マリアンナS.
17

importどこでも好きなだけCSSファイルを作成できます。必要に応じてローダーを構成した場合、Webpackはcssをバンドルするよう注意します。

何かのようなもの、

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

そして、webpackの設定は、

loaders: [{ test: /\.css$/, loader: 'style-loader!css-loader' }]

注：フォントローダーも追加する必要があります。追加しないと、エラーが発生します。

— ターディッカアラン
ソース
1
返信ありがとうございます。スタイルローダーとCSSローダー用のnpmモジュールが必要ですか？
— Mehul Mali
1
はい、使用style-loader css-loaderローダーを使用
— Thaadikkaaran 2016年
さて、ウェブパックとは何かを調べるために（何かを含めて、それを使って恐ろしい別のjs-thingになりました）、私の願いは、私のチュートリアルアプリでbootstrap3スタイルのボタンを使用することでした... 't
— J.Guarin 2017
1
J.Guarin @あなたは、Facebookの使用している場合、作成反応するアプリを、それが設定されますwebpackとstyle-loader、あなたのために。
— Peter W
9

私にも同様のシナリオがありました。私のセットアップは以下に示すとおりでした

npm install create-react-app

これにより、ボイラープレートコードのセットアップが開始されます。メインロジックのApp.jsファイルをいじってみてください。

後で、CLIツールによって作成されたindex.htmlでブートストラップCDNを使用できます。または

npm install bootstrap popper jquery

そして、これをApp.jsファイルに含めるだけです。

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.bundle'

クラスの代わりにclassName属性を使用することについて言及している著者はほとんどいませんが、私の場合、どちらも以下のように機能していました。ただし、クラスを使用し、ブラウザの開発者ツールでコンソールを表示すると、クラスを使用するとエラーが発生するので、代わりにclassNameを使用してください。

    <div className="App" class = "container"> //dont use class attribute

また、ブートストラップとの競合を避けるために、デフォルトのCSSインポートを削除することを忘れないでください。

それがお役に立てば幸いです、ハッピーコーディング!!!

— Deekshith Anand
ソース
7

Reactでブートストラップを使用するには、以下のリンクに従ってください。 https://react-bootstrap.github.io/

インストールの場合：

$ npm install --save react react-dom
$ npm install --save react-bootstrap

------------------------------------ OR ------------- ------------------------

CSSのBootstrap CDNを反応のindex.htmlファイルのタグに入れ、JsのブートストラップCDNをindex.htmlファイルのタグに入れます。以下のクラスの代わりにclassNameを使用しますindex.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="../src/images/dropbox_logo.svg">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">




  </head>
  <body>

    <div id="root"></div>

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

  </body>
</html>
— アディティアパルマー
ソース
1
あなたが提供したリンクは
— David
Davidさん、CSSのBootstrap CDNを反応のindex.jsファイルの<head>タグに入れてください。JSのBootstrap CDNをindex.jsファイルの<body>タグに入れてください。クラスのclassName instradを使用します。
— Aditya Parmar
5

jqueryはbootstrap.jsの要件であるため、jqueryとブートストラップを提供するための完全な回答：

jqueryとブートストラップをnode_modulesにインストールします。

npm install bootstrap
npm install jquery

この正確なファイルパスを使用してコンポーネントにインポートします。

import 'jquery/src/jquery'; //for bootstrap.min.js
//bootstrap-theme file for bootstrap 3 only
import 'bootstrap/dist/css/bootstrap-theme.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
— ギャビン・ベルソン
ソース
jqueryをインポートする必要はなく、npmでインストールするだけです。ブートストラップはそれ自体でロードすると思います
— Madacol
1
ブートストラップ3では、一部の機能のためにjqueryをロードする必要があります
— GavinBelson
ブートストラップ4.4.1を使用している場合は、popper.jsによって参照されるnpmモジュールもインストールする必要があります'bootstrap/dist/js/bootstrap.min.js'。
— Binita Bharati
1
良い答え、ブートストラップ3でこの問題に遭遇しimport 'jquery/src/jquery'、import 'jquery'修正する代わりに使用
— Cipher
3 
npm install --save bootstrap

このimportステートメントをindex.jsファイルに追加します

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

または、index.htmlファイルにCDNを追加するだけです。

— ニキル
ソース
jqueryはどうですか？
— ValRob
@ValRobを使用してプロジェクトにjqueryを追加します。npmi jquery --save次に$を 'jquery'からインポートします
— Nikhil
3

これが役に立てば幸い;）

ステップ1：NPMを使用して、次のコマンドをインストールします

npm install --save reactstrap@next react react-dom

ステップ2：index.jsメインスクリプトのインポートコマンドの例

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

ステップ3：UIコンポーネントがウェブサイト reactstrap.github.ioを参照する

— ヴィディヤパティカンダサミー
ソース
1

あなたはそれを直接インストールすることができます 

$ npm install --save react react-dom
$ npm install --save react-bootstrap

次に、本当に必要なものを次のようにブートストラップからインポートします。

import Button from 'react-bootstrap/lib/Button';

//または

import  Button  from 'react-bootstrap';

そしてまたあなたはインストールすることができます：

npm install --save reactstrap@next react react-dom

こちらをチェックしてください。

そしてCSSについては、このリンクもcarlyyで読むことができます

ここを読んで

— マジェド・ホリア
ソース
1

プロジェクト「npm install --save bootstrap@3.3.7」にブートストラップをインストールした後、プロジェクトのSRCフォルダーのindex.jsファイルに移動し、ノードモジュールパッケージからブートストラップをインポートする必要があります。

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

このビデオから助けを得ることができたら、それがあなたを大いに助けることを確認してください。

Reactプロジェクトにブートストラップをインポート

— ユスフ・シェイク
ソース
1

私は指示で試します：

npm install bootstrap
npm install jquery popper.js

次にsrc / index.jsで：

import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<Dropdown />, document.getElementById('root'));
registerServiceWorker();
— モルテザファトニア
ソース
0

yarnReactアプリで推奨されているものを使用できる場合に備えて、

できるよ、

yarn add bootstrap@4.1.1 // this is to add bootstrap with a specific  version

これはあなたに依存関係として、ブートストラップを追加するpackage.jsonだけでなく。

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "4.1.1", // it will add an entry here
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "1.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

その後bootstrap、index.jsファイルにインポートします。

import 'bootstrap/dist/css/bootstrap.css';
— プライム
ソース
0

以来ブートストラップ/ Reactstrapが、つまり自分の最新バージョンをリリースしたブートストラップ4次の手順を実行して、これを使用することができます

  1. プロジェクトに移動する
  2. ターミナルを開く

  3. npmがすでにインストールされていると想定し、次のコマンドを入力します

    npm install --save reactstrap react react-dom

これにより、プロジェクトの依存関係としてReactstrapがインストールされます。

Reactstrapを使用して作成されたボタンのコードは次のとおりです

import React from 'react';
import { Button } from 'reactstrap';

export default (props) => {
  return (
    <Button color="danger">Danger!</Button>
  );
};
スニペットを展開

Reactstrapは、公式ページにアクセスして確認でき ます

— ハディミール
ソース
0

プロジェクトでCRA（create-react-app）を使用する場合、これを追加できます。

npm install react-bootstrap bootstrap

アプリでブートストラップを使用していて機能しない場合は、index.htmlでこれを使用します。

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
  integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
  crossorigin="anonymous"
/>

私は同様の問題を解決するために上記を行いました。うまくいけば、これはあなたにとって便利です:-)

— モハマドアリ
ソース
0

ブートストラップコンポーネントを使用するには、index.jsファイルにブートストラップをインストールしてインポートするだけでは不十分であることを追加したいだけです。コンポーネントを使用するたびに、次のようにインポートする必要があります。コンテナと行を使用する必要があります

    <Container>
        <Row>
        <Col sm={4}> Test </Col>
        <Col sm={8}> Test </Col>
        </Row>
</Container>

あなたはあなたのjsファイルにインポートする必要があります

import {Container, Row, Col} from 'react-bootstrap';
— Kaygi22
ソース
ドキュメントでは、各コンポーネントを個別にインポートする方法が推奨されます。たとえば、Rowの場合、「react-bootstrap / Row」からRowをインポートします。出典：react-bootstrap.github.io/getting-started/...
— ディランワット
0

最新のブートストラップを含める方法は次のとおりです
https://react-bootstrap.github.io/getting-started/introduction

1.インストール

npm install react-bootstrapブートストラップ

  1. 次に、App.jsにインポートしますimport 'bootstrap / dist / css / bootstrap.min.css';

  2. 次に、アプリで使用するコンポーネントをインポートする必要があります。例：navbar、nav、button、form、formcontrolを使用する場合は、以下のようにこれらすべてをインポートします。

import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import Form from 'react-bootstrap/Form'
import FormControl from 'react-bootstrap/FormControl'
import Button from 'react-bootstrap/Button'


// or less ideally
import { Button } from 'react-bootstrap';
— Mハサンサニー
ソース
問題は、react-bootstrapに関するものではありません。それはブートストラップCSSフレームワークについてです。手段ではない、この（それreact-bootstrap.github.io）が、この1（getbootstrap.com）
— メリーランドラナ。
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.