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="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