React entry
- 3. ? シンプルで利用が容易 ? Virtual DOMによるレンダリング効率向上 ? コンポネント指向で保守性、可読性が高い http://facebook.github.io/react/
- 4. Virtual DOM
- 5. ? DOMを直接操作しない ? メモリ上にDOMと同じ構造のVDOMを構築 ? Viewの状態変化を検知すると状態変化前後のVDOMを比較 ? 差分をパッチとしてオリジナルのDOMに当て、効率的なレンダリングを実現 要素の親も 変更されたことがわかる
- 7. コンポーネント指向
- 8. 値 -> DOMの変換をする 再利用を前提にする 変換処理だけをする(関数みたいな感じ) ? 冪等性と疎結合が担保 ? テスタブル ? カジュアルな変更?削除が可能
- 10. とりあえず动かそう
- 12. HelloWold <title>Hello React!</title> <script src=/slideshow/react-entry/52262301/"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>
- 13. コンパイル 1.brew install npm 2.npm install -g react-tools 3.jsx --watch src/ build/
- 15. JSX <script type="text/jsx"> React.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> HTMLやXMLみたいな感じでVirtual DOMを表現
- 16. Tutorial
- 18. ?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