[フロントエンド探索1]React.jsを始めてみる（tutorialやる）

何かと話題の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ファイルを作成して適当に

public/index.html

hello world!

とでもしてサーバリスタートすればブラウザに表示される。

コーディング開始

もはやチュートリアル通りなのであまり書くことはないんだけど、以下の通り。もくもくとチュートリアルをこなしていく。

• index.htmlで、react.js,JSXTransformer,jqueryを読み込む
• public/scripts/tutorial.js作成
• index.htmlでpublic/scripts/tutorial.js読み込ませる

以下を

下のscriptタグを置き換える。

index.html

<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を追加

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の雰囲気はなんとなくつかめたかな。

にっち