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
610
Dive into SmartHR UI
nabeliwo
3
1.1k
Web Componentsを使ったウィジェット埋め込みの話
nabeliwo
0
280
Snowpack で始めるバンドルレス開発 / about Snowpack
nabeliwo
0
140
おいでよ フロントエンドの森 / welcome-to-front-end
nabeliwo
0
83
お前もJavaScriptにしてやろうか〜アメーバピグ編〜
nabeliwo
0
440
React + flumptでイカ戦績グラフ化ツールを作ってみた
nabeliwo
0
170
Other Decks in Programming
See All in Programming
Remix × Cloudflare Pages × Sentry 奮闘記 / remix-pages-sentry
nkzn
1
400
Iteratorでページネーションを実現する
sonatard
3
710
Vue :: Better Testing 2024
up1
1
390
Pythonによるイベントソーシングへの挑戦と現状に対する考察 / Challenging Event Sourcing with Python and Reflections on the Current State
nrslib
3
1.2k
XP2024 っていう国際会議に行ってきたよの記
bonotake
4
210
CSC509 Lecture 02
javiergs
PRO
0
160
.NET Aspireのクラウド対応検証: Azureと他環境での実践
ymd65536
1
410
自分だけの世界を創るクリエイティブコーディング / Creative Coding: Creating Your Own World
chobishiba
2
820
◯◯エンジニアになった理由
gessy0129
PRO
0
640
Go製CLIツールGatling Commanderによる負荷試験実施の自動化
okmtz
3
690
DjangoNinjaで高速なAPI開発を実現する
masaya00
0
500
ACES Meet におけるリリース作業改善の取り組み
fukucheee
0
130
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Practical Orchestrator
shlominoach
186
10k
Facilitating Awesome Meetings
lara
49
6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
4
120
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Docker and Python
trallard
40
3k
Designing Experiences People Love
moore
138
23k
The Invisible Customer
myddelton
119
13k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
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
おわり