Building CRUD Applications with Spring Boot and React

Creating a full-stack application requires a seamless interaction between the backend and frontend to ensure smooth data operations. In this guide, we'll explore how to build a CRUD (Create, Read, Update, Delete) application using Spring Boot for the backend and React for the frontend. This combination allows developers to build powerful and scalable applications efficiently.

Step 1: Setting Up the Spring Boot Backend

Spring Boot simplifies backend development by providing built-in configurations and RESTful APIs. Start by creating a Spring Boot project with the following dependencies:

Spring Web for REST API creation

Spring Data JPA for database integration

H2 or MySQL as the database

Spring Boot DevTools for hot reloading

Creating the Model and Repository

Define an entity in Employee.java:

java

@Entity

@Table(name = "employees")

public class Employee {

    @Id

    @GeneratedValue(strategy = GenerationType.IDENTITY)

    private Long id;

    private String name;

    private String role;

}

Create a repository interface:

java

public interface EmployeeRepository extends JpaRepository<Employee, Long> {

}

Step 2: Implementing CRUD Operations in Spring Boot

Controller for CRUD Endpoints

java

@RestController

@RequestMapping("/employees")

public class EmployeeController {

    @Autowired

    private EmployeeRepository repository;

    @PostMapping

    public Employee create(@RequestBody Employee employee) {

        return repository.save(employee);

    }

    @GetMapping

    public List<Employee> getAll() {

        return repository.findAll();

    }

    @PutMapping("/{id}")

    public Employee update(@PathVariable Long id, @RequestBody Employee employee) {

        employee.setId(id);

        return repository.save(employee);

    }

    @DeleteMapping("/{id}")

    public void delete(@PathVariable Long id) {

        repository.deleteById(id);

    }

}

This controller enables CRUD operations through simple HTTP requests.

Step 3: Setting Up React for the Frontend

Create a React app and install Axios for API communication:

bash

npx create-react-app employee-app

cd employee-app

npm install axios react-router-dom

Step 4: Building the UI Components in React

Creating the Employee List Component

javascript

import React, { useState, useEffect } from "react";

import axios from "axios";

const EmployeeList = () => {

  const [employees, setEmployees] = useState([]);

  useEffect(() => {

    axios.get("http://localhost:8080/employees")

      .then(response => setEmployees(response.data))

      .catch(error => console.error(error));

  }, []);

  return (

    <div>

      <h2>Employee List</h2>

      <ul>

        {employees.map(emp => (

          <li key={emp.id}>{emp.name} - {emp.role}</li>

        ))}

      </ul>

    </div>

  );

};

export default EmployeeList;

Step 5: Handling Employee Creation and Updates

Adding an Employee Form

javascript

const handleSubmit = async (event) => {

  event.preventDefault();

  await axios.post("http://localhost:8080/employees", { name, role });

};

React handles user input and sends API requests to store employee data.

Final Thoughts

Combining Spring Boot for backend API management and React for frontend UI development makes building CRUD applications more efficient. With this setup, developers can create robust, scalable applications while ensuring a smooth data flow between frontend and backend. 

Learn FullStack Java Course in Hyderabad
Read More : Fullstack Java with Spring Boot: Best Practices for Exception Handling

Visit Our IHUB Talent Institute Hyderabad
Get Direction