React - Facebook製。JavaScriptのUI生成ライブラリ // MOONGIFT Archived

Facebookからまた面白そうなソフトウェアが出てきましたよ！ JavaScriptにおけるテンプレートフレームワークは数多く出てきています。いずれも興味深い作りなのですが、ここにきてFacebookがReactというライブラリをリリースしました。 ReactはUIを生成するJavaScriptライブラリで、MVCでいうところのVになります。さっそくコードを見てみましょう。

一番シンプルな実装例。左側がコード、右側が実行結果になります。

Reactは必須ではないのですがJSXというXMLライクな記法を使っています。<hellomessage name="John" />のように定義するとthis.props.nameで値が取り出せます。実際の描画はリアルタイムに反映されるので、Helloのところを修正すればすぐにレンダリング内容が変わります。

こちらはタイマーを使った例。コードが見やすいのではないかと思いますがいかがでしょう。

次がTodoアプリの例。イベントのハンドリングも可能です。

TodoAppとTodoListの二つのクラスを使って動作を制御しています。onSubmitでthis.handleSubmitを指定して、実際にhandleSubmitが実行されているのが分かるかと思います。

Markdownエディタ。外部のライブラリと組み合わせた使い方も可能です。

ここまで来て疑問だったのが、HTMLタグが文字列として定義されていないことです。実際、ここまでのコードをJavaScriptとして実行してもエラーになります。

実際のコードは次のようになっています。

/**
 * @jsx React.DOM
 */

var HELLO_COMPONENT = "\
/** @jsx React.DOM */\n\
var HelloMessage = React.createClass({\n\
  render: function() {\n\
    return <div>{'Hello ' + this.props.name}</div>;\n\
  }\n\
});\n\
\n\
React.renderComponent(<hellomessage name=\"John\" />, mountNode);\
";

React.renderComponent(
  ReactPlayground( {codeText:HELLO_COMPONENT} ),
  document.getElementById('helloExample')
);

つまりReactPlayground( {codeText:HELLO_COMPONENT} )によってReact記法を展開しているようです。ほぼほぼJavaScriptですが、ラッピングすることで最適化処理されたり、より便利な機能を手軽に使えるようになりそうです。 ReactはJavaScript製、Apache License 2.0のオープンソース・ソフトウェアです。 React | A JavaScript library for building user interfaces facebook/react