Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add docs for using Promises and making AJAX requests #531

Closed
wants to merge 9 commits into from
28 changes: 28 additions & 0 deletions template/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ You can find the most recent version of this guide [here](https://github.com/fac
- [Adding Custom Environment Variables](#adding-custom-environment-variables)
- [Integrating with a Node Backend](#integrating-with-a-node-backend)
- [Proxying API Requests in Development](#proxying-api-requests-in-development)
- [Using Promises](#using-promises)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let’s make this one section: Fetching AJAX Requests. Let’s also put it before Integrating with a Node Backend.

- [AJAX Requests](#ajax-requests)
- [Adding `<meta>` Tags](#adding-meta-tags)
- [Deployment](#deployment)
- [Now](#now)
Expand Down Expand Up @@ -504,6 +506,32 @@ If the `proxy` option is **not** flexible enough for you, alternatively you can:
* Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)).
* Use [environment variables](#adding-custom-environment-variables) to inject the right server host and port into your app.

## Using Promises

This project 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).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let’s make this go right after previous sentence without a paragraph break in between.


## AJAX Requests

This project includes a [fetch polyfill](https://github.com/github/fetch), which makes it easier to make web requests.

The `fetch` function allows to easily makes AJAX requests. It takes in a url or a Request 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).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

url -> URL
we can omit “or a Request”
Promise and Response should be in backticks for formatting
There is an unnecessary double space before ”here”


While you can still use `new XMLHttpRequest`, we encourage you to use `fetch`.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let’s not mention XMLHttpRequest at all, people don’t know what it is today


You can make a GET request like this:
```javascript
fetch('/todos.json') // Make the request
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

People will think local files are being served this way. Can we change this to be an actual open API?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 I went for something similar to https://facebook.github.io/react/tips/initial-ajax.html I hope that is fine :)

.then(function(response) {
return response.json(); // Parse the JSON response (optional)
}).then(function(todos) {
console.log('Todos', todos); // Handle success
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let’s show how to call this.setState() here instead. And let’s make this be componentDidMount() function.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 I decided to add fetchGists instead of adding async componentDidMount() to make it easier to read, I hope that is fine :)

}).catch(function(error) {
console.log('Error', error); // Handle error
});
```

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let’s also show a separate block below demonstrating the same code but using async / await syntax and linking to a good introduction to it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

## Adding `<meta>` Tags

You can edit the generated `index.html` and add any tags you’d like to it. However, since Create React App doesn’t support server rendering, you might be wondering how to make `<meta>` tags dynamic and reflect the current URL.
Expand Down