Add docs for using Promises and making AJAX requests

template/README.md

@@ -23,6 +23,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
 - [Adding Flow](#adding-flow)
 - [Adding Custom Environment Variables](#adding-custom-environment-variables)
 - [Can I Use Decorators?](#can-i-use-decorators)
+- [Fetching AJAX Requests](#fetching-ajax-requests)
 - [Integrating with a Node Backend](#integrating-with-a-node-backend)
 - [Proxying API Requests in Development](#proxying-api-requests-in-development)
 - [Using HTTPS in Development](#using-https-in-development)
@@ -475,6 +476,92 @@ Please refer to these two threads for reference:
 
 Create React App will add decorator support when the specification advances to a stable stage.
 
+## Fetching AJAX Requests
+
+This project includes a [fetch polyfill](https://github.com/github/fetch), which makes it easier to make web requests.
+
+The global `fetch` function allows to easily makes AJAX requests. It takes in a URL as an input and returns a `Promise` that resolves to a `Response` object. You can find more information about `fetch` [here](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch).
+
+
+__About Promises:__ This project also includes a [Promise polyfill](https://github.com/then/promise) which provides a full implementation of Promises/A+. A Promise represents the eventual result of an asynchronous operation, you can find more information about Promises [here](https://www.promisejs.org/) and [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
+
+You can make a GET request like this:
+```javascript
+import React, { Component } from 'react';
+
+class App extends Component {
+  constructor(props) {
+    super(props)
+    this.state = { repos: [] };
+  }
+
+  componentDidMount() {
+    this.fetchRepos(this.props.user);
+  }
+
+  fetchRepos(user) {
+    fetch(`https://api.github.com/users/${user}/repos`)
+      .then((response) => response.json())
+      .then((repos) => this.setState({ repos }))
+      .catch((error) => console.log('Error', error));
+  }
+
+  render() {
+    return (
+      <ul>
+        {this.state.repos.map((repo) => (
+          <li key={repo.full_name}>
+            <a href={repo.html_url}>{repo.full_name}</a>
+          </li>
+        ))}
+      </ul>
+    );
+  }
+}
+
+export default App;
+```
+
+You can also use the `async/await` syntax to fetch data. [Here](https://zeit.co/blog/async-and-await) is an introduction to it.
+```javascript
+import React, { Component } from 'react';
+
+class App extends Component {
+  constructor(props) {
+    super(props)
+    this.state = { repos: [] };
+  }
+
+  componentDidMount() {
+    this.fetchRepos(this.props.user);
+  }
+
+  async fetchRepos(user) {
+    try {
+      const response = await fetch(`https://api.github.com/users/${user}/repos`);
+      const repos = await response.json();
+      this.setState({ repos });
+    } catch(error) {
+      console.log('Error', error);
+    }
+  }
+
+  render() {
+    return (
+      <ul>
+        {this.state.repos.map((repo) => (
+          <li key={repo.full_name}>
+            <a href={repo.html_url}>{repo.full_name}</a>
+          </li>
+        ))}
+      </ul>
+    );
+  }
+}
+
+export default App;
+```
+
 ## Integrating with a Node Backend
 
 Check out [this tutorial](https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/) for instructions on integrating an app with a Node backend running on another port, and using `fetch()` to access it. You can find the companion GitHub repository [here](https://github.com/fullstackreact/food-lookup-demo).