React.js͕
 ͳͥૉ੖Β͍͠ͷ͔ Yuichiro MASUI Toreta, Inc CTO

DOMૢ࡞͸ͳͥ೉͍͠ͷ͔ ͜ͷλά͸ݟ͑ͯΔʁ ௥Ճ Ͳ͜Ͱॲཧ͢Δ͔
 ෼͔Βͳ͍ ͍ͭͲ͜Ͱॻ͖׵͑Δͷ͔
 ෼͔Βͳ͍

DOMૢ࡞͸ͳͥ೉͍͠ͷ͔ ͜ͷλά͸ݟ͑ͯΔʁ ௥Ճ Ͳ͜Ͱॲཧ͢Δ͔
 ෼͔Βͳ͍ ͍ͭͲ͜Ͱॻ͖׵͑Δͷ͔
 ෼͔Βͳ͍ DOM͸Ͳ͔͜ΒͰ΋มߋՄೳ DOM͕ঢ়ଶΛ͍࣋ͬͯΔ DOMͱίʔυ͕཭Ε͗͢

΋ͬͱ؆୯ʹ΍Ζ͏ DOMΛॻ͖׵͑ͳ͍ͰৗʹHTMLશମΛੜ੒ EventListenerΛ΍ΊͯonXxxϓϩύςΟΛ࢖͏ HTMLͱJavascriptΛҰͭʹ·ͱΊΔ

ΫϥΠΞϯτϩδοΫ αʔόαΠυੜ੒ ϒϥ΢β ϩδοΫ (ίϯτϩʔϥ) ϦΫΤετ αʔό ΫϥΠΞϯτ HTMLੜ੒෦ (render) HTMLੜ੒෦ (ςϯϓϨʔτ) ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (setState) ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (ςϯϓϨʔτม਺)

ΫϥΠΞϯτϩδοΫ ϒϥ΢β αʔό ΫϥΠΞϯτ Πϕϯτ (onSubmit) React.js αʔόϩδοΫ HTMLੜ੒෦ (render) ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (setState)

Example: Todo list http://codepen.io/masuidrive

P.1 - ഑ྻͷΞΠςϜΛදࣔ

/** @jsx React.DOM */ App = React.createClass({ getInitialState: function() { return { items: [ { text: "Foo" }, { text: "Bar" }, { text: "Buzz" } ] }; }, render: function() { return ; } }); React.render(, document.body); P.1 - ഑ྻͷΞΠςϜΛදࣔ

P.2 - ΞΠςϜΛ௥Ճ

/** @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 ; } }); React.render(, document.body); P.2 - ΞΠςϜΛ௥Ճ

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

P.3 - ݅਺දࣔ ݅਺ →

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 ; } }); React.render(, document.body);

P.3 - ݅਺දࣔ }); }, render: function() { return ; } }); React.render(, document.body);

HTMLΛৗʹ࠶ߏங͢Δ͜ͱͰ ঢ়ଶม਺ ϩδοΫ ม਺Λߋ৽ Ϗϡʔ ม਺͔Βੜ੒

Ͱ΋… • HTMLશମॻ͖׵͑Δͱ஗͘ͳ͍ʁ • CSSΞχϝʔγϣϯ࢖͑ͳ͍ΑͶʁ • ࣮͸೔ຊޠೖྗͰ͖ͳ͍ΑͶ

΋ͬͱٕज़తʹ͸ • key • component • property • dangerouslySetInnerHTML • ৄ͘͠͸άά͍ͬͯͩ͘͞

͞Βʹ • ComponentͰ࠶ར༻Մೳͳ෦඼Խ • αʔόαΠυϨϯμϦϯά • ΋ͬͱେ͖ͳΞϓϦͰ͸Flux • iOS/AndroidΞϓϦ͸ReactNative

໰୊఺ • ίʔυΛॻ͘ਓ͕HTML΋ॻ͘ • طଘͷJS෦඼͕࢖͑ͳ͍(͜ͱ΋ͳ͍) • ಛʹTwitter Widgetͱ͔֎෦JS͸ۤख

Flux • ߟ͑ํͷ໊લ (MVCͱ͔ͱҰॹ) • ReactͰ͸Data͑͞มߋ͢Ε͹ը໘ʹ൓ө͞ΕΔ • Ϣʔβ͔ΒͷActionΛݩʹDispatcher͕Storeͷ มߋΛݺͼग़͢

Dispatcher Action Store React User action

Dispatcher Action Store React User action render: function() { return

todos

; }, _onSave: function(text) { if(text.trim()) { TodoActions.create(text) } } components/Header.js

Dispatcher Action Store React User action actions/TodoActions.js TodoActions = { create: function(text) { AppDispatcher.dispatch({ actionType: TodoConst.TODO_CREATE, text: text }); } }

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 }; }

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 ... } });

·ͱΊ • αʔόαΠυͷ༷ͳγϯϓϧͳྲྀΕͰAjaxΛ • ը໘Λॻ͖׵͑Δͱ͖͸ৗʹશ෦ॻ͖׵͑ • طଘͷJS UIϥΠϒϥϦͱಉډ͸೉͍͠