Weitere ähnliche Inhalte
Ähnlich wie React入門-JSONを取得して表示する (20)
Mehr von regret raym (18)
React入門-JSONを取得して表示する
- 4. OPEN MEETING VOL.11
React
‣ Facebookが開発したUI構築のためのJavaScript
‣ MVCのView
‣ Virtual DOM
‣ JSXというXMLのようなSyntax
https://facebook.github.io/react/
- 6. OPEN MEETING VOL.11
Starter Kit
./
├── README.md
├── build
│ ├── JSXTransformer.js
│ ├── react-with-addons.js
│ ├── react-with-addons.min.js
│ ├── react.js
│ └── react.min.js
├── src
│ ├── helloworld.js
├── helloworld.html
└── examples
※NEW
- 7. OPEN MEETING VOL.11
helloworld.html
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
<script type="text/jsx" src="src/helloworld.js"></script>
</head>
<body>
<div id="example"></div>
</body>
</html>
コア
変換
script
描画先
LESSっぽい
- 11. OPEN MEETING VOL.11
JSX
var Hellow = React.createClass({
render: function() {
return (
<div className="hellow">
<h1>Hello, {this.props.name}</h1>
</div>
);
}
});
React.render(
<Hellow name="world!" />,
document.getElementById('example')
);
‣ 一見HTMLに見えるXML
クなsyntax
‣ JSX→JavaScript
イルすることで実行できる
- 12. OPEN MEETING VOL.11
‣ オンラインで変換する
‣ JSXTransformer
‣ オフラインで変換する
‣ react-tools
‣ browserify / webpack
‣ reactify / jsx-loader
JSX
$ npm install -g react-tools
$ jsx --watch src/ build/
- 14. OPEN MEETING VOL.11
HellowをComponent
var Hellow = React.createClass({
render: function() {
return (
<div className="hellow">
<h1>Hello, {this.props.name}</h1>
</div>
);
}
});
React.render(
<Hellow name="world!" />,
document.getElementById('example')
);
- 15. OPEN MEETING VOL.11
React.createClass
var Hellow = React.createClass({
render: function() {
return (
<div className="hellow">
<h1>Hello, {this.props.name}</h1>
</div>
);
}
});
‣ React.createClassにrender
メソッドをもったオブジェク
トを渡すことでコンポーネン
トが作成できる
- 16. OPEN MEETING VOL.11
return
var Hellow = React.createClass({
render: function() {
return (
<div className="hellow">
<h1>Hello, {this.props.name}</h1>
</div>
<div>description</div>
);
}
});
‣ Return
- 18. OPEN MEETING VOL.11
Prop
var Hellow = React.createClass({
render: function() {
return (
<div className="hellow">
<h1>Hello, {this.props.name}</h1>
</div>
);
}
});
React.render(
<Hellow name="world!" />,
document.getElementById('example')
);
‣ HTMLのattribute
ロパティ値を設定でき、それ
を参照することができる。
‣ 親→子への一方通行
- 19. OPEN MEETING VOL.11
State
var Counter = React.createClass({
getInitialState() {
return {
count: 0
};
},
onClick() {
this.setState({count: this.state.count + 1});
},
render() {
return (
<div>
<div>count:{this.state.count}</div>
<button onClick={this.onClick}>click!</button>
</div>
);
}
});
‣ 動的に値が変化するような場
合はStateを使
‣ this.state.XXXXで参照、
this.setState
- 24. OPEN MEETING VOL.11
MemberBox
var MemberBox = React.createClass({
getInitialState: function() {
return({
count: this.props.data
});
},
render: function() {
return (
<div className="memberBox">
<h1>Member</h1>
<p>{this.state.count.length} persons</p>
<MemberList data={this.props.data} />
</div>
);
}
});
MemberListに値を渡す
- 25. OPEN MEETING VOL.11
MemberList
var MemberList = React.createClass({
render: function() {
var memberNodes = this.props.data.map(function (member) {
return (
<Member author={member.author}></Member>
);
});
return (
<div className="memberList">
{memberNodes}
</div>
);
}
});
JSON値をMemberComponentに設定
- 26. OPEN MEETING VOL.11
MemberBox
var Member = React.createClass({
render: function() {
return (
<div className="member">
<h2 className="memberAuthor">
{this.props.author}
</h2>
</div>
)
}
});
渡された値を表示
- 33. OPEN MEETING VOL.11
MemberBox
~~~~
loadAjax: function() {
$.ajax({
url: this.props.url,
dataType: 'jsonp',
success: function(data) {
this.setState({data: data.results.collection1});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
~~~~
