We want to start using the API to fetch the todo details and use the API to insert a todo. Axios is a popular framework that is used to make RESTful API calls from React applications. Some important features of the axios framework are as follows:

• Making RESTful API calls from the browser
• Request and response interception
• Transformation of JSON data
• Protection against XSRF attacks

You can stop the todo React application and add axios by executing the npm add axios command at the Command Prompt. package.json reflects the new framework added in—axios:

"dependencies": {
 "axios": "^0.18.0",
 "react": "^16.8.6",
 "react-dom": "^16.8.6",
 "react-scripts": "3.0.0"
 },

Let's start by populating the initial list of todos from the RESTful API. We will create a TodoDataService class to interact with the RESTful API using axios. The implementation for the GET call to get todo details for a user—http://localhost:8080/users/Jack/todos—is shown in the following:

import axios from 'axios'

const TODO_API_ROOT = 'http://localhost:8080'

class TodoDataService {
    retrieveAllTodos(name) {
        return axios.get(`${TODO_API_ROOT}/users/${name}/todos`);
    }
}

export default new TodoDataService()

We are doing axios.get to the URL to execute a GET request. We are creating new TodoDataService() and exporting it for use from TodoComponent. In TodoComponent, we want to call retrieveAllTodos when the page loads.

React defines a number of life cycle methods for components. The most important among them is componentDidMount, which is called as soon as a component is mounted onto the page.

The implementation is shown in the following:

componentDidMount() {
    this.refreshTodos();
}

refreshTodos() {
    TodoDataService.retrieveAllTodos(HARDCODED_USER_NAME)
        .then(
            response => {
                this.setState((prevState) => {
                    return {
                        todos: response.data
                    };
                });

            }
        )
}

We are calling retrieveAllTodos and using the response to update todos in state using the setState method:

When you launch up the RESTful API and refresh the browser again, you will see an error:

Access to XMLHttpRequest at 'http://localhost:8080/users/Jack/todos' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Spring Boot, by default, provides CORS (Cross-Origin Request) protection. It does not allow API requests from other origins or URLs.

To enable requests from the frontend, we need to allow cross-origin requests from http://localhost:3000—the URL of the React application. We can do that using the @CrossOrigin annotation:

@RestController
@CrossOrigin("http://localhost:3000")
public class TodoController {

When you restart the RESTful API and reload the todo application in the browser, you see the todos from API on the screen. The page is displayed as follows:

You can see the details of the RESTful API call made by the frontend application in the browser Network tab: