react.js
react-bootstrap

create-react-appコマンドを使ってReact-Bootstrapを導入

More than 1 year has passed since last update.

Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成するを見て、少し試した。React-Bootstrapの導入まで軽く試してみた。

環境

ローカル環境:Windows10
ターミナル:GitBash + ConEmu

Qiitaの記事通りHello-Worldまで

Terminal
npm install -g create-react-app
create-react-app hello-world
npm start

2016-07-29.png
ターミナルで上記のコマンド実行で、この画面まで。

Hello-World以降

React-Bootstrap Getting started通りに導入

1.Terminal
npm install react-bootstrap --save
2.Terminal
bower install react react-bootstrap

bash: bower: command not found

2のコマンド実行時に、上記のエラーがでる。以下のコマンド実行し、再度2を実行。

3.Terminal
npm install -gf bower

App.jsで試しにButtonを読み込んでみる。

App.js
import { Button } from 'react-bootstrap';
~~以下のコードをdivタグ内に記述。
<Button className="btn-github" >View Code</Button>

index.htmlでbootstrap.cssを読み込む。

index.html
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"> ->追加
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css"> ->追加

bootstrapのボタンが表示される。
button.png

その他参考

bower command not found windows