React Shuhei Kagawa @M3 Tech Talk - 2014/1/20

What’s React? • ͷ OSS ͳ Web UI ϥΠϒϥϦ • JavaScript MVC Framework • ෳ਺ͷίϯϙʔωϯτΛ૊Έ߹Θͤͯ UI Λߏஙɻ

No content

Why React? • ࣮੷ɹFacebook, Instagram Ͱ࢖ΘΕ͍ͯΔɻClosure, jQuery ͱಉ౳ʹɺੈքͰ࠷΋ݫ͍͠ݱ৔Ͱ࢖ΘΕ͍ͯΔ JavaScript ϥ ΠϒϥϦɻAngular ͸ Google ͷओཁͳϓϩμΫτͰ࢖ΘΕͯ ͍ͳ͍ɻ • γϯϓϧɹ֮͑Δ͜ͱ͕গͳ͍ɻComponent ͚ͩɻAngular ͷ Controller, Model, Scope, Directive… • View ͚ͩɹطଘϓϩδΣΫτʹ૊ΈࠐΈ΍͍͢ɻFacebook Ͱ ΋ίϝϯτཝ͔Β࣮ઓ౤ೖɻInstagram Ͱ͸౰ॳ Backbone.js ͱͷ૊Έ߹ΘͤͰ࢖༻ɻ

Declarative • Α͋͘Δͷ͸ɺHTML Λ jQuery Ͱͪΐͪ͜ΐ͜ม ߋɻͩΜͩΜεύήοςΟʹɾɾɾɻ • React ͳΒɺαʔόαΠυͷΑ͏ʹςϯϓϨʔτ ʢͷΑ͏ͳ΋ͷʣΛॻ͚ͩ͘ͰɺσʔλͷมߋʹԠ ͯ͡ DOM Λॻ͖ม͑ͯ͘ΕΔɻ • ࣗ෼Ͱ͸ DOM ૢ࡞ෆཁʂ

Declarative? • var Counter = React.createClass({
 getInitialState: function () {
 return { count: this.props.initialCount };
 },
 add: function (diff) {
 this.setState({ count: this.state.count + diff });
 },
 render: function () {
 return (
 React.DOM.div(null, [
 React.DOM.button({ onClick: this.add.bind(this, -1)}, “-“),
 React.DOM.span(null, [“Count: “, this.state.count]),
 React.DOM.button({ onClick: this.add.bind(this, 1)}, “+“)
 ])
 );
 }
 });
 
 React.renderComponent(, document.body);

Declarative! • var Counter = React.createClass({
 getInitialState: function () {
 return { count: this.props.initialCount };
 },
 add: function (diff) {
 this.setState({ count: this.state.count + diff });
 },
 render: function () {
 return (
 
 );
 }
 });
 
 React.renderComponent(, document.body);

JSX • DeNA Ͱ࡞ͬͯΔ AltJS ͱ͸ผ෺ɻ • JavaScript ͷதʹ HTMLʢΆ͍΋ͷʣ͕ॻ͚Δʂ • return ; • ୯७ʹ JavaScript ʹม׵͞ΕΔɻߦ΋Ұॹɻ • return React.DOM.div(null, this.prop.name);

JSX • ࣄલʹ JavaScript ʹίϯύΠϧ͓ͯ͘͠ɻ • $ npm install -g react-tools
 $ jsx —watch src build • ϒϥ΢β্ͰίϯύΠϧ΋Մೳɻ • 
 
 
 /** @jsx React.DOM */
 React.renderComponent(
 <h1>Hello, world!</h1>,
 document.getElementById('example')
 );


Virtual DOM • DOM Λຖճॻ͖௚ͬͯ͢ɺແବͰ͸ʁը໘͕ͪΒͭ͘ͷͰ ͸ʁ • ͕͔͔࣌ؒΔͷ͸ DOM ૢ࡞ɻJavaScript ͦͷ΋ͷ͸଎͍ʂ • JavaScript ্Ͱ Virtual DOM ΛߏஙɻVirtual DOM ಉ࢜Ͱࠩ ෼Λͱͬͯɺ࣮ࡍͷ DOM ૢ࡞Λ࠷খݶʹ཈͑Δɻ • DOM πϦʔͷൺֱͬͯɺύϑΥʔϚϯεग़ΔͷʁώϡʔϦ εςΟΫεʹΑΓ O(n^3) ͔Β O(n) ʹɻ

Component • ೋछྨͷσʔλͰ UI Λඳըɻ • props: ֎͔Β౉͞ΕΔ஋ • state: ಺ଆͰอ࣋ɾมߋ͢Δ஋ • render() Ͱ͸্هͷೋछྨͷ஋Λ࢖ͬͯɺVirtual DOM Λߏங͢Δɻ • ௨ৗ͸ props ͷมߋ·ͨ͸ setState() ͷݺͼग़࣌͠ͷΈɺද͕ࣔߋ৽͞ΕΔɻ • ௨ৗ͸ඞཁͳ͍͕ɺखಈͰදࣔΛߋ৽͢Δ͜ͱ΋ՄೳɻforceUpdate() • ֎෦ͱͷΠϯλʔϑΣΠε͸ props ͚ͩɻ

Composition • render() Ͱผͷ component Λࢠͱͯ࣋ͭ͜͠ͱ͕Ͱ͖Δɻ • ਌͔ΒࢠͷϝιουΛݺΜͩΓ͸͠ͳ͍ɻͨͩ props Λ౉͚ͩ͢ɻ • • render: function () {
 return (
 
 );
 } • ਌͔ΒσʔλΛྲྀ͠ࠐΉͱɺ຤୺·Ͱσʔλ͕ߦ͖౉Δɻ

Demo https://github.com/shuhei/react-sample-counter

·ͱΊ • Facebook, Instagram Ͱͷ࣮ઓͰ஁͑ΒΕ͍ͯΔɻ • View ͷݟ௨͕͠ྑ͘ͳΔɻrender() ݟΕ͹શͯ෼ ͔Δɻ • Virtual DOM Ͱ DOM ૢ࡞͍Βͣɻ • ࠶ར༻ੑͷߴ͍ ComponentɻJS ͱςϯϓϨʔτ͕ ෼͔Ε͍ͯͳ͍ͷͰɺऔΓճ͠΍͍͢ɻ

ඍົͳͱ͜Ζ • render Ͱฦ͢΋ͷɺҰͭͰͳ͍ͱ͍͚ͳ͍ɻෳ਺ ͷཁૉΛฦ͢৔߹͸ Ͱғ͏ɻ • Bootstrap Έ͍ͨʹΫϥε໊ͨ͘͞Μ͚ͭΔͷΛ JSX Ͱ΍Δͷ͸ඍົɻJSX தʹ͸ Bootstrap ͷΫϥ ε໊͸͚ͭͣɺSass ͷ @extend ͳΜ͔ͰελΠϦ ϯά͢Δͱྑͦ͞͏ɻ

Q&A • ϞόΠϧͰ΋࢖͑Δͷ͔ʁಛʹ੍໿͸ͳ͍͸ͣɻ • ରԠϒϥ΢β͸ʁIE8- αϙʔτɻJS ্Ͱ͍Ζ͍Ζ΍ΔͷͰɻDOM Λ൒෼͘Β͍࣮૷͠௚ͯ͠Δײ͡ɻ • ϝϞϦͷফඅ͕େ͖͍ͷͰ͸ʁVirtual DOM ͸ൺֱత͍ܰ͸ͣɻ2 ͭϖʔδΛ։͘ΑΓ͸அવ͍ܰɻ • Facebook ͷ OSS ͸αϙʔτѱ͍ͱฉ͕͘ʁࠓͷͱ͜Ζɺ͔ͳΓ׆ൃɻ • ྑ͍αϯϓϧ͸ʁ͋·Γ஌Βͳ͍ɻFacebook ΍ Instagram ͷιʔεΛ௥ͬͯΈΔͷ΋͍͍͔΋ɻ͋ ͱɺࢥ͍ͭٙ͘໰͸υΩϡϝϯτʹ͍͍ͨͯॻ͍ͯ͋Δɻ • 1.0 ·ͰͷϩʔυϚοϓ͸ʁΘ͔Βͳ͍ɻ! • JSX Ͱ className ͱ͔͚͋ͬͨͲɺHTML ͱ͸ҧ͏ʁJS ʹͳΔͷͰɺ༧໿ޠɻHTML ͦͷ΋ͷͰ͸ ͳ͍ɻΫϩεϒϥ΢βͳཧ૝తͳ DOMɻ • JSX ίϯύΠϧͷιʔεϚοϓରԠ͸ʁ·ͩɻPull Request ͸དྷͯΔ͕·ͩϚʔδ͞Εͯͳ͍ɻ
 https://github.com/facebook/react/pull/833

References • ެࣜαΠτ - ؾʹͳΔͱ͜ΖΛઌճΓͯ͠ॻ͍ͯ͘Ε͍ͯΔɻ
 http://facebook.github.io/react/index.html • Github
 https://github.com/facebook/react • Rethinking best practices - ίϯηϓτ͕த৺ͷߨԋɻ
 http://www.youtube.com/watch?v=x7cQ3mrcKaY • Introduction to React - ࣮૷دΓͷࡉ͔͍࿩ɻ
 http://www.youtube.com/watch?v=XxVg_s8xAms • Khan Academy Ͱͷࣄྫ
 http://www.quora.com/React-JS-Library/How-is-Facebooks-React-JavaScript- library/answer/Ben-Alpert