React first impressions

カルテット開発部社内勉強会 LT 資料

Transcript

1. React first impressions 2016.01.15 @qckanemoto 1 / 45
2. (1) What's that? 2 / 45
3. 3 / 45
4. 4 / 45
5. 5 / 45
6. A JavaScript Library for Building User Interfaces 6 / 45
7. 7 / 45
8. 8 / 45
9. 9 / 45
10. (2) Features? 10 / 45
11. 11 / 45
12. 12 / 45
13. 13 / 45
14. 14 / 45
15. 15 / 45
16. 16 / 45
17. 17 / 45
18. (3) Example 18 / 45
19. var Hello = React.createClass({ render: function () { return <p>Hello, React!</p>; } }); ReactDOM.render( <Hello />, document.getElementById('app') ); <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>React Example</title> <script src="//some/cdn/react.js"></script> <script src="//some/cdn/react-dom.js"></script> <script src="//some/cdn/babel-core/browser.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel" src="app.js"></script> </body> </html> 19 / 45
20. var Hello = React.createClass({ // It's called 'Component' render: function () { return <p>Hello, React!</p>; } }); ReactDOM.render( <Hello />, document.getElementById('app') ); <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>React Example</title> <script src="//some/cdn/react.js"></script> <script src="//some/cdn/react-dom.js"></script> <script src="//some/cdn/babel-core/browser.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel" src="app.js"></script> </body> </html> 20 / 45
21. var Hello = React.createClass({ render: function () { return <p>Hello, React!</p>; } }); ReactDOM.render( <Hello />, // Set the Component... document.getElementById('app') ); <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>React Example</title> <script src="//some/cdn/react.js"></script> <script src="//some/cdn/react-dom.js"></script> <script src="//some/cdn/babel-core/browser.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel" src="app.js"></script> </body> </html> 21 / 45
22. var Hello = React.createClass({ render: function () { return <p>Hello, React!</p>; } }); ReactDOM.render( <Hello />, // Set the Component document.getElementById('app') // to the element '#app' ); <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>React Example</title> <script src="//some/cdn/react.js"></script> <script src="//some/cdn/react-dom.js"></script> <script src="//some/cdn/babel-core/browser.min.js"></script> </head> <body> <div id="app"></div> <!-- Here --> <script type="text/babel" src="app.js"></script> </body> </html> 22 / 45
23. 23 / 45
24. Next step (2/5) 24 / 45
25. Use props var Hello = React.createClass({ render: function () { return <p>Hello, React!</p>; } }); var Hello = React.createClass({ render: function () { return <p>Hello, <World name="React props" />!</p>; } }); var World = React.createClass({ render: function () { return <span>{this.props.name}</span>; } }); 25 / 45
26. 26 / 45
27. props is that passed from parent. 27 / 45
28. Next step (3/5) 28 / 45
29. Use state var Hello = React.createClass({ render: function () { return <p>Hello, <World name="React props" />!</p>; } }); var Hello = React.createClass({ getInitialState: function () { return { worldName: 'React state' }; }, render: function () { return <p>Hello, <World name={this.state.worldName} />!</p>; } }); 29 / 45
30. 30 / 45
31. state is that held by itself. 31 / 45
32. Next step (4/5) 32 / 45
33. Change state var Hello = React.createClass({ getInitialState: function () { return { worldName: 'React state' }; }, + // just change state after 1 sec + componentDidMount: function () { + var that = this; + setTimeout(function () { + that.setState({ worldName: 'Changed state' }); + }, 1000); + }, render: function () { return <p>Hello, <World name={this.state.worldName} />!</p>; } }); 33 / 45
34. 34 / 45
35. 35 / 45
36. When state updated component re-rendere whole tree under itself. 36 / 45
37. Final step (5/5) 37 / 45
38. Make child stateful var World = React.createClass({ render: function () { return <span>{this.props.name}</span>; } }); var World = React.createClass({ getInitialState: function () { return { name: this.props.name }; }, render: function () { return <span>{this.state.name}</span>; } }); 38 / 45
39. 39 / 45
40. Not changed 40 / 45
41. props is immutable. state is mutable. 41 / 45
42. Conclusion 42 / 45
43. React is a JavaScript FW Component Oriented powered by One-way Reactive Data Flow Virtual DOM Immutable props & Mutable state 43 / 45
44. Also has Two-way Binding And It's Necessary for some complicated apps (I think) Similar to Angular2 ? 44 / 45
45. Thanks :) 45 / 45