Introduction To React

Transcript

1. Introduction To React Frontrend 2015.02.21 #frontrendJS
2. @hokaccha
4. 1. React.js 2. Virtual DOM 3. JSX 4. Server Side Rendering 5. Flux 6. Flow
5. React.js
6. A JavaScript library for building user interfaces
7. ࠾༻ࣄྫ • Facebook • Instagram • Yahoo • Atom Editor • Flipboard
8. React.jsͷಛ௃ • εςʔτϨεͳίϯϙʔωϯτઃܭ • Virtual DOMͷ࠾༻ • JSXγϯλοΫε
10. jQuery
11. // Submit͞ΕͨΒ $('form').on('submit', functino() { // ཁૉ࡞ͬͯ var $li = $('<li>'); // ... // Ϧετʹ௥Ճ $('ul').append($li); });
12. • ঢ়ଶ͕DOMʹ͔͠ͳ͍ • ֦ுͮ͠Β͍ • ؅ཧͮ͠Β͍ • ςετͮ͠Β͍
13. Backbone
14. • View͸ίϯϙʔωϯτΛ෼͚ͯ • σʔλ΍ϩδοΫ͸Modelʹ࣋ͱ͏
15. var FormView = Backbone.View.extend({ onSubmit: function() { // dataΛ࡞ͬͯϞσϧʹ௥Ճ͢Δ͚ͩ this.collection.add(data) } }); var ListView = Backbone.View.extend({ initialize: function() { // Ϟσϧ͕ߋ৽͞ΕͨΒϦετΛߋ৽ this.collection.on('add', this.render); } });
16. • มߋͷద༻ΛखͰॻͭ͘Β͞ • Πϕϯτ஍ࠈ
17. AngularɺVue
18. • දࣔ͸શͯViewModelʹ΋ͱʹߏங͠Α͏ • σʔλ͕มΘͬͨΒউखʹදࣔ΋มΘΕ • UI͕มΘͬͨΒσʔλ΋উखʹมΘΕ
19. <form ng-submit="onSubmit()"> <input type="text" ng-model="text"> </form> <ul> <li ng-repeat="item in list"> {{item.text}} </li> </ul> // Controller $scope.onSubmit = function() { // σʔλΛߋ৽ͨ͠ΒউखʹView͕มΘΔ $scope.list.push(newItem); };
20. • ίϯϙʔωϯτ͝ͱʹঢ়ଶΛ࣋ͭͭΒ͞ • ΞϓϦέʔγϣϯ͕ෳࡶʹͳΔͱͱͭΒ͍
21. React
22. • σʔλ͕มΘͬͨΒউखʹදࣔ΋มΘΕ • ίϯϙʔωϯτʹঢ়ଶΛ࣋ͨͤͳ͍ • ඳըʹඞཁͳσʔλ͸਌͔Β΋Β͏
23. var Form = React.createClass({ onSubmit: function() { // ਌ʹσʔλͷߋ৽Λ௨஌ }, render: function() { return <form onSubmit={this.onSubmit}>...</form>; } }); var List = React.createClass({ render: function() { // ਌͔Β΋ΒͬͨσʔλΛݩʹߏங͢Δ͚ͩ return <ul>{this.props.list.map(...)</ul>; } });
24. Stateless Component
25. • Testable • Maintainable • Reusable
26. 4UBUFGVMM 4UBUFMFTT
27. ϢʔβʔΞΫγϣϯ
28. ߋ৽
29. ࢠʹมߋΛ൓ө
30. 1. σʔλΛݩʹViewΛߏங 2. ϢʔβʔͷΞΫγϣϯ 3. ·ΔͬͱσʔλΛߋ৽ͯ͠ViewΛ࠶ߏங
31. αʔόʔαΠυͱಉ͡Ͱ͢Ͷ
32. ଎౓ͱͷδϨϯϚ
33. Virtual DOM
34. • JavaScriptͷΦϒδΣΫτͱͯ͠DOMͷΑ͏ ͳߏ଄Λ࣋ͭ • σʔλʹมߋ͕͋ΔͱͲͷ෦෼Λมߋ͠ͳ͍ ͱ͍͚ͳ͍͔Λܭࢉ • ඞཁͳ෦෼͚࣮ͩࡍͷDOMʹద༻͢Δ
36. ঢ়ଶมߋ
37. ࣮ࡍͷ%0.΁ͷมߋ͸͸͚ͩ͜͜
38. var MyComponent = React.createClass({ render: function() { return React.createElement("div", {className: "foo"}, React.createElement("div", {className: "bar"}, "Hello ", this.props.name ) ); });
39. React.js͸଎͍ΜͰ͠ΐʁ
40. ͲΕ͕଎͍ʁ 1. σʔλͷมߋˠߋ৽෼͚ͩDOMʹ൓ө 2. σʔλͷมߋˠDOMπϦʔ·Δ͝ͱߋ৽ 3. σʔλͷมߋˠࠩ෼ܭࢉˠߋ৽෼͚ͩDOMʹ൓ө
41. var ListView = Backbone.View.extend({ initialize: function() { this.collection.on('add', this.onAdd); this.collection.on('change', this.onChange); this.collection.on('destroy', this.onRemove); }, onAdd: function() { /* ௥Ճͷॲཧ */ }, onChange: function() { /* มߋͷॲཧ */ }, onDestroy: function() { /* ࡟আͷॲཧ */ } }); 1. ඞཁͳ෦෼͚ͩ࠶ඳը
42. ϢʔβʔΞΫγϣϯ
43. ߋ৽
44. var ListView = Backbone.View.extend({ initialize: function() { this.collection .on('add change destroy', this.render); }, render: function() { // ࠶ඳը } }); 2. σʔλ͕มΘͬͨΒશ෦࠶ඳը
45. ϢʔβʔΞΫγϣϯ
46. ߋ৽
47. πϦʔΛ࠶ߏங
48. 3. ࠩ෼ܭࢉͯ͠ඳը var App = React.createClass({ handleChange: function() { this.setState({ list: getNewList() }); }, render: function() { return ( <div className="app"> <Form /> <List list={this.state.list} /> </div> ); } });
49. ϢʔβʔΞΫγϣϯ
50. ߋ৽
51. ࣮ࡍͷ%0.΁ͷมߋ͸͸͚ͩ͜͜
52. ࣮ߦ࣌ؒʢNTʣ      #BDLCPOF
 ෦෼త࠶ඳը #BDLCPOF
 શͯ࠶ඳը 3FBDU      TODO MVC IUUQIPLBDDIBHJUIVCJPUPEPNWDQFSGDPNQBSJTPO
53. React͸ઃܭͱ଎౓͕ ཱ྆Ͱ͖Δ
54. ͦͷଞͷVirtual DOM࣮૷ • Matt-Esch/virtual-dom • segmentio/deku
55. JSX
56. React.createElement("div", {className: "foo"}, React.createElement("div", {className: "bar"}, "Hello ", this.props.name ) ) <div className="foo"> <div className="bar"> Hello {this.props.name} </div> </div>
57. var Box = React.createClass({ render: function() { return ( <div className="foo"> <div className="bar"> Hello {this.props.name} </div> </div> ); } });
58. ଞͷίϯϙʔωϯτΛར༻Մೳ var Foo = React.createClass({ ... }); var Bar = React.createClass({ render: function() { return <div><Foo /></div>; } });
59. ଐੑͰpropsΛ౉ͤΔ var Foo = React.createClass({ render: function() { return <div>{this.props.text}</div>; } }); var Bar = React.createClass({ render: function() { return <div><Foo text="foo" /></div>; } });
60. ม׵πʔϧ • react-toolsʢjsxίϚϯυʣ • babelʢچ6to5ʣ
61. ࣮ࡍͲ͏ͳͷʁ
63. • ES6΋Ұॹʹม׵͢ΔͷͰม׵ίετ͸ͳ͍ • ΤσΟλͷઃఆ͢Ε͹Ըܙड͚ΒΕΔ • ݁ہ޷Έ
64. Server Side Rendering
65. ϑϩϯτΤϯυΞϓϦͷ໰୊
66. JSΛղऍͰ͖ͳ͍ Ϛγϯ͔ΒಡΊͳ͍
68. ॳظද͚ࣔͩαʔόʔͰ΍Δ
69. ΫϥΠΞϯτͱαʔόͰ ίʔυ͕ॏෳ͢Δ໰୊
71. Rendr → React
72. Server Side Rendering with React
73. // components/app.js React.createClass({ render() { return ( <div> <Header {this.props.data} /> <Main {this.props.data} /> <Footer {this.props.data} /> </div> ); } });
74. // server side var React = require('react'); var App = require('./components/app'); app.get('/', function(req, res) { var html = React.renderToString( React.createElement(App, { data: data }) ); res.render({ html: html }); });
75. // client side var App = require('./components/app'); React.render(<App data={data} />, el);
76. αʔόʔ/ΫϥΠΞϯτ ͰίʔυΛڞ௨ԽͰ͖Δ
78. Flux
79. Fluxͱ͸ͳʹ͔ • ઃܭख๏ͷͻͱͭ • MVCΈ͍ͨͳ΋ͷ • σʔλͷྲྀΕ͕Ұํ௨ߦ
80. IUUQGBDFCPPLHJUIVCJPqVYEPDTPWFSWJFXIUNM
81. IUUQGBDFCPPLHJUIVCJPqVYEPDTPWFSWJFXIUNM
84. ߟ͑ํͳͷͰ࣮૷͸༷ʑ
85. ୅දతͳFlux࣮૷ • facebook/flux • spoike/refluxjs • BinaryMuse/fluxxor
86. Flow
87. Flow is a static type checker, designed to find type errors in JavaScript programs
88. /* @flow */ function foo(x: number, y: number): number { return x * y; } foo('foo', 2); $ flow check /Users/hokamura/flow/foo.js:5:5,9: string This type is incompatible with /Users/hokamura/flow/foo.js:2:17,22: number Found 1 error
89. /* @flow */ function foo(x, y) { return x * y; } foo('foo', 2); $ flow check /Users/hokamura/flow/foo.js:5:5,9: string This type is incompatible with /Users/hokamura/flow/foo.js:3:10,14: number Found 1 error
90. JSXͷαϙʔτ /* @flow */ var App = React.createClass({ render: function() { return <div className="foo">foo</div>; }, });
91. JSXͷαϙʔτ /* @flow */ var App = React.createClass({ render: function() { return 'foo'; // => Error! }, });
92. propTypesͷαϙʔτ /* @flow */ var Foo = React.createClass({ propTypes: { text: React.PropTypes.string } }); var Bar = React.createClass({ render: function() { return <Foo text={2} />; } });
93. ίϯύΠϧ
94. $ jsx --strip-types foo.js /* @flow */ function foo(x , y ) { return x * y; } /* @flow */ function foo(x:number, y:number) :number { return x * y; }
95. $ babel foo.js "use strict"; /* @flow */ function foo(x, y) { return x * y; } /* @flow */ function foo(x:number, y:number) :number { return x * y; }
96. ·ͱΊ
97. React Flux Flow
98. Scalable
99. খن໛ͳ΋ͷΛૉૣ͘ ࡞ΔͨΊͷπʔϧͰ͸ͳ͍
100. ٕज़બ୒͸ద੾ʹ
101. ࠓ೔ͷ࿩ͰڵຯΛ࣋ͬͨํ͸
103. Thanks!