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

JSXとReactとDOMと。

 JSXとReactとDOMと。

リーン駆動開発 by Tomohiko Himura
Published April 4, 2015 in Programming

LT駆動開発13 - 四月は君のLT
https://github.com/LTDD/Sessions/wiki/LT%E9%A7%86%E5%8B%95%E9%96%8B%E7%99%BA13

解説とか
http://blog.eiel.info/blog/2015/04/04/jsx-react-dom-lt-13/

Tomohiko Himura

April 04, 2015
Tweet

More Decks by Tomohiko Himura

Other Decks in Programming

Transcript

  1. HTML <div> <h3>TODO</h3> <ul> <li>aaa</li> <li>bbb</li> </ul> <form onSubmit="handleSubmit"> <input

    onChange="onChange" value="" /> <button>Add #3</button> </form> </div>
  2. HTML <div> <h3>TODO</h3> <ul> <li>aaa</li> <li>bbb</li> </ul> <form onSubmit="handleSubmit"> <input

    onChange="onChange" value="" /> <button>Add #3</button> </form> </div>
  3. HTML <div> <h3>TODO</h3> <ul> <li>aaa</li> <li>bbb</li> </ul> <form onSubmit="handleSubmit"> <input

    onChange="onChange" value="" /> <button>Add #3</button> </form> </div>
  4. JSX <div> <h3>TODO</h3> <TodoList items={this.state.items} /> <form onSubmit={this.handleSubmit}> <input onChange={this.onChange}

    value={this.state.text} /> <button>{'Add #' + (this.state.items.length + 1)}</button> </form> </div>
  5. JSX <div> <h3>TODO</h3> <TodoList items={this.state.items} /> <form onSubmit={this.handleSubmit}> <input onChange={this.onChange}

    value={this.state.text} /> <button>{'Add #' + (this.state.items.length + 1)}</button> </form> </div>
  6. JavaScript(Non JSX) React.createElement("div", null, React.createElement("h3", null, "TODO"), React.createElement(TodoList, {items: this.state.items}),

    React.createElement("form", {onSubmit: this.handleSubmit}, React.createElement("input", {onChange: this.onChange, value: this.state.text}), React.createElement("button", null, 'Add #' + (this.state.items.length + 1)) ) )
  7. s/React.createElement/R.ce/g R.ce("div", null, R.ce("h3", null, "TODO"), R.ce(TodoList, {items: this.state.items}), R.ce("form",

    {onSubmit: this.handleSubmit}, R.ce("input", {onChange: this.onChange, value: this.state.text}), R.ce("button", null, 'Add #' + (this.state.items.length + 1)) ) )
  8. s/React.createElement/R.ce/g R.ce("div", null, R.ce("h3", null, "TODO"), R.ce(TodoList, {items: this.state.items}), R.ce("form",

    {onSubmit: this.handleSubmit}, R.ce("input", {onChange: this.onChange, value: this.state.text}), R.ce("button", null, 'Add #' + (this.state.items.length + 1)) ) )
  9. JavaScript(DOM API) var div = document.createElement("div"); var h3 = div.appendChild(document.createElement("h3"));

    h3.appendChild(document.createTextNode("TODO")); div.appendChild(new TodoList(items).render()); var form React.createElement("form"); form.addEventListener("submit", handleSubmit); var input = document.createElement("input"); input.addEventListener("change",onChange); input.setAttribute("value",text); form.appendChild(input) var button = document.createElement("button") button.appendChild(document.createTextNode("Add #" + (items.length + 1).toString())
  10. JavaScript(DOM API) var div = document.createElement("div"); var h3 = div.appendChild(document.createElement("h3"));

    h3.appendChild(document.createTextNode("TODO")); div.appendChild(new TodoList(items).render()); var form React.createElement("form"); form.addEventListener("submit", handleSubmit); var input = document.createElement("input"); input.addEventListener("change",onChange); input.setAttribute("value",text); form.appendChild(input) var button = document.createElement("button") button.appendChild(document.createTextNode("Add #" + (items.length + 1).toString())
  11. JavaScript(Non JSX) R.ce("div", null, R.ce("h3", null, "TODO"), R.ce(TodoList, {items: this.state.items}),

    R.ce("form", {onSubmit: this.handleSubmit}, R.ce("input", {onChange: this.onChange, value: this.state.text}), R.ce("button", null, 'Add #' + (this.state.items.length + 1)) ) )
  12. JavaScript(Non JSX) R.ce("div", null, R.ce("h3", null, "TODO"), R.ce(TodoList, {items: this.state.items}),

    R.ce("form", {onSubmit: this.handleSubmit}, R.ce("input", {onChange: this.onChange, value: this.state.text}), R.ce("button", null, 'Add #' + (this.state.items.length + 1)) ) )
  13. JavaScript(ಉ͡APIͳΒ…) D.ce("div", null, D.ce("h3", null, "TODO"), D.ce(TodoList, {items: this.state.items}), D.ce("form",

    {onSubmit: this.handleSubmit}, D.ce("input", {onChange: this.onChange, value: this.state.text}), D.ce("button", null, 'Add #' + (this.state.items.length + 1)) ) )
  14. JavaScript(ಉ͡APIͳΒ…) D.ce("div", null, D.ce("h3", null, "TODO"), D.ce(TodoList, {items: this.state.items}), D.ce("form",

    {onSubmit: this.handleSubmit}, D.ce("input", {onChange: this.onChange, value: this.state.text}), D.ce("button", null, 'Add #' + (this.state.items.length + 1)) ) ) Custom Elements͕͋Ε͹…