Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Hello React
Search
Takuya Matsumoto
January 16, 2015
Technology
4
270
Hello React
社内勉強会で発表した資料
https://github.com/upinetree/hello-react
Takuya Matsumoto
January 16, 2015
Tweet
Share
More Decks by Takuya Matsumoto
See All by Takuya Matsumoto
STORES におけるセッションストアへの Amazon MemoryDB for Redis の活用と、移行戦略 / MemoryDB for STORES Session Store
upinetree
1
3.5k
STORES へのID基盤の導入と、ユーザーアカウントの移行を振り返って
upinetree
4
2.6k
バックエンド基盤チームのお仕事 / The value of the backend base team
upinetree
0
3.2k
CSSの技術的負債との向き合い方 / How to Deal with Technical Debt of CSS (ja)
upinetree
5
4.2k
How to Deal with Technical Debt of CSS
upinetree
1
540
書籍紹介LT:現場で使える Ruby on Rails 5 速習実践ガイド
upinetree
0
200
Introduction to Entering Test Design (Japanese)
upinetree
0
820
history of nicorepo gem and me
upinetree
0
150
Visualize team communications on github
upinetree
4
1.2k
Other Decks in Technology
See All in Technology
Shift-from-React-to-Vue
calm1205
3
1.3k
Nix入門パラダイム編
asa1984
2
200
visionOSでの空間表現実装とImmersive Video表示について / ai-immersive-visionos
cyberagentdevelopers
PRO
1
110
よくわからんサービスについての問い合わせが来たときの強い味方 Amazon Q について
kazzpapa3
0
220
最速最小からはじめるデータプロダクト / Data Product MVP
amaotone
5
740
Aurora_BlueGreenDeploymentsやってみた
tsukasa_ishimaru
1
120
分布で見る効果検証入門 / ai-distributional-effect
cyberagentdevelopers
PRO
4
700
AWSコンテナ本出版から3年経った今、もし改めて執筆し直すなら / If I revise our container book
iselegant
15
4k
LeSSに潜む「隠れWF病」とその処方箋
lycorptech_jp
PRO
2
120
急成長中のWINTICKETにおける品質と開発スピードと向き合ったQA戦略と今後の展望 / winticket-autify
cyberagentdevelopers
PRO
1
160
大規模データ基盤チームのオンプレTiDB運用への挑戦 / dpu-tidb
cyberagentdevelopers
PRO
1
110
わたしとトラックポイント / TrackPoint tips
masahirokawahara
1
240
Featured
See All Featured
The Cult of Friendly URLs
andyhume
78
6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Designing for Performance
lara
604
68k
Code Review Best Practice
trishagee
64
17k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
Designing for humans not robots
tammielis
249
25k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Building Adaptive Systems
keathley
38
2.2k
RailsConf 2023
tenderlove
29
880
How STYLIGHT went responsive
nonsquared
95
5.2k
A better future with KSS
kneath
238
17k
Transcript
Hello React 2015-01-16 万葉究楽部
@upinetree
React.js 勉強しながら まとめてみた
準備 https://github.com/upinetree/hello-react • cloneしてね • 動かし方はREADME参照 • npmとbowerが事前に必要です
インストール している間に
React.jsとは • MVCでいえばVの部分 • UIのコンポーネント化に着目している • Virtual DOM • 単一方向のデータフロー
Virtual DOM ? • データの変更差分を検出して最小限に更新 • 荒くデータ更新してもパフォーマンスは問 題にならない • データを一から組み立てて反映する感覚
• 人間がパッチ処理を考慮する必要がない • サーバがリクエストに応じてHTMLを返す 感じと同じ
インストール 終わったかな
まずは練習
Practice 1 コンポーネント定義とJSX
Practice 1 見る 読む public/practice/practice1.html src/practice/javascripts/practice1.js
解説 • React.createClassでコンポーネント作る • React.renderでコンポーネントツリーを DOMに紐付けて、結果としてHTMLが表示 される • 必ず一つのコンポーネントにまとめて renderする
Practice 1
JSX • JSXという記法でタグを記述できる • <div>や<table>等、HTMLと同様に使え る • ただし、これらはReactで定義されたコン ポーネント Practice
1
JSX • JSXからVirtual DOMへの変換は色々あるっ ぽい • gulp + browserify +
reactifyと、 react-toolsを試してみた • 今回のサンプルはreact-toolsで変換して ます Practice 1
Practice 2 コンポーネントの 組み合わせ
Practice 2-1 組み合わせの基本
Practice 2-1 見る 読む public/practice/practice2-1.html src/practice/javascripts/practice2-1.js
解説 • コンポーネントを組み合わせてUIを作っ ていく • コンポーネントで囲われた中身は、その コンポーネント内から this.props.childrenとして参照できる • JSXではclassは予約語で使えないので代
わりにclassNameを使う Practice 2-1
Practice 2-2 静的な値 props
Practice 2-2 見る 読む public/practice/practice2-2.html src/practice/javascripts/practice2-2.js ※2-1とdiffとると分かりやすいです
解説 • authorをコンポーネントの属性に追加 • コンポーネントの属性を定義すると、 this.propsとして参照することができる • propsはイミュータブル • コンポーネント間で情報の受け渡しをす
るのに使う Practice 2-1
Practice 3 動的な値 state
Practice 3 見る 読む public/practice/practice3.html src/practice/javascripts/practice3.js
解説 • githubのissueコメントを見に行って逐次 反映している • 更新が必要なデータは、ミュータブルな stateとして扱う Practice 3
state • this.stateはイミュータブルなので直接更新 はできない • setStateで更新する。同時に再renderされ る(デフォルト動作) • 初期値はgetInitialStateで設定する •
componentDidMountはコンポーネントが ツリーに追加された直後に1回だけ呼ばれる Practice 3
Practice 4 イベント
Practice 4 見る 読む public/practice/practice4.html src/practice/javascripts/practice4.js
解説 • onChangeに設定したコールバックで、 フィールドの変更をstateに反映している • 他にもonClickやonSubmitなど、基本的なも のが揃っている • 画面のフィールドは常にVirtualDOMのvalue と同じ値を保とうとする
• よってvalue属性を指定すると、VirtualDOM 側からしか変更できないフィールドになる Practice 4
だいたい基本はできた
TODOアプリを 作ってみるよ!
Step 1 静的なTODOリスト
Step 1 見る 読む public/todoapp/step1.html src/todoapp/javascripts/step1.js
解説 • 複数のコンポーネントをArrayで扱うとき、 それぞれにkey属性の指定が必要 • 差分比較のため • 指定しなくても動くが、パフォーマンス が悪いし警告が出る •
keyは一意である必要があり、そうでない と正しく更新されなくなる Step 1
Step 2 TODOの追加(未遂)
Step 2 見る 読む public/todoapp/step2.html src/todoapp/javascripts/step2.js $ vimdiff src/todoapp/javascripts/ step{1,2}.js
解説 • イベントを受け取るTodoInputに、propsを 持つTodoAppがコールバックを渡している • 子コンポーネントにref属性を指定すると、 this.refsで参照できる • this.refs.todoTitle.getDOMNodeで実際の DOMが取得できる
• 現状todosは更新できない。なぜだろう?? Step 2
チャレンジ • todoを追加できるように修正してみよう • 制限時間5分くらい • ヒント: getInitialStateを忘れずに Step 2
Step 3 TODOの追加(完遂)
Step 3 見る 読む public/todoapp/step3.html src/todoapp/javascripts/step3.js $ vimdiff src/todoapp/javascripts/ step{2,3}.js
解説 • todosをstateとして持たせることでTODO の追加が可能になった • やったね Step 3
Step 4 TODOの完了を切り替える
Step 4 見る 読む public/todoapp/step4.html src/todoapp/javascripts/step4.js public/todoapp/stylesheets/base.css $ vimdiff src/todoapp/javascripts/
step{3,4}.js
解説 • 今までの応用 • toggle時に富豪的にsetStateしているけ どちゃんと更新してくれる • todoのmodelを作っても良いかも Step 4
個人的な感想
感想 • データの変更差分を考えなくて良いのは楽 • データ更新が雑にできるのも楽だし混乱が 少ない • でも、ちゃんとコンポーネントの構造は考 えないとダメ •
stateをどこに持たせるのか、どうコンポー ネントを分割するのかなど
感想 • Vueなどよりは記述量は多い • addonを使うともっと簡単に書けるよう になるらしい • JSXはHTMLライクだけど結局Javascript • デザイナーさん等、プログラマ以外の人
とのやりとりで一工夫いるかも • コメントが書けない?
参考資料 • "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
おつかれさまでした