Introduction to React

Facebook/Instagram の OSS UI ライブラリである React の紹介です。2014/1/20 に行われた M3 Tech Talk #17 で発表しました。

Transcript

1. React Shuhei Kagawa @M3 Tech Talk - 2014/1/20
2. What’s React? • ͷ OSS ͳ Web UI ϥΠϒϥϦ • JavaScript MVC Framework • ෳ਺ͷίϯϙʔωϯτΛ૊Έ߹Θͤͯ UI Λߏஙɻ
4. Why React? • ࣮੷ɹFacebook, Instagram Ͱ࢖ΘΕ͍ͯΔɻClosure, jQuery ͱಉ౳ʹɺੈքͰ࠷΋ݫ͍͠ݱ৔Ͱ࢖ΘΕ͍ͯΔ JavaScript ϥ ΠϒϥϦɻAngular ͸ Google ͷओཁͳϓϩμΫτͰ࢖ΘΕͯ ͍ͳ͍ɻ • γϯϓϧɹ֮͑Δ͜ͱ͕গͳ͍ɻComponent ͚ͩɻAngular ͷ Controller, Model, Scope, Directive… • View ͚ͩɹطଘϓϩδΣΫτʹ૊ΈࠐΈ΍͍͢ɻFacebook Ͱ ΋ίϝϯτཝ͔Β࣮ઓ౤ೖɻInstagram Ͱ͸౰ॳ Backbone.js ͱͷ૊Έ߹ΘͤͰ࢖༻ɻ
5. Declarative • Α͋͘Δͷ͸ɺHTML Λ jQuery Ͱͪΐͪ͜ΐ͜ม ߋɻͩΜͩΜεύήοςΟʹɾɾɾɻ • React ͳΒɺαʔόαΠυͷΑ͏ʹςϯϓϨʔτ ʢͷΑ͏ͳ΋ͷʣΛॻ͚ͩ͘ͰɺσʔλͷมߋʹԠ ͯ͡ DOM Λॻ͖ม͑ͯ͘ΕΔɻ • ࣗ෼Ͱ͸ DOM ૢ࡞ෆཁʂ
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. 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. JSX • DeNA Ͱ࡞ͬͯΔ AltJS ͱ͸ผ෺ɻ • JavaScript ͷதʹ HTMLʢΆ͍΋ͷʣ͕ॻ͚Δʂ • return <div>{this.prop.name}</div>; • ୯७ʹ JavaScript ʹม׵͞ΕΔɻߦ΋Ұॹɻ • return React.DOM.div(null, this.prop.name);
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. Virtual DOM • DOM Λຖճॻ͖௚ͬͯ͢ɺແବͰ͸ʁը໘͕ͪΒͭ͘ͷͰ ͸ʁ • ͕͔͔࣌ؒΔͷ͸ DOM ૢ࡞ɻJavaScript ͦͷ΋ͷ͸଎͍ʂ • JavaScript ্Ͱ Virtual DOM ΛߏஙɻVirtual DOM ಉ࢜Ͱࠩ ෼Λͱͬͯɺ࣮ࡍͷ DOM ૢ࡞Λ࠷খݶʹ཈͑Δɻ • DOM πϦʔͷൺֱͬͯɺύϑΥʔϚϯεग़ΔͷʁώϡʔϦ εςΟΫεʹΑΓ O(n^3) ͔Β O(n) ʹɻ
11. Component • ೋछྨͷσʔλͰ UI Λඳըɻ • props: ֎͔Β౉͞ΕΔ஋ • state: ಺ଆͰอ࣋ɾมߋ͢Δ஋ • render() Ͱ͸্هͷೋछྨͷ஋Λ࢖ͬͯɺVirtual DOM Λߏங͢Δɻ • ௨ৗ͸ props ͷมߋ·ͨ͸ setState() ͷݺͼग़࣌͠ͷΈɺද͕ࣔߋ৽͞ΕΔɻ • ௨ৗ͸ඞཁͳ͍͕ɺखಈͰදࣔΛߋ৽͢Δ͜ͱ΋ՄೳɻforceUpdate() • ֎෦ͱͷΠϯλʔϑΣΠε͸ props ͚ͩɻ
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. Demo https://github.com/shuhei/react-sample-counter
14. ·ͱΊ • Facebook, Instagram Ͱͷ࣮ઓͰ஁͑ΒΕ͍ͯΔɻ • View ͷݟ௨͕͠ྑ͘ͳΔɻrender() ݟΕ͹શͯ෼ ͔Δɻ • Virtual DOM Ͱ DOM ૢ࡞͍Βͣɻ • ࠶ར༻ੑͷߴ͍ ComponentɻJS ͱςϯϓϨʔτ͕ ෼͔Ε͍ͯͳ͍ͷͰɺऔΓճ͠΍͍͢ɻ
15. ඍົͳͱ͜Ζ • render Ͱฦ͢΋ͷɺҰͭͰͳ͍ͱ͍͚ͳ͍ɻෳ਺ ͷཁૉΛฦ͢৔߹͸ <div /> Ͱғ͏ɻ • Bootstrap Έ͍ͨʹΫϥε໊ͨ͘͞Μ͚ͭΔͷΛ JSX Ͱ΍Δͷ͸ඍົɻJSX தʹ͸ Bootstrap ͷΫϥ ε໊͸͚ͭͣɺSass ͷ @extend ͳΜ͔ͰελΠϦ ϯά͢Δͱྑͦ͞͏ɻ
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. 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