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/

Transcript

1. JSXͱReactͱDOMͱɻ 2015-04-04 LTۦಈ։ൃ13
2. ͻΉΒ ͱ΋ͻ͜ React.js͸݁ߏ޷͖Ͱ͢
3. 3݄ͷ͋Ε https://twitter.com/eielh/status/573380649861574656
4. 3݄ͷ͋Ε https://twitter.com/eielh/status/573380649861574656 ҹؑ͸3͙ͭΒ͍ࣦͨ͘͠
5. React.js ͱ͸
6. ͬ͘͟ΓReact.js Facebook͕։ൃͨ͠࠷ۙྲྀߦͯ͠ΔΞϨɻ React Native ࢲɺؾʹͳΓ·͢ VirtualDOM ͬ͘͟ΓͳDOMૢ࡞Ͱ΋ΩϏΩϏඳը ίϯϙʔωϯτ ΧελϜλάͱ͔ΧϓηϧԽͱ͔
7. DOMͭΒ͍
9. 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>
12. 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>
13. 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>
14. 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>
15. 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>
16. > ΧελϜλά <
17. 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)) ) )
18. 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)) ) )
19. 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)) ) )
20. 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())
21. 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())
22. > ͭΒͦ͏ <
23. Document.createElement ↓ React.createElement Ҿ਺͕૿͑ͯ ໦ߏ଄Λ଄Γ΍͔ͬͨ͢Γ ଐੑ͕ઃఆ͠΍͔ͬͨ͢Γ
24. 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)) ) )
25. 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)) ) )
26. 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)) ) )
27. 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͕͋Ε͹…
28. Web Components࣌୅ Ϛμʔʁ
29. ·ͱΊ
30. ·ͱΊ ੜDOM API৮ΔͱษڧʹͳΔ React … ੜDOMΑΓ͸ָ… JSX…ϏϡʔςϯϓϨʔτʹݟ͖͑ͯͨ…