Introduction To React

Kazuhito Hokamura

February 21, 2015

Tweet Share

Transcript

1. Introduction To React Frontrend 2015.02.21 #frontrendJS

2. @hokaccha

3. None

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γϯλοΫε

9. None

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ʹద༻͢Δ

35. None

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. ࣮ࡍͲ͏ͳͷʁ

62. None

63. • ES6΋Ұॹʹม׵͢ΔͷͰม׵ίετ͸ͳ͍ • ΤσΟλͷઃఆ͢Ε͹Ըܙड͚ΒΕΔ • ݁ہ޷Έ

64. Server Side Rendering

65. ϑϩϯτΤϯυΞϓϦͷ໰୊

66. JSΛղऍͰ͖ͳ͍ Ϛγϯ͔ΒಡΊͳ͍

67. None

68. ॳظද͚ࣔͩαʔόʔͰ΍Δ

69. ΫϥΠΞϯτͱαʔόͰ ίʔυ͕ॏෳ͢Δ໰୊

70. None

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. αʔόʔ/ΫϥΠΞϯτ ͰίʔυΛڞ௨ԽͰ͖Δ

77. None

78. Flux

79. Fluxͱ͸ͳʹ͔ • ઃܭख๏ͷͻͱͭ • MVCΈ͍ͨͳ΋ͷ • σʔλͷྲྀΕ͕Ұํ௨ߦ

80. IUUQGBDFCPPLHJUIVCJPqVYEPDTPWFSWJFXIUNM

81. IUUQGBDFCPPLHJUIVCJPqVYEPDTPWFSWJFXIUNM

82. None
83. None

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. ࠓ೔ͷ࿩ͰڵຯΛ࣋ͬͨํ͸

102. None

103. Thanks!