「なぜ仮想DOMという概念が俺達の魂を震えさせるのか」という記事の学習資料にあるAwesome Reactで、React General Tutorialsの中のReact.js Koansを一通りやったのでメモを残しておきます。リンクばかりですみません。
React.js Koansは問題を解く形式で進めていくReactの学習教材です。日本語でざっくりとした概要を知りたい方は以下の記事あたりを読むといいかと思います。
教材のインストール
$ git clone https://github.com/arkency/reactjs_koans.git
$ cd reactjs_koans
$ npm run setup
でセットアップをした後は、npm run startとかnpm run watchなどとして、後はブラウザとエディタを行き来しながら問題に答えていくだけなので楽です。
exercises内のファイルをいじっていきます。
学習メモ
01-HelloWorld.jsx
コメントアウトの説明を読むと、どうやらタグに気をつけて文章をちょこっと変えるだけということに気がつくはずです。
最初なんで初心者でも簡単ですね。仮に失敗したとしても、エラーメッセージがテストを動かした結果に出るので修正しやすいと思います。
02-PartiesList.jsx
ul内にliを追加してclassName部分を変えるだけです。
ここもまだ簡単ですね。
03-WhatsYourName.jsx
ちょっと長くなります。Stateについて触れます。以降、大活躍するsetStateの初登場です。
コメントアウトにあるように、console.log(event.target.value)するとわかりやすいです。
自分は条件分岐の結果、勘違いして"Hello Hey there. Enter your name."のように表示していたので無駄に時間がかかりました…。
04-Quiz.jsx
クイズに答えるだけのチャプターです。ブラウザは使いません。
true/falseで答える問題は適当に答えても50%の確率で正解しますが、ちゃんと考えて答えましょう。
個人的にこのtrue/falseで答える系の問題が比較的難しかったです。わからなかったらきちんと前の１〜３に戻って説明を読むべきです。
05-Challenge-GroceryList-part-1.jsx
最初に
// This exercise is a bit bigger than the previous ones.
とあるように、これまでに比べ量が増え、一気にReactっぽくなったような気がしました。
this.props.hogeといった部分を理解していないときつそうです。どことどこがつながっているか、よく確認しながらやりました。
05-Challenge-GroceryList-part-2.jsx
インプットフォームに文字を入力して追加、という機能を実装します。
自分は配列操作の部分で少し試行錯誤しましたが、慣れている人だと一瞬だと思います。
05-Challenge-GroceryList-part-3.jsx
追加したアイテムを全部消すボタンの実装。前回ができていれば瞬殺かと思います。
05-Challenge-GroceryList-part-4.jsx
追加したアイテムに対して、やった・やっていない（今回だと用意した・用意していない？になるのか）を切り替える機能を実装します。
(アイテム自身をクリックすると切り替わります)
これも、前回のとかが出来ていれば楽勝・・・かと思ったのですが、自分は思いの外時間がかかってしまいました。。
最初、mapとか使うのかな？と思ったのですが、よく考えたら切り替えたいアイテムに対してgroceryIndexが用意されているので直接それだけ切り替えればOKでした。
ちょっと頭が硬かったです。
06-RenderComponent.jsx
ReactElementとかReactComponentの説明。
今までは特に説明がなかった？ので、確認みたいなものだと思います。build/index.htmlとか見ると理解が深まる？かもしれません。
07-LifecycleMethods.js.jsx
ReactのLifecycleの話。正直あまり良くわかっていないため、今調べると
がヒットしました。やはり一人React.js Advent Calendar 2014はReact初心者にとっては神記事集っぽい。
問題自体はconsole.logを書くだけなのですぐ終わるでしょう。大切なのは上の記事にあるような説明を理解することだと思います。
さいごに
これで一通り終了したわけですが、自分は05-Challenge-GroceryList-part-4.jsxの13行目以降にあるような
// === Tasks below aren't required for proceeding in Koans, but we encourage you to try ===
には取り組んでおらず、テストが通ることだけ意識してやったので、今後暇な時にでも今回触れなかった部分を確認したいです。
Reactは（ほぼ英語教材だけど）学習資料が多いように思うため、今後も積極的にいろいろ試そうと思います。