何かと話題のReact.js。
百聞は一見に如かずっつうことで一回触ろうの回。
事前知識
React.jsとは
http://qiita.com/koba04/items/4d13caf5ab4507974bf0
React.jsとFlux
http://qiita.com/koba04/items/b32ba449d753fdb2b597
今回やってみること
素直にtutorialをやってみる。
本家（http://facebook.github.io/react/docs/tutorial.html）
翻訳（http://mae.chab.in/archives/2529）
こんなのもあったよ：
React+FluxでTodoMVCを作ってFluxについて学んでみた
http://yutapon.hatenablog.com/entry/2015/04/27/150000
実践
動作確認用のサーバ用意
reactの人が親切にもその辺のファイルを用意してくれているので、
react-tutorial githubからrequirements.txtとserver.pyを拝借。ありがたや。
(今回はpythonでやってますが、他にも言語は選べるので好きなやつで)
$ pip install -r requirements.txt
$ python server.py
* Running on http://127.0.0.1:3000/ (Press CTRL+C to quit)
となればOK。（当たり前だけどブラウザで確認しても404）
public/index.htmlファイルを作成して適当に
hello world!
とでもしてサーバリスタートすればブラウザに表示される。
コーディング開始
もはやチュートリアル通りなのであまり書くことはないんだけど、以下の通り。もくもくとチュートリアルをこなしていく。
- index.htmlで、react.js,JSXTransformer,jqueryを読み込む
- public/scripts/tutorial.js作成
- index.htmlでpublic/scripts/tutorial.js読み込ませる
以下を
<script type="text/jsx;harmony=true" src="scripts/tutorial.js"></script>
- CommentBoxコンポーネントを作成（tutorial.jsに記述）
checkpoint1（進捗：15%）
Hello, world! I am a CommentBox.
画面に表示されればOK.
- 同様にCommentList, CommentFormクラス追記
- Commentクラス追加
- CommentBoxにCommentList, CommentFormを紐づける
checkpoint2（進捗：25%）
Comments
Hello, world! I am a CommentList.
Hello, world! I am a CommentForm.
出力されること確認。都度サーバーリブート必要。
- CommentListにCommentを追加. propsを使ってCommentListからCommentのプロパティにアクセスできるようにする
- マークダウン記法を使えるようにmarked.min.jsを読み込ませる記述をindex.htmlに追加
- marked関数をCommentクラス内で使ってみる
- XSS攻撃対策を施す。markup部分を改良。
checkpoint3（進捗：45%）
Comments
Pete Hunt
This is one comment
Jordan Walke
This is another comment
出力確認。
- render関数前にjson定義を追加
- jsonデータを読み込みようにrender()とCommentBoxを書き換え
checkpoint4（進捗：60%）
表示は変わらないけど、checkpoint3と同じ内容が表示されていればOK.
心配であればjsonデータを書き換えて表示が変わるかやってみるといい。
- 今までtutorial.jsに直書きしていたdataを外部ファイル(json)から取得して表示するようにする
- renderを書き換える。
url="comments.json" - getInitialState()とstate追加
- ルート(publicの親階層)にデータ定義用のcomments.jsonを追加
[
{"author": "Pete Hunt", "text": "This is one comment"},
{"author": "Jordan Walke", "text": "This is *another* comment"}
]
- jsonを取得してstateをアップデートするajax処理を追加
- 上記の処理をloadCommentsFromServer()に切り出して、２秒ごとに実行するように書き換える
checkpoint5（進捗：85%）
サーバーを起動して確認するとコメントが確認できるはず。
jsonにデータを追加すると画面にも動的に反映されることが確認できる。
- フォームの改良
- CommentFormにフォーム追加、submit機能を追加
- CommentBoxにsubmitされたデータを扱う関数handleCommentSubmit()を追加。それをonCommentSubmitイベントにバインディングする
- CommentFormからコールバックを呼ぶ一文追加
- handleCommentSubmitを実装
checkpoint6（進捗：100%）
確認するとフォームが画面にあるはず。そこに任意の文字を入力すると画面とjsonをアップデートするようになっているはず。
以上でチュートリアルは終わりです。
今回はチュートリアルをなぞっただけで目新しいことはしてないけど、Reactの雰囲気はなんとなくつかめたかな。
にっち