-

Hello Prodos, let’s present a Product {this.state.user}
;
   }
}
Similarly, you can test other React component lifecycle methods.
Conclusion
In this chapter, we learned a lot of things related to the React libraries. Still, there are more you can learn about React, but in this chapter, we
discussed all the related things that are required for our Prodos front-end application.
We created several React components which we are going to use to build our front-end application. We discussed the basic of JSX, React
components, props, and state. We learned how to handle a list and how to iterate a list using the React component and also learned about the
stateful and stateless React components. We learned how to handle events in React and how to handle a form in the React-based front-end
application.
In the next Chapter 9: Consuming the REST API with React JS Application , we will discuss how to consume the created REST services using the
React front-end application.
Questions

---

What is JSX?
What is a React component?
How to create a React component using JSX?
How to provide styling to React components?
Explain data flow in React components.
Explain event flow in React components.
How to use multiple React components within a View?
What is a stateless React component?
What is a stateful React component?
How to handle a list in a React component?
How to handle an event in a React component?
How to handle a form in a React Components?
What are all React component life cycle methods?
Which method is suitable for making a REST call in life cycle of React components?
Chapter 9
Consuming REST API with React
In the previous chapter, we discussed React and its basic features such as JSX, React components, state, props, and how to create a stateless
and stateful React component. We created our Prodos front-end application using React. And we rendered various React components to design a
front-end application.
We worked with the events handling with React and iterated a list in the React component to display a list of data in the table format. We also
created a form to create a product using the Prodos front-end application. But whatever we rendered that was hardcoded in the application. But in
an actual live project, hard coding kills the application. So in this chapter, we will consume REST APIs with the React JS application we created in
the previous chapter.
This chapter will provide a quick overview of consuming the REST API using the React application. You will learn how to consume REST APIs using
the React front-end application.
In this chapter, we will discuss the following topics:
Using REST services in a React application
Using the REST services with the Fetch API
o Fetching data using the Fetch API
o Posting data using the Fetch API
o Editing data using the Fetch API
o Deleting data using the Fetch API
Using third-party React components
Using REST services in a React application
In previous chapters, we created a Prodos backend application. It provides REST APIs to fetch data for the React-based front-end application. In
the Prodos backend application, we implemented security as well to access the REST APIs with basic authentication and JWT token-based
security.
But as of now, we will not use Spring security, so we have to disable Spring security in the Prodos backend application. We will enable it later in this

---

chapter. We will use the Prodos application REST APIs with Spring security. Let’s run the Prodos backend application and access the list of
products listed with the Prodos application:
http://localhost:8080/api/products
This preceding REST API will return a list of the products in the JSON format as shown in the following screenshot:
Fig 9.1: REST API response
As you can see in the preceding screenshot, the REST API http://localhost:8080/api/ products has returned the product list as a resource in the
JSON format. In our front-end application, we will use this REST API and render this product list in the web browser. We will discuss how to fetch
the REST APIs using React JS in the next section.
Using the REST services with the Fetch API
In the React front-end application, you can use the Fetch API to make a web request to the API server. The Fetch API supports the API and it is
very straightforward to use in the React front-end application. The Fetch API has a fetch() method and this method is used to call a remote
resource using a REST API. The fetch() method has one mandatory argument that is the path URI of the resource you want to fetch in your React
front-end application.
Let’s method and this REST API returns a JSON response:
//define fetch() method to make a server call in the React
fetch(‘ http://yourapi.com ’)
   .then(response => response.json())
   .then(responseData => console.log(responseData));

---

   .catch(error => console.error(error))
In the preceding code, we are using the fetch() method which returns a promise that contains the response. Now, we can use the json() method to
parse the JSON body from the response.
We can also make an HTTP call with the POST method using the fetch() method of the Fetch API, but in this case, you need to pass another
argument to the fetch() method of the Fetch API. The second argument is the object where we can define multiple request settings such as HTTP
methods, headers, content type, mode, and more. Let’s see the following code:
//define fetch() method to make a server call with POST method in the React
fetch(‘ http://yourapi.com ’,
{
   method: ‘POST’ })
.then(response => response.json())
.then(responseData => console.log(responseData))
.catch(error => console.error(error));
In the preceding code, we defined only the HTTP POST method as the second argument in the fetch() method of the Fetch API. Let’s move ahead
and see how to define other important attributes to make a web request.
Now, we will add headers inside the second argument. Let’s see the following fetch() code which contains the ‘Content-Type’ : ‘application/json’
header:
//define fetch() method to make a server call with POST method and by setting content type as application/json in the React
fetch(‘ http://yourapi.com ’,
{
method: ‘POST’,
   headers:{
‘Content-Type’: ‘application/json’
   }
})
.then(response => response.json())
.then(responseData => console.log(responseData))
.catch(error => console.error(error));
Now, if we want to send data to the server, then we have to send this data using the JSON-encoded inside the request body as shown in the
following code:
//define fetch() method to make a server call with POST method and by setting content type as application/json with request body data in the React
fetch(‘ http://yourapi.com ’,
{
method: ‘POST’,
   headers:{
   ‘Content-Type’: ‘application/json’
   },

---

body: JSON.stringify(data)
}
.then(response => response.json())
.then(responseData => console.log(responseData))
.catch(error => console.error(error));
In the preceding code, we are sending the data using the request body in the JSON format. We have set a header as the content type
application/json. Let’s implement the Fetch API in our Prodos front-end application.
Fetching data using the Fetch API
As we created the ProdosTable.js file for the ProdosTable React component, let us open the ProdosTable.js file and see the code that we created
to render, which will be fetched from the REST API http://localhost:8080/api/products :
import React, { Component } from ‘react’;
class ProdosTable extends Component {
   render() {
   return (