React Bootstrap
reactjsでWebページを作るときに、reactjs用のBootstrapが存在することがわかったので、ためしてみた。
React BootstrapのGetting startedの説明が雑なのか、自分のjsの知識が乏しいがためか、アラートメッセージ一つ出すのに時間がかかったので、やり方をメモする。
Getting startedを読む
Getting startedには、CommonJSとAMDとBrowser globalsの３つの方法が紹介されていて、この時点でCommonJSとAMDというキーワードに初学者は悩む。（最初はAMDがANDのtypoだと思っていた）
それぞれ、以下を読んでなんとなく把握する。(サーバーサイド側のjsの依存関係を解決するための仕様と実装のようだ。サーバーサイド側の話だと思っている、AMDは違うかもしれない)
JavaScriptのモジュール管理(CommonJSとかAMDとかBrowserifyとかwebpack)
CommonJSの話
Browser globalsを試す
赤字でreact-bootstrap.min.jsが必要だと書いてあります。
このまま、htmlにコードをはって実行しても、動きません。
以下のパスにjsを用意する必要があります。
"path/to/react-bootstrap-bower/react-bootstrap.min.js"
react-bootstrap.min.jsを入手する
CommonJSのコード例にあった、以下を実行。npmを事前にインストールする必要があるので、そこまでも結構時間がかかった。
(npmは、nodebrewをインストールして追加しました)
$ npm install react
$ npm install react-bootstrap
react-bootstrapをイントールすると、~/node_modules/react-bootstrap/distディレクトリにreact-bootstrap.min.jsがダウンロードされる。
このreact-bootstrap.min.jsをhtmlから読める場所にコピーする。
Alertコンポーネントを動かす
その後、いろいろ試行錯誤の結果、なんとか動かいた。ポイントは以下。
-
bootstrap.min.cssが必要 -
react.jsとJSXTransformer.jsは、facebookのcdnを利用 -
react-bootstrap.min.jsは前の手順でnpmで入手したものをパスで指定。(htmlから読める場所) - React Bootstrapのサンプルのとおり
var Alert = ReactBootstrap.Alert;だけでは画面に描画されない。-
ReactBootstrap.Alertで生成した、Alert変数を使って、alertInstanceを生成。 -
React.renderメソッドをコールして、DOMの指定をする。- このあたりはReact.jsを知っていればすぐわかる話なのかもしれない。以下を参考にしました。
-
<!DOCTYPE html>
<html>
<head>
<title>test01</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://fb.me/react-0.13.3.min.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<script src="js/react-bootstrap.min.js"></script>
<script type="text/jsx;harmony=true">
var Alert = ReactBootstrap.Alert;
const alertInstance = (
<Alert bsStyle='warning'>
アラートメッセージ
</Alert>
);
React.render(
alertInstance,
document.getElementById('test-container')
);
</script>
</head>
<body>
<div id="test-container"></div>
</body>
</html>
でた。
