Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Reactがなぜ素晴らしいのか

 Reactがなぜ素晴らしいのか

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

Yuichiro MASUI

March 18, 2015
Tweet

More Decks by Yuichiro MASUI

Other Decks in Programming

Transcript

  1. 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> ͍ͭͲ͜Ͱॻ͖׵͑Δͷ͔
 ෼͔Βͳ͍
  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> ͍ͭͲ͜Ͱॻ͖׵͑Δͷ͔
 ෼͔Βͳ͍ DOM͸Ͳ͔͜ΒͰ΋มߋՄೳ DOM͕ঢ়ଶΛ͍࣋ͬͯΔ DOMͱίʔυ͕཭Ε͗͢
  3. ΫϥΠΞϯτϩδοΫ αʔόαΠυੜ੒ ϒϥ΢β ϩδοΫ (ίϯτϩʔϥ) ϦΫΤετ αʔό ΫϥΠΞϯτ HTMLੜ੒෦ (render)

    HTMLੜ੒෦ (ςϯϓϨʔτ) ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (setState) ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (ςϯϓϨʔτม਺)
  4. /** @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 - ഑ྻͷΞΠςϜΛදࣔ
  5. /** @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 - ΞΠςϜΛ௥Ճ
  6. 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 - ΞΠςϜΛ௥Ճ
  7. 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);
  8. 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);
  9. <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>
  10. <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>
  11. 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
  12. Dispatcher Action Store React User action actions/TodoActions.js TodoActions = {

    create: function(text) { AppDispatcher.dispatch({ actionType: TodoConst.TODO_CREATE, text: text }); } }
  13. 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 }; }
  14. 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 ... } });