React BootstrapのGetting startedを動かすまで

6393 ワード
React ReactBootstrap React テキストリンク

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の指定をする。
test01.html
<!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>

でた。

Button Bouncing Animation
を待つことなく