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

おわり