$30 off During Our Annual Pro Sale. View Details »

Introduction To React

Introduction To React

Kazuhito Hokamura

February 21, 2015
Tweet

More Decks by Kazuhito Hokamura

Other Decks in Programming

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