ajax ex
Cheng Lou committed
Oct 6, 2013 at 22:10 UTC
6d2ea9a2006b72c90d5fa99496e7960824d8654d
2 files changed
+92
docs/cookbook/cb-12-initial-ajax tip.md
new
+44
@@ -0,0 +1,44 @@
1
+---
2
+id: initial-ajax-tip
3
+title: Load initial data via AJAX
4
+layout: docs
5
+permalink: initial-ajax-tip.html
6
+---
7
+
8
+Fetch data in `componentDidMount`. When they arrive, put them inside your state then render them.
9
+
10
+This example fetches the desired Github user's lastest gist:
11
+
12
+```js
13
+/** @jsx React.DOM */
14
+
15
+var UserGist = React.createClass({
16
+ getInitialState: function() {
17
+ return {
18
+ username: '',
19
+ lastGistUrl: ''
20
+ };
21
+ },
22
+ componentDidMount: function() {
23
+ $.get(this.props.source, function(result) {
24
+ var lastGist = result[0];
25
+ this.setState({
26
+ username: lastGist.user.login,
27
+ lastGistUrl: lastGist.html_url
28
+ });
29
+ }.bind(this));
30
+ },
31
+ render: function() {
32
+ return (
33
+ <div>
34
+ {this.state.username}'s last gist is
35
+ <a href={this.state.lastGistUrl}>here</a>.
36
+ </div>
37
+ );
38
+ }
39
+});
40
+
41
+React.renderComponent(
42
+ <UserGist source="https://api.github.com/users/octocat/gists" />, mountNode
43
+);
44
+```
docs/cookbook/cb-12-initial-ajax.md
new
+48
@@ -0,0 +1,48 @@
1
+---
2
+id: initial-ajax
3
+title: Load initial data via AJAX
4
+layout: docs
5
+permalink: initial-ajax.html
6
+---
7
+
8
+### Problem
9
+You want to load initial ajax data.
10
+
11
+### Solution
12
+Fetch data in `componentDidMount`. When they arrive, put them inside your state then render them.
13
+
14
+This example fetches the desired Github user's lastest gist:
15
+
16
+```js
17
+/** @jsx React.DOM */
18
+
19
+var UserGist = React.createClass({
20
+ getInitialState: function() {
21
+ return {
22
+ username: '',
23
+ lastGistUrl: ''
24
+ };
25
+ },
26
+ componentDidMount: function() {
27
+ $.get(this.props.source, function(result) {
28
+ var lastGist = result[0];
29
+ this.setState({
30
+ username: lastGist.user.login,
31
+ lastGistUrl: lastGist.html_url
32
+ });
33
+ }.bind(this));
34
+ },
35
+ render: function() {
36
+ return (
37
+ <div>
38
+ {this.state.username}'s last gist is
39
+ <a href={this.state.lastGistUrl}>here</a>.
40
+ </div>
41
+ );
42
+ }
43
+});
44
+
45
+React.renderComponent(
46
+ <UserGist source="https://api.github.com/users/octocat/gists" />, mountNode
47
+);
48
+```