リンク
PR
勝尾寺ハッカソン （2016-09-17~18）
http://www.innovation-osaka.jp/katsuojihack/
5 分でなんとなくわかる React
JSの３つの大きな転換点
Ajax
- JS での非同期通信
- 2005年代
- DOMを書き換えることが日常という文化
- Prototype.js
- Ajaxやるならこれ
- jQuery との戦争
HTML5 & Node
- モジュール化
- たくさんのフレームワーク
戦争の収束（モダンJavascript）
- コンパイルして使う
- オブジェクト指向
- ライブラリはモジュールとして使う
React とは
UIを作るためのライブラリ
コンポーネントって？
- データ
- テンプレート
- イベント
をひとまとめにする
コンポーネントのいいところ
再利用性が高い
→規模が大きくなったらどうなる？
→そこで flux の登場
fluxとは
コンポーネントを管理する設計手法（概念であり、実装ではない）
実装の例
- fluxible
- fluxxor
- reflux
開発環境の説明
- react -> Reactコア
- react dom -> DOM レンダリングを行う部分
- watchfy -> ファイル監視。自動ビルド
- babelify -> babel の browserify用パッケージ
- もろもろ
React 用語
- コンポーネント（いいねボタンを例に）
- ボタン（クリック） -> event
- いいね数 -> State
- 親から受け取ったもの（クラス名や値など） -> props
Virtual DOM とは
- 仮想DOM
- 書き換わる前と後の diff だけを書き換える -> 早い！
ハンズオン
- lv1 ブランチ -> ブロックをクリックしてコインを出すゲーム
- lv2 ブランチ -> TODO リスト
※ lv2 ブランチは ひな形が準備されているので、作っていく。
※ lv2-comp ブランチは 完成形
lv2 の解説
- bandle.js -> コンパイル後のJSファイル
- package.json に設定が書かれている
- script の部分で「どのJSファイルを元に どんな名前でJSファイルを出力しなさい」という設定を書いてある。
- flux ライクな書き方をしているので、これを見ながらflux になれることができる
React CSS
JS オブジェクトのようにスタイルを書き、コンポーネントにスタイルタグを使って読み込ませることで、CSS セレクタなどを使用せずにスタイルを当てることも出来る。
コラム
なぜJSがフレームワークも含めて盛り上がるの？
→高機能なサーバを１つ手に入れるには高いお金が必要だが、クライアントはどんどんとスペック成長が見られるし、そのリソースを利用する方がサービス提供側は安くつくためでは？