Hello React

Hello React

社内勉強会で発表した資料

https://github.com/upinetree/hello-react

0814cba621ab9aeabcf91b4095d9dd50?s=128

Takuya Matsumoto

January 16, 2015
Tweet

Transcript

  1. Hello React 2015-01-16 万葉究楽部

  2. @upinetree

  3. React.js 勉強しながら まとめてみた

  4. 準備 https://github.com/upinetree/hello-react • cloneしてね • 動かし方はREADME参照 • npmとbowerが事前に必要です

  5. インストール している間に

  6. React.jsとは • MVCでいえばVの部分 • UIのコンポーネント化に着目している • Virtual DOM • 単一方向のデータフロー

  7. Virtual DOM ? • データの変更差分を検出して最小限に更新 • 荒くデータ更新してもパフォーマンスは問 題にならない • データを一から組み立てて反映する感覚

    • 人間がパッチ処理を考慮する必要がない • サーバがリクエストに応じてHTMLを返す 感じと同じ
  8. インストール 終わったかな

  9. まずは練習

  10. Practice 1 コンポーネント定義とJSX

  11. Practice 1 見る 読む public/practice/practice1.html src/practice/javascripts/practice1.js

  12. 解説 • React.createClassでコンポーネント作る • React.renderでコンポーネントツリーを DOMに紐付けて、結果としてHTMLが表示 される • 必ず一つのコンポーネントにまとめて renderする

    Practice 1
  13. JSX • JSXという記法でタグを記述できる • <div>や<table>等、HTMLと同様に使え る • ただし、これらはReactで定義されたコン ポーネント Practice

    1
  14. JSX • JSXからVirtual DOMへの変換は色々あるっ ぽい • gulp + browserify +

    reactifyと、 react-toolsを試してみた • 今回のサンプルはreact-toolsで変換して ます Practice 1
  15. Practice 2 コンポーネントの 組み合わせ

  16. Practice 2-1 組み合わせの基本

  17. Practice 2-1 見る 読む public/practice/practice2-1.html src/practice/javascripts/practice2-1.js

  18. 解説 • コンポーネントを組み合わせてUIを作っ ていく • コンポーネントで囲われた中身は、その コンポーネント内から this.props.childrenとして参照できる • JSXではclassは予約語で使えないので代

    わりにclassNameを使う Practice 2-1
  19. Practice 2-2 静的な値 props

  20. Practice 2-2 見る 読む public/practice/practice2-2.html src/practice/javascripts/practice2-2.js ※2-1とdiffとると分かりやすいです

  21. 解説 • authorをコンポーネントの属性に追加 • コンポーネントの属性を定義すると、 this.propsとして参照することができる • propsはイミュータブル • コンポーネント間で情報の受け渡しをす

    るのに使う Practice 2-1
  22. Practice 3 動的な値 state

  23. Practice 3 見る 読む public/practice/practice3.html src/practice/javascripts/practice3.js

  24. 解説 • githubのissueコメントを見に行って逐次 反映している • 更新が必要なデータは、ミュータブルな stateとして扱う Practice 3

  25. state • this.stateはイミュータブルなので直接更新 はできない • setStateで更新する。同時に再renderされ る(デフォルト動作) • 初期値はgetInitialStateで設定する •

    componentDidMountはコンポーネントが ツリーに追加された直後に1回だけ呼ばれる Practice 3
  26. Practice 4 イベント

  27. Practice 4 見る 読む public/practice/practice4.html src/practice/javascripts/practice4.js

  28. 解説 • onChangeに設定したコールバックで、 フィールドの変更をstateに反映している • 他にもonClickやonSubmitなど、基本的なも のが揃っている • 画面のフィールドは常にVirtualDOMのvalue と同じ値を保とうとする

    • よってvalue属性を指定すると、VirtualDOM 側からしか変更できないフィールドになる Practice 4
  29. だいたい基本はできた

  30. TODOアプリを 作ってみるよ!

  31. Step 1 静的なTODOリスト

  32. Step 1 見る 読む public/todoapp/step1.html src/todoapp/javascripts/step1.js

  33. 解説 • 複数のコンポーネントをArrayで扱うとき、 それぞれにkey属性の指定が必要 • 差分比較のため • 指定しなくても動くが、パフォーマンス が悪いし警告が出る •

    keyは一意である必要があり、そうでない と正しく更新されなくなる Step 1
  34. Step 2 TODOの追加(未遂)

  35. Step 2 見る 読む public/todoapp/step2.html src/todoapp/javascripts/step2.js $ vimdiff src/todoapp/javascripts/ step{1,2}.js

  36. 解説 • イベントを受け取るTodoInputに、propsを 持つTodoAppがコールバックを渡している • 子コンポーネントにref属性を指定すると、 this.refsで参照できる • this.refs.todoTitle.getDOMNodeで実際の DOMが取得できる

    • 現状todosは更新できない。なぜだろう?? Step 2
  37. チャレンジ • todoを追加できるように修正してみよう • 制限時間5分くらい • ヒント: getInitialStateを忘れずに Step 2

  38. Step 3 TODOの追加(完遂)

  39. Step 3 見る 読む public/todoapp/step3.html src/todoapp/javascripts/step3.js $ vimdiff src/todoapp/javascripts/ step{2,3}.js

  40. 解説 • todosをstateとして持たせることでTODO の追加が可能になった • やったね Step 3

  41. Step 4 TODOの完了を切り替える

  42. Step 4 見る 読む public/todoapp/step4.html src/todoapp/javascripts/step4.js public/todoapp/stylesheets/base.css $ vimdiff src/todoapp/javascripts/

    step{3,4}.js
  43. 解説 • 今までの応用 • toggle時に富豪的にsetStateしているけ どちゃんと更新してくれる • todoのmodelを作っても良いかも Step 4

  44. 個人的な感想

  45. 感想 • データの変更差分を考えなくて良いのは楽 • データ更新が雑にできるのも楽だし混乱が 少ない • でも、ちゃんとコンポーネントの構造は考 えないとダメ •

    stateをどこに持たせるのか、どうコンポー ネントを分割するのかなど
  46. 感想 • Vueなどよりは記述量は多い • addonを使うともっと簡単に書けるよう になるらしい • JSXはHTMLライクだけど結局Javascript • デザイナーさん等、プログラマ以外の人

    とのやりとりで一工夫いるかも • コメントが書けない?
  47. 参考資料 • "Getting Started | React"
 http://facebook.github.io/react/docs/getting- started.html • "一人React.js

    Advent Calendar 2014 - Qiita"
 http://qiita.com/advent-calendar/2014/reactjs • "VirtualDOM Advent Calendar 2014 - Qiita"
 http://qiita.com/advent-calendar/2014/ virtual-dom
  48. おつかれさまでした