How to Consume REST API in React

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

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.

Check out the complete CRUD example: CRUD Application using Spring Boot + React JS + MySQL

Related Tutorials

• React Hooks - useState and useEffect
• React JS ( React Hooks) + Spring Boot Tutorial
• Create a New React App Step by Step
• Understanding React App Folder Structure
• How to Add Bootstrap to React App
• ReactJS Axios GET, POST, PUT, and DELETE Example Tutorial
• ReactJS Axios Example
• ReactJS Fetch API Example
• React JS CRUD Example Tutorial
• React Router Step-By-Step Tutorial
• React Class Components
• React Functional Components
• React Props
• React State and setState in Class Components
• React useState Hook
• React Conditional Rendering
• How to Add Bootstrap in React JS Using NPM
• How to Create React App using Vite
• Handling Events in React
• How to Consume REST API in React
• React JS Form Validation Example