Hello React - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@upinetree

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Virtual DOM ? • データの変更差分を検出して最小限に更新 • 荒くデータ更新してもパフォーマンスは問題にならない • データを一から組み立てて反映する感覚 • 人間がパッチ処理を考慮する必要がない • サーバがリクエストに応じてHTMLを返す感じと同じ

Slide 8

Slide 8 text

インストール終わったかな

Slide 9

Slide 9 text

まずは練習

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

JSX • JSXという記法でタグを記述できる •

や等、HTMLと同様に使える • ただし、これらはReactで定義されたコンポーネント Practice 1

Slide 14

Slide 14 text

JSX • JSXからVirtual DOMへの変換は色々あるっぽい • gulp + browserify + reactifyと、 react-toolsを試してみた • 今回のサンプルはreact-toolsで変換してます Practice 1

Slide 15

Slide 15 text

Practice 2 コンポーネントの組み合わせ

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Practice 2-2 静的な値 props

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Practice 3 動的な値 state

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

state • this.stateはイミュータブルなので直接更新はできない • setStateで更新する。同時に再renderされる（デフォルト動作） • 初期値はgetInitialStateで設定する • componentDidMountはコンポーネントがツリーに追加された直後に1回だけ呼ばれる Practice 3

Slide 26

Slide 26 text

Practice 4 イベント

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

だいたい基本はできた

Slide 30

Slide 30 text

TODOアプリを作ってみるよ！

Slide 31

Slide 31 text

Step 1 静的なTODOリスト

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Step 2 TODOの追加（未遂）

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

解説 • イベントを受け取るTodoInputに、propsを持つTodoAppがコールバックを渡している • 子コンポーネントにref属性を指定すると、 this.refsで参照できる • this.refs.todoTitle.getDOMNodeで実際の DOMが取得できる • 現状todosは更新できない。なぜだろう？？ Step 2

Slide 37

Slide 37 text

チャレンジ • todoを追加できるように修正してみよう • 制限時間5分くらい • ヒント: getInitialStateを忘れずに Step 2

Slide 38

Slide 38 text

Step 3 TODOの追加（完遂）

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Step 4 見る読む public/todoapp/step4.html src/todoapp/javascripts/step4.js public/todoapp/stylesheets/base.css $ vimdiff src/todoapp/javascripts/ step{3,4}.js

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

個人的な感想

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

感想 • Vueなどよりは記述量は多い • addonを使うともっと簡単に書けるようになるらしい • JSXはHTMLライクだけど結局Javascript • デザイナーさん等、プログラマ以外の人とのやりとりで一工夫いるかも • コメントが書けない？

Slide 47

Slide 47 text

参考資料 • "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

Slide 48

Slide 48 text

おつかれさまでした