2

私は ReactJS の世界には少し慣れていませんが、しばらくの間 Javascript でコーディングしています。デザイン パターンと OOP を使用する前に純粋な JS でコーディングしていたので、ReactJS が行っていることを気に入っているので、これは私にとって大きなアップグレードだと考えています。

私はいくつかのチュートリアルに従い、React について多くのことを読んだのでkriasoft/react-starter-kit、生産性を高めるために最初のアプリを使用して開始することになりました。また、react の「正しい」書き方についてのガイドラインを得ることができるのは良いことです。 .

React-Bootstrapを kriasoft の既存の Starter-kitに統合しようとして、行き詰まりました。

React-Bootstrap からさまざまなコンポーネント (ボタンなど) を簡単にインポートできます。

import Button from '../../../node_modules/react-bootstrap';

私自身のコンポーネントでは、私の問題は、それらの React-Bootstrap コンポーネントに css がないことです。

私はすでに React-Bootstrap 入門ガイドを読み終えましたが、何が間違っているのかを理解するほど頭が良くありませんでした。

react-bootstrapを使用し てインストールし$ npm install react-bootstrap --save ましたが、ブートストラップからコンパイルおよび縮小された最新の CSS をどこに含めるべきかわかりません

<link rel="stylesheet" href="maxcdn....blahblah....bootstrap.min.css">.

ガイドや直感を提供して、誰かがこれを設定するのを手伝ってくれたら素晴らしいでしょう.

4

1 に答える 1

1

https://github.com/facebookincubator/create-react-appを調べることも検討してください。create-react-app

これは、React チームによって構築されたスターター キットです。ワークフローが簡素化され、反応プロジェクトの学習/作成に集中できます。

質問に答えるには、経由でインストールすると、経由npmで使用できます

import { Button, Row, Col } from 'react-bootstrap'

その後、レンダリングで使用できます

<Row>
    <Col md={6}>
        <Button bsStyle="primary" bsSize="large">Submit</Button>
    </Col>
</Row>

ブートストラップ css の場合

最も簡単な方法は、index.html ファイルでブートストラップ css の cdn バージョンを使用することです。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

ただし、ビルド プロセスの一部としてインポートする場合は、css ファイルが付属していないnpm install --save bootstrapため、 bootstrap をインストールする必要があります。react-bootstrap次に、それを次のようにインポートします

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

Webpack が css-loader を使用していることを確認する必要があります。

于 2016-11-20T13:57:34.987 に答える