How to Consume REST API in React

Author:

To consume REST API in React, you can use the fetch API, Axios, or other similar HTTP JavaScript libraries.

Let's first create a simple REST API using Spring Boot and then we will see how to consume Spring boot REST API in a React App using the Axios library.

Build Simple Spring Boot REST API

1. Creating spring boot application using spring initializr 

Spring Boot provides a web tool called https://start.spring.io to bootstrap an application quickly. 

Just go to https://start.spring.io and generate a new spring boot project. Use the below details in the Spring boot creation: 

Project Name: springboot-first-app 

Project Type: Maven 

Choose dependencies: Spring Web 

Package name: com.springboot.app

2. Spring Boot Hello World REST API

Let's create a HelloWorldController class and add below code to it:
package com.springboot.first.app;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloWorldController {
	
	// GET HTTP Method
	// http://localhost:8080/hello-world
	@GetMapping("/hello-world")
	public String helloWorld() {
		return "Hello World!";
	}
}
  • The above code uses Spring 4’s new @RestController annotation, which marks the class as a controller where every method returns a domain object instead of a view. It’s shorthand for @Controller and @ResponseBody rolled together.
  • @GetMapping annotation for mapping HTTP GET requests onto specific handler methods. Specifically, @GetMapping is a composed annotation that acts as a shortcut for @RequestMapping(method = RequestMethod.GET).

3. Run Spring Boot Application:

The below class SpringbootFirstAppApplication is the entry point that sets up the Spring Boot application. The @SpringBootApplication annotation enables auto-configuration and component scanning.

package com.springboot.first.app;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringbootFirstAppApplication {
	public static void main(String[] args) {
		SpringApplication.run(SpringbootFirstAppApplication.class, args);
	}
}

From your IDE, run the SpringbootFirstAppApplication.main() method as a standalone Java class that will start the embedded Tomcat server on port 8080 and point the browser to http://localhost:8080/. 

Just hit this link in a browser: http://localhost:8080/hello-world. You will able to see the response of this REST API in the browser.

Build React App to Consume Spring Boot REST API

1. Create a new React app

Open your terminal or command prompt and navigate to the directory where you want to create your React app. Run the following command to create a new React app using create-react-app:
npx create-react-app my-app
This command creates a new directory named my-app and sets up a basic React project structure inside it.

2. Navigate into the app directory

Move into the newly created app directory by running the following command:
cd my-app

3. Start the development server

Start the development server by running the following command in the terminal:
npm start
This command starts the development server and opens your React app in the browser. You should now see Bootstrap styles being applied to your app.

4. Install the Axios library

For our API calls, we will be using Axios. Below is the npm command to install Axios.

npm add axios --save

5. Consume REST API

Import the axios library in your React component where you want to consume the API:
import axios from 'axios'

Make an HTTP request to the API endpoint using Axios:
axios.get('http://localhost:8080/helloworld')
  .then(response => {
    // Process the response data
    console.log(response.data);
  })
  .catch(error => {
    // Handle any errors
    console.error(error);
  });
Use the received data in your React component as needed. You can set it in the component's state using useState, render it in JSX, or perform any other operations.

Comments

Post a Comment

Leave Comment