React Form Integration with Spring Boot REST API

-

Introduction:

In modern web development, React is commonly used for frontend applications, while Spring Boot is widely used for backend REST APIs. In this tutorial, we will learn how to integrate a React form with a Spring Boot backend and send form data using REST API calls.

This guide is beginner-friendly and helps understand frontend-backend communication in Full Stack Development.

Technologies Used :

Frontend:

  • React.js

  • HTML5

  • CSS3

  • JavaScript

  • Axios

Backend:

  • Java Spring Boot

  • REST API

  • PostgreSQL

Create Spring Boot Backend

First, create a Spring Boot project using Spring Initializr.

Required Dependencies

  • Spring Web

  • Spring Data JPA

  • PostgreSQL Driver

  • Lombok

Create Entity Class

@Entity
public class Employee {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String name;
    private String email;

    // getters and setters
}

Create Repository

@Repository
public interface EmployeeRepository extends JpaRepository<Employee, Long> {

}

Create REST Controller

@RestController
@RequestMapping("/api/employees")
@CrossOrigin(origins = "http://localhost:3000")
public class EmployeeController {

    @Autowired
    private EmployeeRepository repository;

    @PostMapping
    public Employee saveEmployee(@RequestBody Employee employee) {
        return repository.save(employee);
    }
}

Create React Frontend

npx create-react-app react-form-app

Install Axios:

npm install axios

Create React Form Component

import React, { useState } from 'react';
import axios from 'axios';

function EmployeeForm() {

  const [employee, setEmployee] = useState({
    name: '',
    email: ''
  });

  const handleChange = (e) => {
    setEmployee({
      ...employee,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    await axios.post(
      'http://localhost:8080/api/employees',
      employee
    );

    alert("Employee Saved Successfully");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        placeholder="Enter Name"
        onChange={handleChange}
      />

      <input
        type="email"
        name="email"
        placeholder="Enter Email"
        onChange={handleChange}
      />

      <button type="submit">
        Save
      </button>
    </form>
  );
}

export default EmployeeForm;

Run the Application :

Start Spring Boot Backend

mvn spring-boot:run

Start React Frontend

npm start

Frontend:

http://localhost:3000

Backend:

http://localhost:8080

Output :

When the user enters details in the React form and clicks the Save button, the data will be stored in the PostgreSQL database through the Spring Boot REST API.

Conclusion :

In this tutorial, we successfully integrated a React frontend form with a Spring Boot backend REST API. This is one of the most important concepts in Full Stack Java Development.


For More: https://sulochanabasavala.blogspot.com/

Next Article : https://sulochanabasavala.blogspot.com/2026/05/jwt-authentication-using-react-and.html

Tags:

React.js, Spring Boot, REST API, PostgreSQL, Full Stack Development, Java, React Form Integration

Happy Learning....

Location: India

Comments

Post a Comment

Popular posts from this blog

React Basics – How to Create Component

-
  Introduction (Story) : When I started learning React, I was confused about how components actually work. I saw many examples, but things became clear only when I created my own first component. In this blog, I will explain how to create a simple React component step by step in an easy way. What is a Component in React? A component is a reusable piece of UI in React. It helps in breaking the application into smaller, manageable parts. Tools Required : Node.js React (Create React App / Vite) VS Code  Step 1: Create React App : Run the following command: Where you want create the react project, then we have to create new folder and there you can open the cmd and run below command npx create-react-app my-app Navigate to project folder: cd my-app npm start Step 2: Create Your First Component Create a file named Hello.js import React from 'react' ; function Hello () { return <h1> Hello, Welcome to React! </h1> ; } export default Hello ; Step 3: ...
Read more

How to Build REST API using Spring Boot (Step-by-Step Guide)

-
Introduction  (Story + Experience)  : When I started learning Spring Boot, I found REST APIs a bit confusing. I watched multiple tutorials, but I didn’t fully understand how backend systems actually work. Things became clear when I tried building a simple REST API on my own. In this blog, I will share the same step-by-step process that helped me understand REST APIs in a practical way. What is REST API? A REST API allows communication between frontend and backend systems using HTTP methods like GET, POST, PUT, and DELETE. In real-world applications, REST APIs are used to send and receive data between client and server. Tools Required  : - Java - Spring Boot - IntelliJ / VS Code - Postman Step 1: Create Spring Boot Project  : Go to Spring Initializr and create a project with the following dependencies: - Spring Web - Spring Data JPA - PostgreSQL Driver Step 2: Create Controller  : @RestController @RequestMapping("/api") public class HelloController {   ...
Read more

Spring Boot @RequestParam Annotation Explained with Real-Time Examples

-
Image
 Introduction : As a Java Full Stack Developer, I have worked on several Spring Boot applications where APIs needed to receive data from users. One annotation that I frequently used in REST APIs is @RequestParam . In many real-world applications, users need to search, filter, sort, or paginate data. For example, an employee management system may allow users to search employees by department, status, or employee ID. In such cases, @RequestParam provides a simple and efficient way to pass data from the client to the server through URL query parameters. When I started learning Spring Boot, I often got confused between @RequestParam , @PathVariable , and @RequestBody . However, after working on multiple projects, I understood the purpose of each annotation and when to use them effectively. In this article, I will explain the @RequestParam annotation with practical examples, project use cases, common mistakes, best practices, and interview questions. What is @RequestParam? The @Reques...
Read more