React.js
【第1回】谷ゼミ勉強会
2015.07.18 youhe_
agenda
• React.jsとは
• React.jsの特徴
• DEMO
• まとめ
React.jsとは
• facebook産 OSS
• フレームワークではなくUIライブラリ
• リアクティブ(Reactive)プログラミング
React.jsの特徴
• JUST THE UI
• VIRTUAL DOM
• DATA FLOW
JUST THE UI
Componentを作る
VIRTUAL DOM
DOM Treeのような構造体をもち
データの差分のみを再レンダリング
VIRTUAL DOM
DATA FLOW
可読性の向上
DATA FLOW
html
DATA FLOW
css
DATA FLOW
js
DEMO
まとめ
React.jsのメリット
• パフォーマンスが良い
• 規模が大きくなっても管理しやすい
React.jsのデメリット
• htmlとjsが混同する
• 既存のjsライブラリが使えない
おまけ
• Flux
• iOS/AndroidアプリはReactNative

More Related Content

PDF
React+fluxを導入した話
PPTX
React.js + Reduxで作るSPA
PDF
Flux react現状確認会
PPTX
20120128
PDF
gulp芸
PPTX
SPA勉強会
PPTX
2010.11.25 LT Doc fluxflex on Startup Dating
PDF
SIROK技術勉強会 #1 「Reactってなんだ?」
React+fluxを導入した話
React.js + Reduxで作るSPA
Flux react現状確認会
20120128
gulp芸
SPA勉強会
2010.11.25 LT Doc fluxflex on Startup Dating
SIROK技術勉強会 #1 「Reactってなんだ?」

What's hot (20)

PPTX
20120609
PDF
まだ DOM 操作で消耗してるの?
PDF
iOS 8のWebKit Frameworkでアプリ内ブラウザがどう変わる?
PDF
さくらとWeb×マーケティングの夕べ #1
PDF
( ゚∀゚)o彡° Flux! Flux!
PDF
Railsらしい 1対多の画面作成
PDF
なぜ人は必死でjQueryを捨てようとしているのか
PPTX
Introduce couchbase server
PDF
EC-CUBE とクラウドは仲良しか?
PDF
JAX-RS(LT)
PDF
React.js + Flux
PPTX
中小企業向けWindows Server OSの基本とTips
PPT
AWS free tier maximization
PDF
Inspector CLI (JAWS-UG 京王線支部 #4 LT)
PDF
Cross-Origin Resource Sharing
PDF
Volvox 001
PDF
Concurrent Programm in JavaScript
PPTX
Concurrent Programming in JavaScript
PDF
Nodejs and mongodb
PPTX
Blog=pelican+bit bucket+docker
20120609
まだ DOM 操作で消耗してるの?
iOS 8のWebKit Frameworkでアプリ内ブラウザがどう変わる?
さくらとWeb×マーケティングの夕べ #1
( ゚∀゚)o彡° Flux! Flux!
Railsらしい 1対多の画面作成
なぜ人は必死でjQueryを捨てようとしているのか
Introduce couchbase server
EC-CUBE とクラウドは仲良しか?
JAX-RS(LT)
React.js + Flux
中小企業向けWindows Server OSの基本とTips
AWS free tier maximization
Inspector CLI (JAWS-UG 京王線支部 #4 LT)
Cross-Origin Resource Sharing
Volvox 001
Concurrent Programm in JavaScript
Concurrent Programming in JavaScript
Nodejs and mongodb
Blog=pelican+bit bucket+docker
Ad

Viewers also liked (10)

PDF
20150523
PDF
AngularJSからReactに移ったケースの話
PPTX
PDF
React.js触ってみた 吉澤和香奈
PPTX
Reactつかってみた
PDF
Frontend Fantasy 〜ミスリルの戦士たち〜
PPTX
React を導入した フロントエンド開発
PDF
React.js + Flux入門 #scripty02
PDF
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
PPTX
今からでも遅くない! React事始め
20150523
AngularJSからReactに移ったケースの話
React.js触ってみた 吉澤和香奈
Reactつかってみた
Frontend Fantasy 〜ミスリルの戦士たち〜
React を導入した フロントエンド開発
React.js + Flux入門 #scripty02
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
今からでも遅くない! React事始め
Ad

Editor's Notes

  • #4: facebook産 UIライブラリ フレームワークじゃない MVCでいうビューの機能を持つ facebookやinstagramはもちろん、Yahoo、atomでも使われている リアクティブプログラミングとは、「反応する側」と「認識する側」を分けて考え、反応に対して自動的に対応するという考え方です。 React.jsの説明では、必ずツリー構造の図が出てきます。ある要素が変更されたら、一方向の流れで、関係する要素も変更されるというものを表しています。
  • #5: facebook は 以上の3つをreactの特徴としてあげている
  • #6: component志向のMVCはおおい Component作るだけなので覚えることも少ないので導入もしやすいかと思います。 (Backbone.jsのViewの部分をReact.jsにするとか、Angular.jsでReact.jsを使ったdirectives作るとか。)
  • #7: ルートのコンポーネントだけで状態を持ち、その状態が変更したらツリーを再構築するというのは、非常に設計を単純にしますが、一部分の変更だけで毎回全てのDOMツリーを再構築するのは速度的な面で問題になります。そのため、差分を抽出してDOMへのレンダリングを最小限にする仕組み
  • #8: ルートのコンポーネントだけで状態を持ち、その状態が変更したらツリーを再構築するというのは、非常に設計を単純にしますが、一部分の変更だけで毎回全てのDOMツリーを再構築するのは速度的な面で問題になります。そのため、差分を抽出してDOMへのレンダリングを最小限にする仕組み
  • #9: アプリケーションのデータを管理しているComponentがいて、そのデータを子のComponentに渡していく一方向な関係性を持っているので、コードが読みやすい 次のスライドー>htmlはグローバルでどこからでも操作できる。
  • #11: ただし、書くコードが短くなるわけではない 1度書かれたコードは10回読まれるといわれている
  • #12: ただし、書くコードが短くなるわけではない 1度書かれたコードは10回読まれるといわれている 次ー>demo
  • #14: アプリケーションのデータを管理しているComponentがいて、そのデータを子のComponentに渡していく一方向な関係性を持っているので、コードが読みやすい ただし、書くコードが短くなるわけではない 1度書かれたコードは10回読まれるといわれている
  • #15: jQueryやBackbone.js、Angular.jsは規模が大きくなったときに管理するのが難しい。 逆に、React.jsは小さいアプリケーションを高速に開発するためのライブラリではないと言われています。 ブラウザがhtml5に対応していることが条件。古いブラウザはPolyfills
  • #16: htmlとjsが混同するため、jsが読めないとだめ。デザイナーさんコーダーさん一緒にやるときは要注意 がんばればライブラリ使える
  • #17: flux概念の名前 MVCてきな