Introduction to React

Transcript

1. 1.

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

2. 2.

   What’s React? • ͷ OSS ͳ Web UI ϥΠϒϥϦ •

   JavaScript MVC Framework • ෳ਺ͷίϯϙʔωϯτΛ૊Έ߹Θͤͯ UI Λߏஙɻ
3. 3.

   None
4. 4.

   Why React? • ࣮੷ɹFacebook, Instagram Ͱ࢖ΘΕ͍ͯΔɻClosure, jQuery ͱಉ౳ʹɺੈքͰ࠷΋ݫ͍͠ݱ৔Ͱ࢖ΘΕ͍ͯΔ JavaScript ϥ

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

   Declarative • Α͋͘Δͷ͸ɺHTML Λ jQuery Ͱͪΐͪ͜ΐ͜ม ߋɻͩΜͩΜεύήοςΟʹɾɾɾɻ • React ͳΒɺαʔόαΠυͷΑ͏ʹςϯϓϨʔτ

   ʢͷΑ͏ͳ΋ͷʣΛॻ͚ͩ͘ͰɺσʔλͷมߋʹԠ ͯ͡ DOM Λॻ͖ม͑ͯ͘ΕΔɻ • ࣗ෼Ͱ͸ DOM ૢ࡞ෆཁʂ
6. 6.

   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(<Counter initialCount={100}>, document.body);
7. 7.

   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 (
 <div>
 <button onClick={this.add.bind(this, -1)}>-</button>
 <span>Count: {this.state.count}</span>
 <button onClick={this.add.bind(this, 1)}>+</button>
 </div>
 );
 }
 });
 
 React.renderComponent(<Counter initialCount={100}>, document.body);
8. 8.

   JSX • DeNA Ͱ࡞ͬͯΔ AltJS ͱ͸ผ෺ɻ • JavaScript ͷதʹ HTMLʢΆ͍΋ͷʣ͕ॻ͚Δʂ

   • return <div>{this.prop.name}</div>; • ୯७ʹ JavaScript ʹม׵͞ΕΔɻߦ΋Ұॹɻ • return React.DOM.div(null, this.prop.name);
9. 9.

   JSX • ࣄલʹ JavaScript ʹίϯύΠϧ͓ͯ͘͠ɻ • $ npm install -g

   react-tools
 $ jsx —watch src build • ϒϥ΢β্ͰίϯύΠϧ΋Մೳɻ • <script src="build/react.js"></script>
 <script src="build/JSXTransformer.js"></script>
 <script type="text/jsx">
 /** @jsx React.DOM */
 React.renderComponent(
 <h1>Hello, world!</h1>,
 document.getElementById('example')
 );
 </script>
10. 10.

    Virtual DOM • DOM Λຖճॻ͖௚ͬͯ͢ɺແବͰ͸ʁը໘͕ͪΒͭ͘ͷͰ ͸ʁ • ͕͔͔࣌ؒΔͷ͸ DOM ૢ࡞ɻJavaScript

    ͦͷ΋ͷ͸଎͍ʂ • JavaScript ্Ͱ Virtual DOM ΛߏஙɻVirtual DOM ಉ࢜Ͱࠩ ෼Λͱͬͯɺ࣮ࡍͷ DOM ૢ࡞Λ࠷খݶʹ཈͑Δɻ • DOM πϦʔͷൺֱͬͯɺύϑΥʔϚϯεग़ΔͷʁώϡʔϦ εςΟΫεʹΑΓ O(n^3) ͔Β O(n) ʹɻ
11. 11.

    Component • ೋछྨͷσʔλͰ UI Λඳըɻ • props: ֎͔Β౉͞ΕΔ஋ • state:

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

    Composition • render() Ͱผͷ component Λࢠͱͯ࣋ͭ͜͠ͱ͕Ͱ͖Δɻ • ਌͔ΒࢠͷϝιουΛݺΜͩΓ͸͠ͳ͍ɻͨͩ props Λ౉͚ͩ͢ɻ

    • <Parent name=“Oyataro” age={49} /> • render: function () {
 return (
 <div>
 <Child name=“Taro” age={this.props.age - 25} />
 <Child name=“Jiro” age={this.props.age - 30} />
 </div>
 );
 } • ਌͔ΒσʔλΛྲྀ͠ࠐΉͱɺ຤୺·Ͱσʔλ͕ߦ͖౉Δɻ
13. 13.

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

14. 14.

    ·ͱΊ • Facebook, Instagram Ͱͷ࣮ઓͰ஁͑ΒΕ͍ͯΔɻ • View ͷݟ௨͕͠ྑ͘ͳΔɻrender() ݟΕ͹શͯ෼ ͔Δɻ

    • Virtual DOM Ͱ DOM ૢ࡞͍Βͣɻ • ࠶ར༻ੑͷߴ͍ ComponentɻJS ͱςϯϓϨʔτ͕ ෼͔Ε͍ͯͳ͍ͷͰɺऔΓճ͠΍͍͢ɻ
15. 15.

    ඍົͳͱ͜Ζ • render Ͱฦ͢΋ͷɺҰͭͰͳ͍ͱ͍͚ͳ͍ɻෳ਺ ͷཁૉΛฦ͢৔߹͸ <div /> Ͱғ͏ɻ • Bootstrap

    Έ͍ͨʹΫϥε໊ͨ͘͞Μ͚ͭΔͷΛ JSX Ͱ΍Δͷ͸ඍົɻJSX தʹ͸ Bootstrap ͷΫϥ ε໊͸͚ͭͣɺSass ͷ @extend ͳΜ͔ͰελΠϦ ϯά͢Δͱྑͦ͞͏ɻ
16. 16.

    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
17. 17.

    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