Introduction To React

Transcript

1. Introduction To React
   Frontrend 2015.02.21
   #frontrendJS
   

   View Slide

2. @hokaccha
   

   View Slide

3. View Slide

4. 1. React.js
   2. Virtual DOM
   3. JSX
   4. Server Side Rendering
   5. Flux
   6. Flow
   

   View Slide

5. React.js
   

   View Slide

6. A JavaScript library for
   building user interfaces
   

   View Slide

7. ࠾༻ࣄྫ
   • Facebook
   • Instagram
   • Yahoo
   • Atom Editor
   • Flipboard
   

   View Slide

8. React.jsͷಛ௃
   • εςʔτϨεͳίϯϙʔωϯτઃܭ
   • Virtual DOMͷ࠾༻
   • JSXγϯλοΫε
   

   View Slide

9. View Slide

10. jQuery
    

    View Slide

11. // Submit͞ΕͨΒ
    $('form').on('submit', functino() {
    // ཁૉ࡞ͬͯ
    var $li = $('');
    // ...
    // Ϧετʹ௥Ճ
    $('ul').append($li);
    });
    

    View Slide

12. • ঢ়ଶ͕DOMʹ͔͠ͳ͍
    • ֦ுͮ͠Β͍
    • ؅ཧͮ͠Β͍
    • ςετͮ͠Β͍
    

    View Slide

13. Backbone
    

    View Slide

14. • View͸ίϯϙʔωϯτΛ෼͚ͯ
    • σʔλ΍ϩδοΫ͸Modelʹ࣋ͱ͏
    

    View Slide

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);
    }
    });
    

    View Slide

16. • มߋͷద༻ΛखͰॻͭ͘Β͞
    • Πϕϯτ஍ࠈ
    

    View Slide

17. AngularɺVue
    

    View Slide

18. • දࣔ͸શͯViewModelʹ΋ͱʹߏங͠Α͏
    • σʔλ͕มΘͬͨΒউखʹදࣔ΋มΘΕ
    • UI͕มΘͬͨΒσʔλ΋উखʹมΘΕ
    

    View Slide

19. 
    
    
    
    
    {{item.text}}
    
    
    // Controller
    $scope.onSubmit = function() {
    // σʔλΛߋ৽ͨ͠ΒউखʹView͕มΘΔ
    $scope.list.push(newItem);
    };
    

    View Slide

20. • ίϯϙʔωϯτ͝ͱʹঢ়ଶΛ࣋ͭͭΒ͞
    • ΞϓϦέʔγϣϯ͕ෳࡶʹͳΔͱͱͭΒ͍
    

    View Slide

21. React
    

    View Slide

22. • σʔλ͕มΘͬͨΒউखʹදࣔ΋มΘΕ
    • ίϯϙʔωϯτʹঢ়ଶΛ࣋ͨͤͳ͍
    • ඳըʹඞཁͳσʔλ͸਌͔Β΋Β͏
    

    View Slide

23. var Form = React.createClass({
    onSubmit: function() {
    // ਌ʹσʔλͷߋ৽Λ௨஌
    },
    render: function() {
    return ...;
    }
    });
    var List = React.createClass({
    render: function() {
    // ਌͔Β΋ΒͬͨσʔλΛݩʹߏங͢Δ͚ͩ
    return {this.props.list.map(...);
    }
    });
    

    View Slide

24. Stateless Component
    

    View Slide

25. • Testable
    • Maintainable
    • Reusable
    

    View Slide

26. 4UBUFGVMM
    4UBUFMFTT
    

    View Slide

27. ϢʔβʔΞΫγϣϯ
    

    View Slide

28. ߋ৽
    

    View Slide

29. ࢠʹมߋΛ൓ө
    

    View Slide

30. 1. σʔλΛݩʹViewΛߏங
    2. ϢʔβʔͷΞΫγϣϯ
    3. ·ΔͬͱσʔλΛߋ৽ͯ͠ViewΛ࠶ߏங
    

    View Slide

31. αʔόʔαΠυͱಉ͡Ͱ͢Ͷ
    

    View Slide

32. ଎౓ͱͷδϨϯϚ
    

    View Slide

33. Virtual DOM
    

    View Slide

34. • JavaScriptͷΦϒδΣΫτͱͯ͠DOMͷΑ͏
    ͳߏ଄Λ࣋ͭ
    • σʔλʹมߋ͕͋ΔͱͲͷ෦෼Λมߋ͠ͳ͍
    ͱ͍͚ͳ͍͔Λܭࢉ
    • ඞཁͳ෦෼͚࣮ͩࡍͷDOMʹద༻͢Δ
    

    View Slide

35. View Slide

36. ঢ়ଶมߋ
    

    View Slide

37. ࣮ࡍͷ%0.΁ͷมߋ͸͸͚ͩ͜͜
    

    View Slide

38. var MyComponent = React.createClass({
    render: function() {
    return React.createElement("div", {className: "foo"},
    React.createElement("div", {className: "bar"},
    "Hello ", this.props.name
    )
    );
    });
    

    View Slide

39. React.js͸଎͍ΜͰ͠ΐʁ
    

    View Slide

40. ͲΕ͕଎͍ʁ
    1. σʔλͷมߋˠߋ৽෼͚ͩDOMʹ൓ө
    2. σʔλͷมߋˠDOMπϦʔ·Δ͝ͱߋ৽
    3. σʔλͷมߋˠࠩ෼ܭࢉˠߋ৽෼͚ͩDOMʹ൓ө
    

    View Slide

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. ඞཁͳ෦෼͚ͩ࠶ඳը
    

    View Slide

42. ϢʔβʔΞΫγϣϯ
    

    View Slide

43. ߋ৽
    

    View Slide

44. var ListView = Backbone.View.extend({
    initialize: function() {
    this.collection
    .on('add change destroy', this.render);
    },
    render: function() {
    // ࠶ඳը
    }
    });
    2. σʔλ͕มΘͬͨΒશ෦࠶ඳը
    

    View Slide

45. ϢʔβʔΞΫγϣϯ
    

    View Slide

46. ߋ৽
    

    View Slide

47. πϦʔΛ࠶ߏங
    

    View Slide

48. 3. ࠩ෼ܭࢉͯ͠ඳը
    var App = React.createClass({
    handleChange: function() {
    this.setState({ list: getNewList() });
    },
    render: function() {
    return (
    
    
    
    
    );
    }
    });
    

    View Slide

49. ϢʔβʔΞΫγϣϯ
    

    View Slide

50. ߋ৽
    

    View Slide

51. ࣮ࡍͷ%0.΁ͷมߋ͸͸͚ͩ͜͜
    

    View Slide

52. ࣮ߦ࣌ؒʢNTʣ
    
    
    
    
    
    #BDLCPOF

    ෦෼త࠶ඳը
    
    #BDLCPOF

    શͯ࠶ඳը
    
    3FBDU
    
    
    
    TODO MVC
    IUUQIPLBDDIBHJUIVCJPUPEPNWDQFSGDPNQBSJTPO
    

    View Slide

53. React͸ઃܭͱ଎౓͕
    ཱ྆Ͱ͖Δ
    

    View Slide

54. ͦͷଞͷVirtual DOM࣮૷
    • Matt-Esch/virtual-dom
    • segmentio/deku
    

    View Slide

55. JSX
    

    View Slide

56. React.createElement("div", {className: "foo"},
    React.createElement("div", {className: "bar"},
    "Hello ", this.props.name
    )
    )
    
    
    Hello {this.props.name}
    
    
    

    View Slide

57. var Box = React.createClass({
    render: function() {
    return (
    
    
    Hello {this.props.name}
    
    
    );
    }
    });
    

    View Slide

58. ଞͷίϯϙʔωϯτΛར༻Մೳ
    var Foo = React.createClass({
    ...
    });
    var Bar = React.createClass({
    render: function() {
    return ;
    }
    });
    

    View Slide

59. ଐੑͰpropsΛ౉ͤΔ
    var Foo = React.createClass({
    render: function() {
    return {this.props.text};
    }
    });
    var Bar = React.createClass({
    render: function() {
    return ;
    }
    });
    

    View Slide

60. ม׵πʔϧ
    • react-toolsʢjsxίϚϯυʣ
    • babelʢچ6to5ʣ
    

    View Slide

61. ࣮ࡍͲ͏ͳͷʁ
    

    View Slide

62. View Slide

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

    View Slide

64. Server Side Rendering
    

    View Slide

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

    View Slide

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

    View Slide

67. View Slide

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

    View Slide

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

    View Slide

70. View Slide

71. Rendr → React
    

    View Slide

72. Server Side Rendering
    with React
    

    View Slide

73. // components/app.js
    React.createClass({
    render() {
    return (
    
    
    
    
    
    );
    }
    });
    

    View Slide

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 });
    });
    

    View Slide

75. // client side
    var App = require('./components/app');
    React.render(, el);
    

    View Slide

76. αʔόʔ/ΫϥΠΞϯτ
    ͰίʔυΛڞ௨ԽͰ͖Δ
    

    View Slide

77. View Slide

78. Flux
    

    View Slide

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

    View Slide

80. IUUQGBDFCPPLHJUIVCJPqVYEPDTPWFSWJFXIUNM
    

    View Slide

81. IUUQGBDFCPPLHJUIVCJPqVYEPDTPWFSWJFXIUNM
    

    View Slide

82. View Slide

83. View Slide

84. ߟ͑ํͳͷͰ࣮૷͸༷ʑ
    

    View Slide

85. ୅දతͳFlux࣮૷
    • facebook/flux
    • spoike/refluxjs
    • BinaryMuse/fluxxor
    

    View Slide

86. Flow
    

    View Slide

87. Flow is a static type checker, designed to
    find type errors in JavaScript programs
    

    View Slide

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
    

    View Slide

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
    

    View Slide

90. JSXͷαϙʔτ
    /* @flow */
    var App = React.createClass({
    render: function() {
    return foo;
    },
    });
    

    View Slide

91. JSXͷαϙʔτ
    /* @flow */
    var App = React.createClass({
    render: function() {
    return 'foo'; // => Error!
    },
    });
    

    View Slide

92. propTypesͷαϙʔτ
    /* @flow */
    var Foo = React.createClass({
    propTypes: {
    text: React.PropTypes.string
    }
    });
    var Bar = React.createClass({
    render: function() {
    return ;
    }
    });
    

    View Slide

93. ίϯύΠϧ
    

    View Slide

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;
    }
    

    View Slide

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;
    }
    

    View Slide

96. ·ͱΊ
    

    View Slide

97. React
    Flux
    Flow
    

    View Slide

98. Scalable
    

    View Slide

99. খن໛ͳ΋ͷΛૉૣ͘
    ࡞ΔͨΊͷπʔϧͰ͸ͳ͍
    

    View Slide

100. ٕज़બ୒͸ద੾ʹ
     

     View Slide

101. ࠓ೔ͷ࿩ͰڵຯΛ࣋ͬͨํ͸
     

     View Slide

102. View Slide

103. Thanks!
     

     View Slide