なお、執筆時点でのReact.jsのバージョンは0.12.2です。サンプルとして、次の3つを、本記事のタイトル下にある［ダウンロード］から入手できます
| ダウンロード表示 | ファイル名 |
|---|---|
| 本記事終了時点 | sample-1.zip |
| 完成版 | sample-2.zip |
| 完成版（Bootstrapによるスタイリングあり） | sample-2b.zip |
対象読者
- JavaScriptフレームワーク・ライブラリの選定に悩んでいる方
- 本格的にJavaScriptを触るのが初めてという方
- jQueryでの大規模なフロントエンド開発に限界を感じている方
必要な環境
Node.jsがインストールされていることが推奨です。
React.jsとは何か
React.jsは最近注目を浴びているFacebook製のライブラリで、MVCアーキテクチャでいうViewにあたる機能を提供します。
前提として、JavaScriptの世界でMVCのVといえば、紛れもなくDOM（Document Object Model）のことを指します。特に何も意識しないで作った場合、都合の良いDOMからデータを引っ張り出しては別のDOMを書き換えるといった、行き当たりばったりな作りになりがちです。そこで、MVCの考え方を導入することにより、データを画面とは独立した構造体として切り出し、データを更新⇒画面（DOM）に反映の一定の流れを作ることができます。
React.jsも、まさにこの目的のために生み出されました。正確にはフレームワークという扱いではありませんが、アプリケーションの設計に大きく寄与することには間違いありません。
公式サイトには、特徴として以下の3つが挙げられています。
- 「JUST THE UI」
-
MVCのVであり、既存のアーキテクチャと容易に結合することができます。
- 「VIRTUAL DOM」
-
DOMを模した中間オブジェクトをあらかじめ生成し、更新差分のみを本物のDOMに反映することにより、ハイパフォーマンスを実現します（詳しくは後述）。
- 「DATA FLOW」
-
データフローを一方向に保ち、データと画面（DOM）の対応をを宣言的に記述することによって、可読性を向上させます。
多くのフレームワーク違い、React.jsが提供するのはコンポーネントを作成する仕組みだけです。他の複雑な概念を理解する必要が一切ないため、学習コストは非常に安く済みます。シンプルに上から下までコンポーネントを作ることだけ考えていきましょう。するとデータフローは自然とデータから画面（DOM）へ、コンポーネントツリーの上から下へと一方向に統一されるはずです。
それでは、概念だけでは理解が進まないと思いますので、早速コードを見ていきましょう。
簡単なTODOアプリの作成
MVCフレームワークのサンプルとしてお馴染みの、簡単なTODO管理アプリを作ります。
要件は次のとおりです。
- トップページで新規TODOを登録する
- ［Done］ボタンをクリックするとTODOが完了状態になる
- 未完了のTODOはトップページ（#active）に、完了のTODOは2ページ目（#completed）に表示する
- 画面はTwitter Bootstrapでスタイリングしていますが、今回はサンプルコードをシンプルにするため、CSSを付属していません。
- より多くの要件を盛り込んだサンプルはTodoMVC(React.js)が参考になるでしょう。
