aspec7's garage

エンジニア生活の中で学んだことの備忘録

React.jsいじるために、手っ取り早く環境整える手順をまとめてみた

f:id:aspec7:20150505130038j:plain

React.js!

JavaScriptは昔から好きになれなかったわけですが、フロントエンドを実装するには今は欠かせないわけで。
とはいいつつも、どうしても学ぶ気にならないところへ、去年あたりからザワザワしてきたのがReact.js。
Viewに特化しているというコンセプトもあって、ちょっと学んでみるかという気分になったので、まずは動かす環境をまとめてみました。

JSX

JavaScript XMLの略だそうです。
Reactのコンポーネント内でマークアップ言語を記述するためのXML風のシンタックスです。
Reactを使う上で必ずしも必須となるものではないのですが、覚えた方がソースが直感的に且つ簡潔になるというようなものです。
JSXで記載したプログラムは最終的に、JavaScriptに変換して動作させることになります。

とりあえず動かす

JSXで記載したものを、ブラウザでそのまま動かすことはできません。
JavaScriptに変換する必要があります。
とりあえず動かすには、JSXTransformerを読み込んでおけば大丈夫です。
ですが、コンパイルしてから実行することになるため、パフォーマンスは悪いためリリース環境では使わないようにしましょう。

以下はサンプルです。
sample.htmlは、公式チュートリアルのソースを元にしています。

<!-- sample.html -->
<html>
  <head>
    <title>Hello React</title>
    <script src="https://fb.me/react-0.13.2.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.2.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/jsx">
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
React.render(
  <CommentBox />,
  document.getElementById('content')
);
    </script>
  </body>
</html>

コンパイルして動かす

リリース環境では、事前にコンパイルしたものを提供することが推奨されています。
以下はOS X 環境で、Homebrewを使っての環境準備手順です。

1. node.js をインストール

brew install node.js

2. react-tools をインストール

npm install -g react-tools

3. コンパイルテスト用ファイルの準備

コンパイル練習用の作業用ディレクトリを/path/to/とします。
コンパイルするjsxファイルをsrc/に、コンパイル結果はbuild/に保存するようにします。
index.htmlcompile-test.jsxは、公式チュートリアルのソースを元にしています。

$ tree .
.
├── build
├── index.html
└── src
    └── compile-test.jsx

2 directories, 2 files 
<!-- index.html -->
<html>
  <head>
    <title>Hello React</title>
    <script src="https://fb.me/react-0.13.2.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script src="./build/compile-test.js"></script>
    </script>
  </body>
</html>
// compile-test.jsx
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
React.render(
  <CommentBox />,
  document.getElementById('content')
);

4. jsxコマンドでコンパイル

$ cd /path/to/
$ jsx -x jsx ./src ./build
built Module("compile-test")

コンパイル後は以下のようにcompile-test.jsが作成されています。

$ tree .
.
├── build
│   └── compile-test.js
├── index.html
└── src
    └── compile-test.jsx

2 directories, 3 files

コンパイル後のJavaScriptファイルです。

// compile-test.js
var CommentBox = React.createClass({displayName: "CommentBox",
  render: function() {
    return (
      React.createElement("div", {className: "commentBox"}, 
        "Hello, world! I am a CommentBox."
      )
    );
  }
});
React.render(
  React.createElement(CommentBox, null),
  document.getElementById('content')
);

5. 動作確認してみる

ブラウザを開いて、index.htmlを表示してみます。
アドレスには、file:///path/to/index.htmlを指定します。
Hello, world! I am a CommentBox.と表示されていれば成功です。