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を含める方法」です。反応アプリに含めるようにブートストラップを設定するにはどうすればよいですか？
あなたが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 を属性として使用します）。
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の大部分はカスタムスタイルによって無効にされています。
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';
あなたが望むところならどこでもcssファイルをimportすることができます。必要に応じてローダーを設定した場合、Webpackはcssをバンドルするように注意します。
何かのようなもの、
import 'bootstrap/dist/css/bootstrap.css';
そしてwebpackの設定は、
loaders: [{ test: /\.css$/, loader: 'style-loader!css-loader' }]
注：フォントローダーも追加する必要があります。そうしないとエラーが発生します。
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>
これが役に立つことを願っています;）
ステップ1：NPMを使用して次のベローコマンドをインストールします
npm install --save reactstrap@next 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を追加するだけでもかまいません。
あなたはそれを介して直接それをインストールすることができます
$ 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のためにあなたはこのリンクをも無作法に読むことができます
プロジェクトで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"
/>
私は同様の問題を解決するために上記をしました。うまくいけば、これはあなたにとって便利です:-)
念のため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';
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';
プロジェクトにブートストラップをインストールした後に、 "npm install --save [email protected]"プロジェクトSRCフォルダ内のindex.jsファイルに移動し、ノードモジュールパッケージからブートストラップをインポートする必要があります。
'bootstrap/dist/css/bootstrap.min.css'をインポートしてください。
あなたがこのビデオから助けを得ることができるのが好きなら、それはきっとあなたに大いに役立つでしょう。
Bootstrap/Reactstrap は最新バージョンをリリースしているので、すなわち Bootstrap 4 とすることができます。
- プロジェクトに移動します
- 端末を開く
私は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をチェックすることができます 公式ページ
どういうわけか、受け入れられた答えはブートストラップからのcssファイルを含めることについて話しているだけです。
しかし、私はこの質問はここの質問に関連していると思います - Reactで動かないBootstrap Dropdown
助けることができる答えがいくつかあります -
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';
私は命令で試します：
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();