Facebook製JSフレームワークReactまとめVol.1 -Hello, World!- #JavaScript

Reactのドキュメントを気が続き限りまとめていく。

Reactとは

公式ページからの引用と抜粋

facebook.github.io/react

ReactはfacebookやInstagramで開発されたインターフェース用Javascriptライブラリで、データの変化が多い大規模アプリケーションを構築する際に発生する問題を解決するために作成された。  

ReactはMVCフレームワークではなく、一般的にMVCでいうVとして使用される。  

多くのフレームワークで使用されているテンプレートを使用することなく、コンポーネントにまで分解してインターフェースを構築する手法をとっていて、これによって拡張やメンテナンスが簡単となった。

Fluxと呼ばれるアーキテクチャに基づいているらしいが、これはまた今度。

とりあえずはコードで理解したほうが早いと思う。

Hello, world!

<!DOCTYPE html>
<html>
  <head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.11.2/react.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.11.2/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
      /** @jsx React.DOM */
      React.renderComponent(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

結果

Hello, world!

説明

ReactはJSXというシンタックスを使用することを推奨しているのでJSXを使用するが、
これはそんなにややこしいものではなく、XML的な記法で直感的。
ただ、このJSXをコンパイルするためにJSXTransformer.jsを使うのだが、
JSXのパースに必要なコメント文/** @jsx React.DOM */を書かなければならない。

そして、React.renderComponent()によって<div id="example"></div>の中に<h1>Hello, world!</h1>がレンダリングされる。

React.renderComponent(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

モジュール化

/** @jsx React.DOM */

var Name = React.createClass({
  render: function() {
    return (
      <p>Mr. hoge</p>
    );
  }
});

var HelloWorld = React.createClass({
  render: function() {
    return (
      <div>
      <p>Hello, World!</p>
      <Name/>
      </div>
    );
  }
});

React.renderComponent(
  <HelloWorld/>,
  document.getElementById('example')
);

結果

Hello, World!
Mr. hoge

コンポーネント(いわゆるモジュール)はReact.createClass()で作成し、レンダリングするメソッドrender()の返り値にテンプレートを記述する。

モジュールはネストすることが出来て、親となる要素のコンポーネントに子コンポーネントを代入した変数をJSXのシンタックスで記述すれば良い。
今はNameがHelloWorldの中にレンダリングされ、それがさらにdiv#exampleの中にレンダリングされている感じ。

JSXシンタックス

ReactでXMLライクなJSXを使用する理由として以下の３つがあげられている。

DOMの構造を視覚的に表現しやすい
デザイナーでも簡単にいじれる
MXMLやXAMLを使ったことがある人に馴染みがある

CommentBox(プロパティpropがhogeという値を持っているとする)
 -CommentList

というような構成で、CommentBoxの子要素にCommentListがある場合、以下の様な記述になる。

<CommentBox prop={hoge}><CommentList/><CommentBox>

視覚的にCommentListがCommentBoxに内包されていることがわかると思う。

また、注意する点として、<Parent><Child/></Parent>のように、子要素を持っていない場合(ここでいうChild)は<Child>ではなく<Child/>としなければならない。

コンポーネントのプロパティ

/** @jsx React.DOM */

var Name = React.createClass({
  render: function() {
    return (
      //プロパティを代入する
      <p>Mr. {this.props.name} from {this.props.country}</p>
    );
  }
});

var HelloWorld = React.createClass({
  render: function() {
    return (
      <div>
      <p>Hello, World!</p>
      //コンポーネントを作成する
      <Name name={'Hoge'} country={'Japan'}/>
      <Name name={'Bar'} country={'France'}/>
      </div>
    );
  }
});

React.renderComponent(
  <HelloWorld/>,
  document.getElementById('example')
);

結果

Hello, World!
Mr. Hoge from Japan
Mr. Bar from France

先程も説明したが、コンポーネントに何らかの値を持たせたい場合はコンポーネントの属性にプロパティ名={値}を付け加えれば良い。

このプロパティはコンポーネントのオブジェクトpropsに格納されるため、this.props.プロパティ名でアクセスできる。

参考資料

http://facebook.github.io/react/docs/why-react.html
http://facebook.github.io/react/blog/2013/06/05/why-react.html
http://facebook.github.io/react/docs/getting-started.html
http://facebook.github.io/react/docs/tutorial.html
http://facebook.github.io/react/docs/jsx-in-depth.html

Reactを使ったアプリケーション
http://qiita.com/ytakzk/items/bc317c786fcdd0612498