Download as PDF, PPTX
![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.
- 4.
- 5.
- 6.
- 7.
- 8. Growth Push Backbone +Handlebars 本格的にJSでUI実装
- 9. Growth Point TypeScript +Backbone + Handlebars 生のJSつらくなってきた
- 10. Growthbeat TypeScript + Backbone+ Underscore template ロジックレスつらい
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36. 1. Virtual DOMの全更新 2. Virtual DOMの差分計算 3. DOMへの差分適用 ･･･は「DOMの全更新」より速い
- 37.
- 38. <!DOCTYPE html> <html> <head> <script src="build/react.js"></script> <scriptsrc="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>
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46. JSX is aJavaScript syntax extension that looks similar to XML.
- 47.
- 48. <!DOCTYPE html> <html> <head> <script src="build/react.js"></script> <scriptsrc="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>
- 49.
- 50.
- 51.
- 52. npm install -greact-tools JSX JavaScript react.js react-tools 実行
- 53.
- 54. <!DOCTYPE html> <html> <head> <script src="build/react.js"></script> <!--<scriptsrc="build/JSXTransformer.js"></ script>--> </head> <body> <div id="example"></div> <script src="build/helloworld.js"></script> </body> </html>
- 55.
- 56.
- 57.
- 58. var Hello =React.createClass({ render() { return ( <div>Hello {this.props.name}</div> ) } }); React.render( <Hello name="World" />, document.getElementById('example') );
- 59.
- 60.
- 61. var Hello =React.createClass({ render() { return ( <div>Hello {this.props.name}</div> ) } }); React.render( <Hello name="World" />, document.getElementById('example') );
- 62.
- 63. var Hello =React.createClass({ render() { return ( <div>Hello {this.props.name}</div> ) } }); React.render( <Hello name="World" />, document.getElementById('example') );
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 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> ) } });
- 75.
- 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.
- 83.
- 84.
- 85.