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
2
3.6k
STORES へのID基盤の導入と、ユーザーアカウントの移行を振り返って
upinetree
5
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
550
書籍紹介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
The Rise of LLMOps
asei
8
1.7k
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
430
Introduction to Works of ML Engineer in LY Corporation
lycorp_recruit_jp
0
140
Adopting Jetpack Compose in Your Existing Project - GDG DevFest Bangkok 2024
akexorcist
0
110
障害対応指揮の意思決定と情報共有における価値観 / Waroom Meetup #2
arthur1
5
490
日経電子版のStoreKit2フルリニューアル
shimastripe
1
140
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
1
110
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
510
エンジニア人生の拡張性を高める 「探索型キャリア設計」の提案
tenshoku_draft
1
130
心が動くエンジニアリング ── 私が夢中になる理由
16bitidol
0
100
アジャイルチームがらしさを発揮するための目標づくり / Making the goal and enabling the team
kakehashi
3
140
Lambda10周年!Lambdaは何をもたらしたか
smt7174
2
110
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Designing Experiences People Love
moore
138
23k
Fireside Chat
paigeccino
34
3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
RailsConf 2023
tenderlove
29
900
The Cost Of JavaScript in 2023
addyosmani
45
6.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
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
おつかれさまでした