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
280
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
4.4k
STORES へのID基盤の導入と、ユーザーアカウントの移行を振り返って
upinetree
5
3.1k
バックエンド基盤チームのお仕事 / The value of the backend base team
upinetree
0
3.7k
CSSの技術的負債との向き合い方 / How to Deal with Technical Debt of CSS (ja)
upinetree
5
4.3k
How to Deal with Technical Debt of CSS
upinetree
1
570
書籍紹介LT:現場で使える Ruby on Rails 5 速習実践ガイド
upinetree
0
210
Introduction to Entering Test Design (Japanese)
upinetree
0
830
history of nicorepo gem and me
upinetree
0
160
Visualize team communications on github
upinetree
4
1.2k
Other Decks in Technology
See All in Technology
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
230
解析の定理証明実践@Lean 4
dec9ue
0
140
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
130
OAuth/OpenID Connectで実現するMCPのセキュアなアクセス管理
kuralab
5
930
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
310
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.2k
BigQuery Remote FunctionでLooker Studioをインタラクティブ化
cuebic9bic
2
240
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
2.6k
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
190
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
0
110
生成AIでwebアプリケーションを作ってみた
tajimon
2
140
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
110
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
A better future with KSS
kneath
239
17k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Six Lessons from altMBA
skipperchong
28
3.8k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
The Cult of Friendly URLs
andyhume
79
6.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
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
おつかれさまでした