![Users
User
ID
Name
…
User
ID
Name
…
…
[
{ID, Name, …},
{ID, Name, …},
{ID, Name, …},
…
]](https://image.slidesharecdn.com/sirok20150304-150304043226-conversion-gate01/85/SIROK-1-React-76-320.jpg)
SIROK技術勉強会 #1 「Reactってなんだ？」
- 2. Reactってなんだ？
- 8. Growth Push Backbone + Handlebars 本格的にJSでUI実装
- 9. Growth Point TypeScript + Backbone + Handlebars 生のJSつらくなってきた
- 10. Growthbeat TypeScript + Backbone + Underscore template ロジックレスつらい
- 12. Reactとは？
- 16. ビュー操作の難しさ
- 25. 突然の死
- 28. 結局のところ死
- 30. なぜReactか？
- 31. 結局のところ死
- 32. そこでVirtual DOM
- 35. つまり、簡単で速い
- 36. 1. Virtual DOMの全更新 2. Virtual DOMの差分計算 3. DOMへの差分適用 ･･･は「DOMの全更新」より速い
- 37. Hello React
- 38. <!DOCTYPE html> <html> <head> <script src="build/react.js"></script> <script src="build/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>
- 43. JSX
- 44. これじゃない
- 45. これでもない
- 46. JSX is a JavaScript syntax extension that looks similar to XML.
- 48. <!DOCTYPE html> <html> <head> <script src="build/react.js"></script> <script src="build/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>
- 50. JSXのプリコンパイル
- 51. 実行時にコンパイルしたくない。
- 52. npm install -g react-tools JSX JavaScript react.js react-tools 実行
- 54. <!DOCTYPE html> <html> <head> <script src="build/react.js"></script> <!--<script src="build/JSXTransformer.js"></ script>--> </head> <body> <div id="example"></div> <script src="build/helloworld.js"></script> </body> </html>
- 55. Component
- 56. Componentとは？
- 57. Viewをオブジェクト化したもの
- 58. var Hello = React.createClass({ render() { return ( <div>Hello {this.props.name}</div> ) } }); React.render( <Hello name="World" />, document.getElementById('example') );
- 61. var Hello = React.createClass({ render() { return ( <div>Hello {this.props.name}</div> ) } }); React.render( <Hello name="World" />, document.getElementById('example') );
- 63. var Hello = React.createClass({ render() { return ( <div>Hello {this.props.name}</div> ) } }); React.render( <Hello name="World" />, document.getElementById('example') );
- 64. props
- 65. props？
- 69. state
- 70. state？
- 73. var Hello = React.createClass({ getInitialState() { return { name: 'World' }; }, onClick() { this.setState({ name: this.state.name + '!' }); }, render() { return ( <div> <h1>Hello {this.state.name}</h1> <button onClick={this.onClick}>click</button> </div> ) } });
- 76. Users User ID Name … User ID Name … … [ {ID, Name, …}, {ID, Name, …}, {ID, Name, …}, … ]
- 77. var User = React.createClass({ render() { return ( <li>Hello {this.props.user.name}</li> ) } });
- 78. var Users = React.createClass({ // …(略)… render() { var users = this.state.users.map((user) => { return <User user={user}/> }); return ( <ul> {users} </ul> ) } });
- 80. まとめ
- 81. 便利そう。
- 82. 次回予告
- 84. @uchidas
- 85. 3/10(火) 19:00∼