Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ReactでJSONを受け取って表示する
FUNTERACTIVE OPEN MEETING VOL.11
OPEN MEETING VOL.11
twitter@regret_raym
studying…Chef / Fluentd / CreateJS
ファンタラクティブ株式会社
取締役,デザイナー
写真素材サイト ぱくたそ
テクニカル・ディレク...
OPEN MEETING VOL.11
OPEN MEETING VOL.11
React
‣ Facebookが開発したUI構築のためのJavaScript
‣ MVCのView
‣ Virtual DOM
‣ JSXというXMLのようなSyntax
https://faceboo...
Hellow World
http://facebook.github.io/react/docs/getting-started.html
OPEN MEETING VOL.11
Starter Kit
./
├── README.md
├── build
│   ├── JSXTransformer.js
│   ├── react-with-addons.js
│   ├── ...
OPEN MEETING VOL.11
helloworld.html
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="buil...
OPEN MEETING VOL.11
helloworld.js
React.render(
<h1>Hellow, world!</h1>
document.getElementById('example')
);
OPEN MEETING VOL.11
JSX
OPEN MEETING VOL.11
JSX
var Hellow = React.createClass({
render: function() {
return (
<div className="hellow">
<h1>Hello,...
OPEN MEETING VOL.11
‣ オンラインで変換する
‣ JSXTransformer
‣ オフラインで変換する
‣ react-tools
‣ browserify / webpack
‣ reactify / jsx-loade...
Component
OPEN MEETING VOL.11
HellowをComponent
var Hellow = React.createClass({
render: function() {
return (
<div className="hellow...
OPEN MEETING VOL.11
React.createClass
var Hellow = React.createClass({
render: function() {
return (
<div className="hello...
OPEN MEETING VOL.11
return
var Hellow = React.createClass({
render: function() {
return (
<div className="hellow">
<h1>Hel...
Component
OPEN MEETING VOL.11
Prop
var Hellow = React.createClass({
render: function() {
return (
<div className="hellow">
<h1>Hello...
OPEN MEETING VOL.11
State
var Counter = React.createClass({
getInitialState() {
return {
count: 0
};
},
onClick() {
this.s...
JSON
OPEN MEETING VOL.11
メンバーリストを表示する
MemberBox
MemberList
Member
JSON
OPEN MEETING VOL.11
JSON
var data = [
{id: 1, author: "井村圭介"},
{id: 2, author: "塚口祐司"}
];
OPEN MEETING VOL.11
Render
React.render(
<MemberBox data={data} />,
document.getElementById('example')
);
MemberBoxにjson値を...
OPEN MEETING VOL.11
MemberBox
var MemberBox = React.createClass({
getInitialState: function() {
return({
count: this.props...
OPEN MEETING VOL.11
MemberList
var MemberList = React.createClass({
render: function() {
var memberNodes = this.props.data...
OPEN MEETING VOL.11
MemberBox
var Member = React.createClass({
render: function() {
return (
<div className="member">
<h2 ...
OPEN MEETING VOL.11
外部API
OPEN MEETING VOL.11
OPEN MEETING VOL.11
OPEN MEETING VOL.11
Render
React.render(
<MemberBox url="https://www.kimonolabs.com/api/7tthqscc?
apikey=fnR8ogc0OeVcgxjrm...
OPEN MEETING VOL.11
MemberBox
var MemberBox = React.createClass({
getInitialState: function() {
return {data: []};
},
~~~~...
OPEN MEETING VOL.11
MemberBox
~~~~
loadAjax: function() {
$.ajax({
url: this.props.url,
dataType: 'jsonp',
success: functi...
OPEN MEETING VOL.11
MemberBox
componentDidMount: function() {
this.loadAjax();
},
ComponentがDOMツリーに追加
された状態で呼ばれるのでDOMに
関わる...
OPEN MEETING VOL.11
OPEN MEETING VOL.11
ご清聴ありがとうございました
Upcoming SlideShare
Loading in …5
×

React入門-JSONを取得して表示する

14,295 views

Published on

ファンタラクティブ・オープンミーティング#11で使用した資料です。

Published in: Engineering
  • Be the first to comment

React入門-JSONを取得して表示する

  1. 1. ReactでJSONを受け取って表示する FUNTERACTIVE OPEN MEETING VOL.11
  2. 2. OPEN MEETING VOL.11 twitter@regret_raym studying…Chef / Fluentd / CreateJS ファンタラクティブ株式会社 取締役,デザイナー 写真素材サイト ぱくたそ テクニカル・ディレクター 塚口 祐司
  3. 3. OPEN MEETING VOL.11
  4. 4. OPEN MEETING VOL.11 React ‣ Facebookが開発したUI構築のためのJavaScript ‣ MVCのView ‣ Virtual DOM ‣ JSXというXMLのようなSyntax https://facebook.github.io/react/
  5. 5. Hellow World http://facebook.github.io/react/docs/getting-started.html
  6. 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. 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っぽい
  8. 8. OPEN MEETING VOL.11 helloworld.js React.render( <h1>Hellow, world!</h1> document.getElementById('example') );
  9. 9. OPEN MEETING VOL.11
  10. 10. JSX
  11. 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. 12. OPEN MEETING VOL.11 ‣ オンラインで変換する ‣ JSXTransformer ‣ オフラインで変換する ‣ react-tools ‣ browserify / webpack ‣ reactify / jsx-loader JSX $ npm install -g react-tools $ jsx --watch src/ build/
  13. 13. Component
  14. 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. 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. 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
  17. 17. Component
  18. 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. 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
  20. 20. JSON
  21. 21. OPEN MEETING VOL.11 メンバーリストを表示する MemberBox MemberList Member JSON
  22. 22. OPEN MEETING VOL.11 JSON var data = [ {id: 1, author: "井村圭介"}, {id: 2, author: "塚口祐司"} ];
  23. 23. OPEN MEETING VOL.11 Render React.render( <MemberBox data={data} />, document.getElementById('example') ); MemberBoxにjson値を設定
  24. 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. 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. 26. OPEN MEETING VOL.11 MemberBox var Member = React.createClass({ render: function() { return ( <div className="member"> <h2 className="memberAuthor"> {this.props.author} </h2> </div> ) } }); 渡された値を表示
  27. 27. OPEN MEETING VOL.11
  28. 28. 外部API
  29. 29. OPEN MEETING VOL.11
  30. 30. OPEN MEETING VOL.11
  31. 31. OPEN MEETING VOL.11 Render React.render( <MemberBox url="https://www.kimonolabs.com/api/7tthqscc? apikey=fnR8ogc0OeVcgxjrmb9GUiKxrAN5FcxL" />, document.getElementById('example') );
  32. 32. OPEN MEETING VOL.11 MemberBox var MemberBox = React.createClass({ getInitialState: function() { return {data: []}; }, ~~~~ 初期化
  33. 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) }); }, ~~~~
  34. 34. OPEN MEETING VOL.11 MemberBox componentDidMount: function() { this.loadAjax(); }, ComponentがDOMツリーに追加 された状態で呼ばれるのでDOMに 関わる初期化処理を行いたい時
  35. 35. OPEN MEETING VOL.11
  36. 36. OPEN MEETING VOL.11 ご清聴ありがとうございました

×