React.jsのGetting Startedを試してみる

http://facebook.github.io/react/docs/getting-started.html
興味がわいたのでReact.jsのGetting Started試していきます。UI構築用ＪＳライブラリだそうです。
今回も試した環境はcloud9です。

#JSFiddle
試すならJSFiddleがお手軽らしいです。
http://jsfiddle.net/reactjs/69z2wepo/
ただこれ以降の項目がJSFiddle使ってないので使わずいきます。

#Starter Kit
スターターキットが用意されてます。ダウンロードして適当な場所に展開します。そしたら`helloworld.html`を展開したファイルのルートディレクトリに作成します。

``` helloworld.html
<!DOCTYPE html>
<html>
  <head>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
      React.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>
```

ウェブサーバを立ち上げてアクセスしてみます。
cloud9ならファイルを開いた状態でＲＵＮボタンを押せば確認できます。

``` ブラウザ画面.
Hello, world
```
この項の要点は

* Javascriptの中にＸＭＬがある
* 上記をＪＳＸと呼ぶ
* 詳しくは下記ＵＲＬを参照
* http://facebook.github.io/react/docs/jsx-in-depth.html
* JSXTransformer.jsを読み込み、script typeを`text/jsx`にすればブラウザ上でも使える。

ようです。凄いですね。

#Separate File
JSXを別ファイルにかいて`<script type="text/jsx" src="jsxfile.jsx"></script>`でも使用できるそうです。`src/halloworld.jsx`を作成して`halloworld.html`を修正します。

なお本家サイトでは拡張子がjsですが
個人的に拡張子をjsxにして区別できたほうがよいと考え、そうしています。

``` src/halloworld.jsx
React.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);
```

``` halloworld.html
<!DOCTYPE html>
<html>
  <head>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
     </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx" src="src/halloworld.jsx"></script>
  </body>
</html>
```
これで先ほどと同じ結果が得られます。


#Offline Transform
jsxファイルをjsに変換できるようです。
まずreact-toolをinstallします。

```
>npm install -g react-tools
/home/ubuntu/.nvm/v0.10.33/bin/jsx -> /home/ubuntu/.nvm/v0.10.33/lib/node_modules/react-tools/bin/jsx
react-tools@0.13.1 /home/ubuntu/.nvm/v0.10.33/lib/node_modules/react-tools
├── jstransform@10.1.0 (base62@0.1.1, esprima-fb@13001.1001.0-dev-harmony-fb, source-map@0.1.31)
└── commoner@0.10.1 (private@0.1.6, commander@2.5.1, graceful-fs@3.0.6, install@0.1.8, q@1.1.2, iconv-lite@0.4.7, mkdirp@0.5.0, glob@4.2.2, recast@0.9.18)
```
入りました。

自動で変換するには以下のようにするようです。
なお拡張子をjsxにしているため、-xオプションで拡張子を指定しています。

```
jsx -x jsx --watch src/ build/
```

```実行結果.
built Module("halloworld")
["halloworld"]
```
buildフォルダに`halloworld.js`が作成されているはずです。

``` build/halloworld.js
React.render(
  React.createElement("h1", null, "Hello, world!"),
  document.getElementById('example')
);
```

jsxファイルを更新すると自動でリビルドが走ります。

```実行結果.
halloworld.jsx changed; rebuilding...
built Module("halloworld")
["halloworld"]
```

このjsファイルを使用する場合、`JSXTransformer.js`が不要になるため、`halloworld.html`は次のようになります。

``` halloworld.html
<!DOCTYPE html>
<html>
  <head>
    <script src="build/react.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/javascript" src="build/halloworld.js"></script>
  </body>
</html>
```

#Want CommonJS?
他ライブラリと共存させる場合、react npm packageを使え。加えて上記のＪＳＸビルドツールを使えばより簡単になるとのことです。必要になったらおいおい試したいと思います。

#Next Steps
次はチュートリアル（http://facebook.github.io/react/docs/tutorial.htm ）かスターターのexampleを見ろとのことです。
ここではチュートリアルに進みたいと思いますが、Getting Startedはここで終わりのため一端切ります。