web-dev-qa-db-ja.com

Reactjsアプリにブートストラップcssとjsを含めるにはどうすればいいですか?

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

私は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を含める方法」です。反応アプリに含めるようにブートストラップを設定するにはどうすればよいですか?

89
Mehul Mali

あなたがReactに不慣れで、 create-react-app cli setupを使用している場合。次に、以下のNPMコマンドを実行して最新バージョンのブートストラップを組み込みます。

 npm install --save bootstrap

または

npm install --save [email protected] 

次に、 index.js fileに次のimport文を追加します。

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

または

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

className を属性として使用することを忘れないでください(反応は class の代わりに className を属性として使用します)。

153
Praveen M P

Reactアプリの中でBootstrap JqueryベースのJavascriptコンポーネントを使用することはできません。Reactの外部でDOMを操作しようとするものはすべて悪い習慣と考えられているからです。 これについてもっと読むことができます

Reactアプリにブートストラップを含める方法:

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

2) react-bootstrap libraryを見てください。 React専用に書かれています。

3)Bootstrap 4には reactstrap があります。

ボーナス

最近は、すぐに使えるコンポーネント(上記のreact-bootstrapやreactstrapなど)を提供するBootstrapライブラリを避けるようにしています。あなたが彼らが取る小道具に依存してきているので(あなたはそれらの中にカスタムの振る舞いを追加することはできません)そしてあなたはこれらのコンポーネントが生成するDOMに対する制御を失います。

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

28
Shota

npm 経由で、次のように実行します。

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

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

npm install popper.js --save

webpack config loaders: [配列に(新しいオブジェクトとして)以下を追加してください。

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

以下を index 、または layout に追加します。

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
22
blamb

あなたが望むところならどこでもcssファイルをimportすることができます。必要に応じてローダーを設定した場合、Webpackはcssをバンドルするように注意します。

何かのようなもの、

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

そしてwebpackの設定は、

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

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

14
Thaadikkaaran

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

インストールの場合

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

------------------------------------または------------- ------------------------

CSSのBootstrap CDNをreactのindex.htmlファイルのタグに、JsのBootstrap CDNをindex.htmlファイルのタグに配置します。 index.htmlの下にあるクラスの代わりにclassNameを使用してください。

<!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>
5
Aditya Parmar

これが役に立つことを願っています;)

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

npm install --save [email protected] react react-dom

ステップ2:example index.jsメインスクリプトのインポート以下のコマンド

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

ステップ3:以下のWebサイトを参照するUIコンポーネント reactstrap.github.io

npm install --save bootstrap 

このimport文をindex.jsファイルに追加します

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

またはindex.htmlファイルにCDNを追加するだけでもかまいません。

3
Nikhil

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

$ 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 [email protected] react react-dom

これをチェックしてください ここをクリックしてください

そしてCSSのためにあなたはこのリンクをも無作法に読むことができます

ここを読んで

1
Majed HORIA

プロジェクトで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
Mohamad Ali

念のためReactアプリに推奨されるyarnを使用できます。

できるよ、

yarn add [email protected] // 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"
  }
}

その後はindex.jsファイルにbootstrapをインポートするだけです。

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

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

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

Jsファイルにインポートする必要があります

import {Container, Row, Col} from 'react-bootstrap';
0
ElKaygi

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

'bootstrap/dist/css/bootstrap.min.css'をインポートしてください。

あなたがこのビデオから助けを得ることができるのが好きなら、それはきっとあなたに大いに役立つでしょう。

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

0
Yousuf Shaikh

Bootstrap/Reactstrap は最新バージョンをリリースしているので、すなわち Bootstrap 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
Hadi Mir

どういうわけか、受け入れられた答えはブートストラップからのcssファイルを含めることについて話しているだけです。

しかし、私はこの質問はここの質問に関連していると思います - Reactで動かないBootstrap Dropdown

助けることができる答えがいくつかあります -

  1. https://stackoverflow.com/a/52251319/4266842
  2. https://stackoverflow.com/a/54188034/4266842
0
Vikram Gulia

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';
0
HoosierCoder

私は命令で試します:

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
Morteza Fathnia