Introduction To React

Introduction To React

18b12f8f7910445b2637f0f21f59d467?s=128

Kazuhito Hokamura

February 21, 2015
Tweet

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!