Reactがなぜ素晴らしいのか

 Reactがなぜ素晴らしいのか

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

0ec58a040e1e4e959c8566484b4bba19?s=128

Yuichiro MASUI

March 18, 2015
Tweet

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ϥΠϒϥϦͱಉډ͸೉͍͠