React Fetch from Server

In this tutorial, you will incorporate Fetch into your React app and then use it to communicate with the REST API server. At the end of this tutorial, you will be able to:

• Incorporate Fetch into your React app
• Use Fetch to communicate with the REST API server

Fetch

• As a first step, let us install Fetch into our project as follows:
$ npm install cross-fetch --save

• Now that we have installed Fetch, let us configure your application to connect to the server. First, create a file named baseUrl.js in the shared folder and add the following to it:

• Make sure that the json-server is running and serving up the data as illustrated in the previous exercise

• Next, open ActionTypes.js and add the following:

• Then, open ActionCreators.js and update it as follows:

• Next, open comments.js and update it as follows:

• Similarly, open promotions.js and update it as follows:

• Now that the Redux actions are all updated, it's time to update the components.

• Open MainComponent.js and update it as follows:

• Then, open MenuComponent.js and update it as follows:

• Then, open HomeComponent.js and update it as follows:

• Then, open DishdetailComponent.js and update it as follows:

(source: Front-End Web Development with React on Coursera)