ajax ex

cookbook/cb-12-initial-ajax tip.md

@@ -0,0 +1,44 @@
+---
+id: initial-ajax-tip
+title: Load initial data via AJAX
+layout: docs
+permalink: initial-ajax-tip.html
+---
+
+Fetch data in `componentDidMount`. When they arrive, put them inside your state then render them.
+
+This example fetches the desired Github user's lastest gist:
+
+```js
+/** @jsx React.DOM */
+
+var UserGist = React.createClass({
+  getInitialState: function() {
+    return {
+      username: '',
+      lastGistUrl: ''
+    };
+  },
+  componentDidMount: function() {
+    $.get(this.props.source, function(result) {
+      var lastGist = result[0];
+      this.setState({
+        username: lastGist.user.login,
+        lastGistUrl: lastGist.html_url
+      });
+    }.bind(this));
+  },
+  render: function() {
+    return (
+      <div>
+        {this.state.username}'s last gist is
+        <a href={this.state.lastGistUrl}>here</a>.
+      </div>
+    );
+  }
+});
+
+React.renderComponent(
+  <UserGist source="https://api.github.com/users/octocat/gists" />, mountNode
+);
+```

cookbook/cb-12-initial-ajax.md

@@ -0,0 +1,48 @@
+---
+id: initial-ajax
+title: Load initial data via AJAX
+layout: docs
+permalink: initial-ajax.html
+---
+
+### Problem
+You want to load initial ajax data.
+
+### Solution
+Fetch data in `componentDidMount`. When they arrive, put them inside your state then render them.
+
+This example fetches the desired Github user's lastest gist:
+
+```js
+/** @jsx React.DOM */
+
+var UserGist = React.createClass({
+  getInitialState: function() {
+    return {
+      username: '',
+      lastGistUrl: ''
+    };
+  },
+  componentDidMount: function() {
+    $.get(this.props.source, function(result) {
+      var lastGist = result[0];
+      this.setState({
+        username: lastGist.user.login,
+        lastGistUrl: lastGist.html_url
+      });
+    }.bind(this));
+  },
+  render: function() {
+    return (
+      <div>
+        {this.state.username}'s last gist is
+        <a href={this.state.lastGistUrl}>here</a>.
+      </div>
+    );
+  }
+});
+
+React.renderComponent(
+  <UserGist source="https://api.github.com/users/octocat/gists" />, mountNode
+);
+```