2時間で学ぶ React ハンズオン に参加した記録

  • 9
    Like
  • 0
    Comment
More than 1 year has passed since last update.

リンク

http://sha.connpass.com/event/39791/

PR

勝尾寺ハッカソン (2016-09-17~18)
http://www.innovation-osaka.jp/katsuojihack/

5 分でなんとなくわかる React

JSの3つの大きな転換点

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 だけを書き換える -> 早い!

ハンズオン

https://github.com/Lebe-Inc/react-handson-vol0/

  • lv1 ブランチ -> ブロックをクリックしてコインを出すゲーム
  • lv2 ブランチ -> TODO リスト

※ lv2 ブランチは ひな形が準備されているので、作っていく。
※ lv2-comp ブランチは 完成形

lv2 の解説

  • bandle.js -> コンパイル後のJSファイル
  • package.json に設定が書かれている
  • script の部分で「どのJSファイルを元に どんな名前でJSファイルを出力しなさい」という設定を書いてある。
  • flux ライクな書き方をしているので、これを見ながらflux になれることができる

React CSS

JS オブジェクトのようにスタイルを書き、コンポーネントにスタイルタグを使って読み込ませることで、CSS セレクタなどを使用せずにスタイルを当てることも出来る。

コラム

なぜJSがフレームワークも含めて盛り上がるの?
→高機能なサーバを1つ手に入れるには高いお金が必要だが、クライアントはどんどんとスペック成長が見られるし、そのリソースを利用する方がサービス提供側は安くつくためでは?