Reactがなぜ素晴らしいのか

詳しくはこちらへ → https://www.facebook.com/groups/toretatech/

Transcript

1. React.js͕
 ͳͥૉ੖Β͍͠ͷ͔ Yuichiro MASUI <masui@toreta.in> Toreta, Inc CTO
2. DOMૢ࡞͸ͳͥ೉͍͠ͷ͔ <div id=“item-1”> <span id=“item-1-text” class=“hidden”>foo</span> </div> ͜ͷλά͸ݟ͑ͯΔʁ <button id=“add-item”>௥Ճ</a> Ͳ͜Ͱॲཧ͢Δ͔
 ෼͔Βͳ͍ <div id=“item-1”> <span id=“item-1-text”>foo</span> </div> ͍ͭͲ͜Ͱॻ͖׵͑Δͷ͔
 ෼͔Βͳ͍
3. DOMૢ࡞͸ͳͥ೉͍͠ͷ͔ <div id=“item-1”> <span id=“item-1-text” class=“hidden”>foo</span> </div> ͜ͷλά͸ݟ͑ͯΔʁ <button id=“add-item”>௥Ճ</a> Ͳ͜Ͱॲཧ͢Δ͔
 ෼͔Βͳ͍ <div id=“item-1”> <span id=“item-1-text”>foo</span> </div> ͍ͭͲ͜Ͱॻ͖׵͑Δͷ͔
 ෼͔Βͳ͍ DOM͸Ͳ͔͜ΒͰ΋มߋՄೳ DOM͕ঢ়ଶΛ͍࣋ͬͯΔ DOMͱίʔυ͕཭Ε͗͢
4. ΋ͬͱ؆୯ʹ΍Ζ͏ DOMΛॻ͖׵͑ͳ͍ͰৗʹHTMLશମΛੜ੒ EventListenerΛ΍ΊͯonXxxϓϩύςΟΛ࢖͏ HTMLͱJavascriptΛҰͭʹ·ͱΊΔ
5. ΫϥΠΞϯτϩδοΫ αʔόαΠυੜ੒ ϒϥ΢β ϩδοΫ (ίϯτϩʔϥ) ϦΫΤετ αʔό ΫϥΠΞϯτ HTMLੜ੒෦ (render) HTMLੜ੒෦ (ςϯϓϨʔτ) ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (setState) ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (ςϯϓϨʔτม਺)
6. ΫϥΠΞϯτϩδοΫ ϒϥ΢β αʔό ΫϥΠΞϯτ Πϕϯτ (onSubmit) React.js αʔόϩδοΫ HTMLੜ੒෦ (render) ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (setState)
7. Example: Todo list http://codepen.io/masuidrive
8. P.1 - ഑ྻͷΞΠςϜΛදࣔ
9. /** @jsx React.DOM */ App = React.createClass({ getInitialState: function() { return { items: [ { text: "Foo" }, { text: "Bar" }, { text: "Buzz" } ] }; }, render: function() { return <div> <div> {this.state.items.map(function(item) { return <div className="item">{item.text}</div>; })} </div> </div>; } }); React.render(<App/>, document.body); P.1 - ഑ྻͷΞΠςϜΛදࣔ
10. P.2 - ΞΠςϜΛ௥Ճ
11. /** @jsx React.DOM */ App = React.createClass({ getInitialState: function() { return { newText: "", items: [ { text: "Foo" }, { text: "Bar" }, { text: "Buzz" } ] }; }, addItem: function(event) { event.preventDefault(); this.setState({ items: [{text : this.state.newText}].concat(this.state.items), newText: "" }) }, updateNewText: function(event) { this.setState({ newText : event.target.value }); }, render: function() { return <div> <form onSubmit={this.addItem}> <input value={this.state.newText} onChange={this.updateNewText} /> <button>௥Ճ</button> </form> ɹ <div> {this.state.items.map(function(item) { return <div className="item">{item.text}</div>; })} </div> </div>; } }); React.render(<App/>, document.body); P.2 - ΞΠςϜΛ௥Ճ
12. addItem: function(event) { event.preventDefault(); this.setState({ items: [{text : this.state.newText}].concat(this.state.items), newText: "" }) }, updateNewText: function(event) { this.setState({ newText : event.target.value }); }, render: function() { return <div> <form onSubmit={this.addItem}> <input value={this.state.newText} onChange={this.updateNewText} /> <button>௥Ճ</button> </form> ɹ <div> {this.state.items.map(function(item) { ← 1จࣈೖྗͷͨͼʹݺ͹ΕΔ P.2 - ΞΠςϜΛ௥Ճ
13. P.3 - ݅਺දࣔ ݅਺ →
14. P.3 - ݅਺දࣔ /** @jsx React.DOM */ App = React.createClass({ getInitialState: function() { return { newText: "", items: [ { text: "Foo" }, { text: "Bar" }, { text: "Buzz" } ] }; }, addItem: function() { event.preventDefault(); this.setState({ items: [{text : this.state.newText}].concat(this.state.items), newText: "" }) }, updateNewText: function(ev) { this.setState({ newText : ev.target.value }); }, render: function() { return <div> <form onSubmit={this.addItem}> <input value={this.state.newText} onChange={this.updateNewText} /> <button>௥Ճ</button> </form> <div>{this.state.items.length}݅</div> <div> {this.state.items.map(function(item) { return <div className="item">{item.text}</div>; })} </div> </div>; } }); React.render(<App/>, document.body);
15. P.3 - ݅਺දࣔ }); }, render: function() { return <div> <form onSubmit={this.addItem}> <input value={this.state.newText} onChange={this.updateNewText} /> <button>௥Ճ</button> </form> <div>{this.state.items.length}݅</div> <div> {this.state.items.map(function(item) { return <div className="item">{item.text}</div>; })} </div> </div>; } }); React.render(<App/>, document.body);
16. HTMLΛৗʹ࠶ߏங͢Δ͜ͱͰ ঢ়ଶม਺ ϩδοΫ ม਺Λߋ৽ Ϗϡʔ ม਺͔Βੜ੒
17. Ͱ΋… • HTMLશମॻ͖׵͑Δͱ஗͘ͳ͍ʁ • CSSΞχϝʔγϣϯ࢖͑ͳ͍ΑͶʁ • ࣮͸೔ຊޠೖྗͰ͖ͳ͍ΑͶ
18. <div> <div>3݅</div> <div className=“items”> <div className=“item”>
 Foo </div> <div className=“item”> Bar </div> <div className=“item”> Buzz </div> </div> <div> ݱࡏͷDOM ࣮ࡍͷߋ৽ VirtualDOM BrowserDOM ৽͍͠DOM <div> <div>4݅</div> <div className=“item”> <div className=“item”>
 Foo </div> <div className=“item”> Bar </div> <div className=“item”> Buzz </div> <div className=“item”> One </div> </div> <div> (ͨͩͷJS Object) <div> <div>4݅</div> <div class=“item”> <div class=“item”>
 Foo </div> <div class=“item”> Bar </div> <div class=“item”> Buzz </div> <div class=“item”> One </div> </div> <div>
19. <div> <div>3݅</div> <div className=“items”> <div className=“item”>
 Foo </div> <div className=“item”> Bar </div> <div className=“item”> Buzz </div> </div> <div> ݱࡏͷDOM ࣮ࡍͷߋ৽ VirtualDOM BrowserDOM ৽͍͠DOM <div> <div>4݅</div> <div className=“item”> <div className=“item”>
 Foo </div> <div className=“item”> Bar </div> <div className=“item”> Buzz </div> <div className=“item”> One </div> </div> <div> (ͨͩͷJS Object) <div> <div>4݅</div> <div class=“item”> <div class=“item”>
 Foo </div> <div class=“item”> Bar </div> <div class=“item”> Buzz </div> <div class=“item”> One </div> </div> <div>
20. ΋ͬͱٕज़తʹ͸ • key • component • property • dangerouslySetInnerHTML • ৄ͘͠͸άά͍ͬͯͩ͘͞
21. ͞Βʹ • ComponentͰ࠶ར༻Մೳͳ෦඼Խ • αʔόαΠυϨϯμϦϯά • ΋ͬͱେ͖ͳΞϓϦͰ͸Flux • iOS/AndroidΞϓϦ͸ReactNative
22. ໰୊఺ • ίʔυΛॻ͘ਓ͕HTML΋ॻ͘ • طଘͷJS෦඼͕࢖͑ͳ͍(͜ͱ΋ͳ͍) • ಛʹTwitter Widgetͱ͔֎෦JS͸ۤख
23. Flux • ߟ͑ํͷ໊લ (MVCͱ͔ͱҰॹ) • ReactͰ͸Data͑͞มߋ͢Ε͹ը໘ʹ൓ө͞ΕΔ • Ϣʔβ͔ΒͷActionΛݩʹDispatcher͕Storeͷ มߋΛݺͼग़͢
24. Dispatcher Action Store React User action
25. Dispatcher Action Store React User action render: function() { return <header id="header"> <h1>todos</h1> <TodoTextInput id="new-todo" placeholder="What needs to be done?" onSave={this._onSave} /> </header>; }, _onSave: function(text) { if(text.trim()) { TodoActions.create(text) } } components/Header.js
26. Dispatcher Action Store React User action actions/TodoActions.js TodoActions = { create: function(text) { AppDispatcher.dispatch({ actionType: TodoConst.TODO_CREATE, text: text }); } }
27. Dispatcher Action Store React User action stores/TodoStore.js AppDispatcher.register(function(action) { switch(action.actionType) { case TodoConst.TODO_CREATE: create(action.text); TodoStore.emit(“change”); } }); function create() { var id = Math.random(); _todos[id] = { id: id complete: false text: text }; }
28. Dispatcher Action Store React User action components/TodoApp.js var TodoApp = React.createClass({ getInitialState: function() { return({ todos: TodoStore.getAll() }); }, componentDidMount: function() { TodoStore.addListener(this._onChange); }, _onChange: function() { this.setState({todos: TodoStore.getAll()}); }, render: function() { return ... } });
29. ·ͱΊ • αʔόαΠυͷ༷ͳγϯϓϧͳྲྀΕͰAjaxΛ • ը໘Λॻ͖׵͑Δͱ͖͸ৗʹશ෦ॻ͖׵͑ • طଘͷJS UIϥΠϒϥϦͱಉډ͸೉͍͠