Weitere ähnliche Inhalte
Ähnlich wie React.js + Flux (20)
Mehr von dsuke Takaoka (20)
React.js + Flux
- 3. A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
React
http://facebook.github.io/react/index.html
- 7. var a = 1;
var b = a + 1;
a = 10;
console.log(b);
Example Reactive
何が表示される?
2 に決まってんだろjk
- 8. > 11
var a = 1;
var b = a + 1;
a = 10;
console.log(b);
Example Reactive
- 12. Hello Example
/** @jsx React.DOM */
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
!
React.renderComponent(<HelloMessage name="John" />, mountNode);
http://facebook.github.io/react/#helloExample
- 13. Hello Example
/** @jsx React.DOM */
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
!
React.renderComponent(<HelloMessage name="John" />, mountNode);
JSX !!
JSX: JavaScript XML syntax transform DeNA JSX
JavaScript 中に XML を埋め込む。
http://facebook.github.io/react/#helloExample
- 14. Why JSX?
JSXじゃなくても React APIでDOMを作成できる。
var link = React.DOM.a({
href: 'http://facebook.github.io/react'
}, 'React');
• DOM構造が視覚的に分かりやすい。
• デザイナに優しい。
• MXML や XAML 使ってる人に馴染みがある。
JSXを使うことをオススメする3つの理由
- 16. Timer Example
/** @jsx React.DOM */
var Timer = React.createClass({
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},
componentDidMount: function() {
this.interval = setInterval(this.tick, 1000);
},
componentWillUnmount: function() {
clearInterval(this.interval);
},
render: function() {
return (
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>
);
}
});
React.renderComponent(<Timer />, mountNode);
http://facebook.github.io/react/#timerExample
- 17. Timer Example
/** @jsx React.DOM */
var Timer = React.createClass({
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},
componentDidMount: function() {
this.interval = setInterval(this.tick, 1000);
},
componentWillUnmount: function() {
clearInterval(this.interval);
},
render: function() {
return (
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>
);
}
});
React.renderComponent(<Timer />, mountNode);
http://facebook.github.io/react/#timerExample
Using Stateful
- 23. ならば FLUX だ!
○ ViewにReact
○ 単方向のデータフロー
○ Dispatcherでイベントの順序を管理
- 26. React(JSX) まとめ
• JSONのほうが構造は分かりやすくない?
• デザイナフレンドリでかけるデザイナさんほしい
• とはいえ、文字列連結するよりタイプが減る。
• Angularのdirectiveみたいな感じ。
• Polymerとの比較も面白い
see:
- React vs Angular
- Facebook's React vs AngularJS: A Closer Look
- Pros and Cons of Facebook's React vs. Web Components (Polymer)
- 28. Appendix - Tools
• エディタのJSXサポート
• vim-jsx
• sublime-react
• web-mode.el
• Atom React.js support
• Debugger
• React Dev Tools
• その他便利ツール
• Complementary-Tools