react entry
Post on 12-Apr-2017
234 Views
Preview:
TRANSCRIPT
入門 React2015-08-28 miuranobuaki
React 〔ある作用に対して〕 作用し合う，反応を示す
• シンプルで利用が容易
• Virtual DOMによるレンダリング効率向上
• コンポネント指向で保守性、可読性が高い
http://facebook.github.io/react/
Virtual DOM
• DOMを直接操作しない
• メモリ上にDOMと同じ構造のVDOMを構築
• Viewの状態変化を検知すると状態変化前後のVDOMを比較
• 差分をパッチとしてオリジナルのDOMに当て、効率的なレンダリングを実現
要素の親も 変更されたことがわかる
最速というわけではない
Virtual DOMを使った差分更新は
すべてをDOM書き換えるよりは高速
という意味
コンポーネント指向
値 -> DOMの変換をする
再利用を前提にする
変換処理だけをする(関数みたいな感じ)
• 冪等性と疎結合が担保 • テスタブル • カジュアルな変更・削除が可能
データの流れを一方向に保つ
とりあえず動かそう
FacebookのJSを読み込む
ダウンロードする
<script src="http://fb.me/react-0.13.3.js"></script> <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
http://facebook.github.io/react/
OR
HelloWold <title>Hello React!</title> <script src="react.js"></script> <script src="JSXTransformer.js"></script> </head> <body> <div id="example"></div> <script type="text/jsx"> React.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body> </html>
コンパイル
1.brew install npm
2.npm install -g react-tools
3.jsx --watch src/ build/
JSX (JavaScriptXml)
JSX
<script type="text/jsx"> React.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script>
HTMLやXMLみたいな感じでVirtual DOMを表現
Tutorial
入門しきれなかったorz また続きをやります。。。
・GET STANDARD http://facebook.github.io/react/docs/getting-started.html
・Tutorial http://facebook.github.io/react/docs/tutorial.html
・Thinking in React http://facebook.github.io/react/docs/thinking-in-react.html
top related