Recommended
More Related Content
What's hot
What's hot (20)
Similar to React入門-JSONを取得して表示する
Similar to React入門-JSONを取得して表示する (20)
More from regret raym
More from regret raym (18)
React入門-JSONを取得して表示する
- 2. OPEN MEETING VOL.11 twitter@regret_raym studying…Chef / Fluentd / CreateJS ファンタラクティブ株式会社 取締役,デザイナー 写真素材サイト ぱくたそ テクニカル・ディレクター 塚口 祐司
- 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っぽい
- 8. OPEN MEETING VOL.11 helloworld.js React.render( <h1>Hellow, world!</h1> document.getElementById('example') );
- 10. JSX
- 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/
- 13. Component
- 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
- 17. Component
- 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
- 20. JSON
- 22. OPEN MEETING VOL.11 JSON var data = [ {id: 1, author: "井村圭介"}, {id: 2, author: "塚口祐司"} ];
- 23. OPEN MEETING VOL.11 Render React.render( <MemberBox data={data} />, document.getElementById('example') ); MemberBoxにjson値を設定
- 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> ) } }); 渡された値を表示
- 28. 外部API
- 31. OPEN MEETING VOL.11 Render React.render( <MemberBox url="https://www.kimonolabs.com/api/7tthqscc? apikey=fnR8ogc0OeVcgxjrmb9GUiKxrAN5FcxL" />, document.getElementById('example') );
- 32. OPEN MEETING VOL.11 MemberBox var MemberBox = React.createClass({ getInitialState: function() { return {data: []}; }, ~~~~ 初期化
- 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. OPEN MEETING VOL.11 MemberBox componentDidMount: function() { this.loadAjax(); }, ComponentがDOMツリーに追加 された状態で呼ばれるのでDOMに 関わる初期化処理を行いたい時