A full stack application has two major parts: the frontend that users interact with and the backend that processes requests, manages business logic and communicates with databases.
React is commonly used to build interactive frontend interfaces, while Spring Boot helps Java developers create backend applications and REST APIs.
But how do these technologies work together?
In this tutorial, you will build a simple React application that fetches data from a Spring Boot REST API and displays it on the screen.
Understanding React and Spring Boot Integration
React and Spring Boot can communicate through HTTP requests.
The process works like this:
- A user opens the React application.
- React sends a request to the Spring Boot backend.
- Spring Boot processes the request.
- The backend returns JSON data.
- React displays the result.
For example, an online learning platform might use React to display available courses while Spring Boot retrieves course information from a database.
Our sample project will demonstrate the same basic workflow using a small, fixed dataset.
What You Need Before Starting
Install or prepare:
- Java JDK compatible with your chosen Spring Boot version
- Node.js and npm
- A Java IDE such as IntelliJ IDEA or VS Code
- A code editor for React
- Basic knowledge of JavaScript and Java
You should also understand the difference between GET and POST requests.
Step 1: Create a Spring Boot Project
Open Spring Web.
Configure a new project with Java, Maven and a compatible Spring Boot version.
Add the Spring Web dependency.
Generate the project, extract it and open it in your Java IDE.
Spring Boot will handle the HTTP endpoint that React calls.
Step 2: Create a REST Controller
Inside the Java application's package, create a file named CourseController.java.
Add the following code, replacing the package name with your own if necessary:
package com.example.demo;
import java.util.List;
import java.util.Map;
import org.springframework.web.bind.annotation.*;
@RestController
@RequestMapping("/api/courses")
@CrossOrigin(origins = "http://localhost:5173")
public class CourseController {
@GetMapping
public List<Map<String, String>> getCourses() {
return List.of(
Map.of("id", "1", "name", "Java"),
Map.of("id", "2", "name", "React"),
Map.of("id", "3", "name", "SQL")
);
}
}
The @RestController annotation tells Spring Boot that this class handles HTTP requests.
@GetMapping creates a GET endpoint, while @CrossOrigin allows requests from the local React development server.
This CORS setting is intended for development. Production origins should be explicitly configured based on the deployed application's requirements.
Step 3: Run the Spring Boot Backend
Start the application from your IDE or with the Maven wrapper provided by the generated project.
Once it starts successfully, open:
http://localhost:8080/api/courses
You should receive JSON similar to:
[
{"id":"1","name":"Java"},
{"id":"2","name":"React"},
{"id":"3","name":"SQL"}
]
This response confirms that the endpoint is available.
If the request fails, check the application logs, port configuration and Java version.
Step 4: Create the React Application
Open a terminal and run:
npm create vite@latest course-frontend -- --template react
cd course-frontend
npm install
npm run dev
Vite creates a React development project.
Its default development server typically runs at http://localhost:5173, although it may select another port if that address is unavailable.
If the port changes, update the allowed origin in Spring Boot.
Step 5: Fetch Backend Data in React
Open src/App.jsx and replace the starter component with:
import { useEffect, useState } from "react";
function App() {
const [courses, setCourses] = useState([]);
const [error, setError] = useState("");
useEffect(() => {
fetch("http://localhost:8080/api/courses")
.then((response) => {
if (!response.ok) {
throw new Error("Could not load courses");
}
return response.json();
})
.then((data) => setCourses(data))
.catch((err) => setError(err.message));
}, []);
return (
<main>
<h1>Available Courses</h1>
{error && <p role="alert">{error}</p>}
<ul>
{courses.map((course) => (
<li key={course.id}>{course.name}</li>
))}
</ul>
</main>
);
}
export default App;
The useEffect hook triggers the API request after the component renders.
The fetch() function sends an HTTP GET request to the Spring Boot backend.
The response is converted into JavaScript data and saved in React state using setCourses().
Whenever the state changes, React updates the user interface.
Step 6: Test the Full Stack Application
Keep both servers running and open the React application in your browser.
The page should display:
Available Courses
Open the browser's developer tools and navigate to the Network tab.
Refresh the page and inspect the request to /api/courses.
Check the request URL, response status and returned JSON.
This is useful when troubleshooting integration issues.
Common Errors and Their Solutions
CORS Error
If React and Spring Boot run on different origins, the browser enforces CORS rules.
Ensure the backend permits the correct frontend origin.
Avoid enabling unrestricted origins without understanding the security implications.
Failed to Fetch
Check whether the Spring Boot server is running and whether the endpoint URL is correct.
Also check the browser's Network and Console panels.
Incorrect JSON Structure
React must use property names that match the API response.
For example, if the backend returns name, your component should access course.name, not course.title.
Backend Port Conflict
If another application is using port 8080, configure Spring Boot to use a different port and update the React API URL.
How to Turn This into a Portfolio Project
Once the basic application works, you can improve it by adding:
- A MySQL database
- Course search functionality
- CRUD operations
- Form validation
- Authentication and authorization
- Automated tests
- Deployment to a hosting platform
Document the architecture and explain how the frontend communicates with the backend.
A complete, tested project demonstrates considerably more than knowing the definitions of React or Spring Boot.
Frequently Asked Questions
1. Can React work with a Java backend?
Yes. React can communicate with a Java backend through HTTP APIs, including REST APIs created using Spring Boot.
2. Is Spring Boot a frontend or backend technology?
Spring Boot is primarily used to build backend applications and services in Java.
3. Do I need MySQL to connect React with Spring Boot?
No. You can begin with fixed or in-memory data. A database becomes useful when the application needs persistent storage.
4. Why do I get a CORS error?
A CORS error can occur when the browser sends a cross-origin request that the backend has not permitted.
5. Is React with Spring Boot suitable for a fresher project?
Yes. It can demonstrate API integration, frontend development, backend programming and application architecture.
Conclusion
Connecting React with Spring Boot is an important full stack development skill. It helps developers understand how user interfaces exchange data with backend services.
Start with a simple GET API, understand the complete request-response cycle and gradually introduce a database, authentication, testing and deployment.
To explore these technologies through guided projects, visit Itvedant's Java Full Stack Development Course.