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
React事始め
Search
nabeliwo
September 10, 2016
Programming
0
540
React事始め
Gizumo社内勉強会「React」勉強会用の資料です。
nabeliwo
September 10, 2016
Tweet
Share
More Decks by nabeliwo
See All by nabeliwo
多言語化対応における TypeScript の型定義を通して開発のしやすさについて考えた / TSKaigi TypeScript Multilingualization
nabeliwo
2
680
Dive into SmartHR UI
nabeliwo
3
1.1k
Web Componentsを使ったウィジェット埋め込みの話
nabeliwo
0
320
Snowpack で始めるバンドルレス開発 / about Snowpack
nabeliwo
0
150
おいでよ フロントエンドの森 / welcome-to-front-end
nabeliwo
0
86
お前もJavaScriptにしてやろうか〜アメーバピグ編〜
nabeliwo
0
450
React + flumptでイカ戦績グラフ化ツールを作ってみた
nabeliwo
0
170
Other Decks in Programming
See All in Programming
Symfony Mapper Component
soyuka
2
730
テストケースの名前はどうつけるべきか?
orgachem
PRO
0
130
Mermaid x AST x 生成AI = コードとドキュメントの完全同期への道
shibuyamizuho
0
160
わたしの星のままで一番星になる ~ 出産を機にSIerからEC事業会社に転職した話 ~
kimura_m_29
0
180
Go の GC の不得意な部分を克服したい
taiyow
2
770
創造的活動から切り拓く新たなキャリア 好きから始めてみる夜勤オペレーターからSREへの転身
yjszk
1
130
暇に任せてProxmoxコンソール 作ってみました
karugamo
1
720
モバイルアプリにおける自動テストの導入戦略
ostk0069
0
110
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
310
ドメインイベント増えすぎ問題
h0r15h0
1
230
Fibonacci Function Gallery - Part 1
philipschwarz
PRO
0
210
CQRS+ES の力を使って効果を感じる / Feel the effects of using the power of CQRS+ES
seike460
PRO
0
120
Featured
See All Featured
Side Projects
sachag
452
42k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
Become a Pro
speakerdeck
PRO
26
5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
440
YesSQL, Process and Tooling at Scale
rocio
169
14k
What's in a price? How to price your products and services
michaelherold
243
12k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Producing Creativity
orderedlist
PRO
341
39k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Building Applications with DynamoDB
mza
91
6.1k
Transcript
React事始め @nabeliwo React勉強会 on 2016.09.10
React is 何 • Viewライブラリ✨ • facebook作 • https://facebook.github.io/react/ •
Not フレームワーク • But フレームワーク比較によく出てくるやつ • Reactを含むアーキテクチャを丸々ひっくるめて語られ ることが多い
Reactその使われっぷり • Facebook • Instagram • Uber • Netflix •
Airbnb • Yahoo • Twitter Mobile • Abema.TV • Qiita • etc… • ReactNative for iOS • ReactNative for Android • ReactNative for Windows web以外でも…
今一番使われている フレームワーク https://medium.com/@sachagreif/the-state-of-javascript- front-end-frameworks-1a2d8a61510#.vvxdjb9de
Reactその特徴 • JUST THE UI • VIRTUAL DOM • DATA
FLOW 公式サイトより… 昔 今 • Declarative • Component-Based • Learn Once, Write Anywhere
JUST THE UI ReactはComponentを作るためのライブラリ (コンポーネント指向)。 Componentを作るだけなので、覚えること もそんなに多くない。 コンポーネント is 何
=> データ、見た目、振る舞い全てをひとま とめにしたもの。超平たく言うとView。
VIRTUAL DOM データの変更をDOMに反映させる話。 Reactでは、JavaScript内にVirtual DOM としてDOMツリーのような構造体を持つ。 その前後の状態を比較して最小限の変更で DOMに反映させる。 雑にrerenderしても実際には必要最低限の DOMしか更新されない。
=> 設計と速度の両立
DATA FLOW アプリケーションの状態を管理している親コ ンポーネント。 そのデータを子のコンポーネントに渡してい く一方向なデータの流れでわかりやすくアプ リケーションを作ることができる。
Declarative 宣言的である。 「変化」ではなく「状態」を定義するので、 目で見て処理がわかりやすい。
Component-Based ReactのComponentを継承してコンポーネン トを作り、そのコンポーネントを組み合わせ てアプリケーションを作ることができる。
Learn Once, Write Anywhere ReactNativeなどが出てきたことで、一度 Reactを学べば多くのプラットフォームでア プリケーションを作ることができる。
Reactに付随する知識 • JSX XMLライクなSyntaxでComponentを作ることができ る、テンプレートのようなもの。 JSの中でHTMLを作るため、JSの予約語であるclassや forが使えないため、classNameとかhtmlForとかにな る。慣れるまで気持ち悪い • Flux
MVCとかそういうアーキテクチャの一つ。決して React = Fluxではないが、Fluxの構成要素として Reactが存在する。
Reactを動かすために必要なもの • BABEL ES2015で書かれた記述をブラウザで動く記述に変換す るトランスパイラ。BABELにReactのpresetをかませ ることでJSXの記述とかもブラウザで処理できるように なる。 • browserify JSの世界で別のファイルで定義したものを呼び出して
使えるようになる。実際には、依存対象を元のファイ ルにくっつけて1つのJSファイルとしてバンドルする。 ※バンドル前提。scriptでReact読んでとかやらない
実際のコードのお話
1 Hello World • Component • state • jsx •
reactのrender • react-domの render
2 JSX • テンプレート • JSの予約語が使 えない • 中でJSが使える •
1つのDOMツ リーでなければ ならない
おまけ1 メンバ変数の定義だがこれをBABELでコンパイルしようと するとエラーが出ます。class-public-fieldsってやつで Stage 1。 あんまり使わない方が良いので素直にコンストラクタ内で宣 言しよう。なのに書いてごめん。つい手癖が…
おまけ2 〜Stage〜 • Stage is 何 TC39というECMAScriptの策定をしている専門委員会 があって、その中でESの新しい機能が提案されると、 それにはStageと呼ばれる5段階のラベルがつけられま す(0〜4)。Stage
4になった提案は次期ECMAScriptの 仕様に取り込まれます。 • 提案段階の機能を使うには BABELのpresetにbabel-preset-stage-0というのをか ませると、全ての提案段階の機能を使うことができます。 でもあんまりよくないよ。
おまけ3 〜Stage詳しく〜 • Stage 0 Strawman - アイディア ただのアイディアです。 •
Stage 1 Proposal - 提案 プロポーザルの目的や解決方法を示している。Polyfillやデモ等を用いて解説し ている。 • Stage 2 Draft - ドラフト いわゆるドラフト。ECMAScript標準と同じルールでAPIや構文、セマンティッ クについて説明していなければならない。 • Stage 3 Candidate - 仕様書と同じ形式 仕様は完成した状態。ECMAScriptのエディタのチェックが必要。 • Stage 4 Finished 策定完了 ECMAScriptへ取り込まれる準備が完了したことを示す状態。 詳細: https://azu.github.io/slide-what-is-ecmascript/slide/12.html
3 親子コンポーネント props・PropTypes・key
おまけ4 〜SFC 〜 => • Stateless Functional Components State(状態)を持たず、ライフサイクルメソッド(後述) も持たないコンポーネントはただの純粋なJSXを返すだ けの関数にすることができる。
4 状態の変更 • stateの直接の変更は禁止 • setStateを使う • 子にpropsとして関数を渡 す
5 ComponentのLifecycle • componentWillMount => DOM展開前 • componentDidMount => DOM展開後
• componentWillReceiveProps => Props更新前 • shouldComponentUpdate => componentのrerender 前。パフォーマンスチューニング用。 • componentWillUpdate => componentの更新前 • componentDidUpdate => componentの更新後 • componentWillUnmount => DOM削除前 Componentの状態の変化に合わせて呼ばれるメソッド群
)あとはひたすら手を動せ!) https://github.com/nabeliwo/simple-react-sample
おわり