Download to read offline
React.js
- 1.
- 2. agenda • React.jsとは • React.jsの特徴 •DEMO • まとめ
- 3. React.jsとは • facebook産 OSS •フレームワークではなくUIライブラリ • リアクティブ（Reactive）プログラミング
- 4. React.jsの特徴 • JUST THEUI • VIRTUAL DOM • DATA FLOW
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
Editor's Notes
- #4 facebook産 UIライブラリ フレームワークじゃない MVCでいうビューの機能を持つ facebookやinstagramはもちろん、Yahoo、atomでも使われている リアクティブプログラミングとは、「反応する側」と「認識する側」を分けて考え、反応に対して自動的に対応するという考え方です。 React.jsの説明では、必ずツリー構造の図が出てきます。ある要素が変更されたら、一方向の流れで、関係する要素も変更されるというものを表しています。
- #5 facebook は 以上の３つを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 ただし、書くコードが短くなるわけではない １度書かれたコードは１０回読まれるといわれている
- #12 ただし、書くコードが短くなるわけではない １度書かれたコードは１０回読まれるといわれている 次ー＞demo
- #14 アプリケーションのデータを管理しているComponentがいて、そのデータを子のComponentに渡していく一方向な関係性を持っているので、コードが読みやすい ただし、書くコードが短くなるわけではない １度書かれたコードは１０回読まれるといわれている
- #15 jQueryやBackbone.js、Angular.jsは規模が大きくなったときに管理するのが難しい。 逆に、React.jsは小さいアプリケーションを高速に開発するためのライブラリではないと言われています。 ブラウザがhtml5に対応していることが条件。古いブラウザはPolyfills
- #16 htmlとjsが混同するため、jsが読めないとだめ。デザイナーさんコーダーさん一緒にやるときは要注意 がんばればライブラリ使える
- #17 flux概念の名前 MVCてきな