Building a Reactive Framework with React.js and Spring WebFlux

1. Introduction

This document outlines the implementation of a reactive framework using React.js for the front end and Spring WebFlux for the back end. The approach ensures non-blocking, high-performance applications suitable for real-time systems.

2. Backend: Spring WebFlux Implementation

2.1 Dependencies (Maven)

<dependencies>

    <dependency>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-webflux</artifactId>

    </dependency>

    <dependency>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-data-r2dbc</artifactId>

    </dependency>

    <dependency>

        <groupId>org.postgresql</groupId>

        <artifactId>r2dbc-postgresql</artifactId>

    </dependency>

</dependencies>

2.2 Define the Model

import lombok.Data;

import org.springframework.data.annotation.Id;

import org.springframework.data.relational.core.mapping.Table;

@Data

@Table("employees")

public class Employee {

    @Id

    private String id;

    private String name;

    private double salary;

}

2.3 Create Reactive Repository

import org.springframework.data.repository.reactive.ReactiveCrudRepository;

import reactor.core.publisher.Flux;

public interface EmployeeRepository extends ReactiveCrudRepository<Employee, String> {

    Flux<Employee> findBySalaryGreaterThan(double salary);

}

2.4 Implement Reactive Service

import org.springframework.stereotype.Service;

import reactor.core.publisher.Flux;

@Service

public class EmployeeService {

    private final EmployeeRepository repository;

    public EmployeeService(EmployeeRepository repository) {

        this.repository = repository;

    }

    public Flux<Employee> getAllEmployees() {

        return repository.findAll();

    }

}

2.5 Define the Controller

import org.springframework.web.bind.annotation.*;

import reactor.core.publisher.Flux;

@RestController

@RequestMapping("/employees")

public class EmployeeController {

    private final EmployeeService service;

    public EmployeeController(EmployeeService service) {

        this.service = service;

    }

    @GetMapping

    public Flux<Employee> getAllEmployees() {

        return service.getAllEmployees();

    }

}

3. Frontend: React.js Implementation

3.1 Install Dependencies

npx create-react-app reactive-frontend

cd reactive-frontend

npm install axios

3.2 Fetch Data Using React Hooks

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

import axios from "axios";

const EmployeeList = () => {

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

    useEffect(() => {

        const fetchEmployees = async () => {

            try {

                const response = await axios.get("http://localhost:8080/employees");

                setEmployees(response.data);

            } catch (error) {

                console.error("Error fetching employees", error);

            }

        };

        fetchEmployees();

    }, []);

    return (

        <div>

            <h2>Employee List</h2>

            <ul>

                {employees.map((emp) => (

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

                ))}

            </ul>

        </div>

    );

};

export default EmployeeList;

3.3 Integrate Component into App

import React from "react";

import EmployeeList from "./EmployeeList";

function App() {

    return (

        <div>

            <h1>Reactive Employee Dashboard</h1>

            <EmployeeList />

        </div>

    );

}

export default App;

4. Running the Application

Start Backend:

mvn spring-boot:run

Start Frontend:

npm start

5. Key Benefits of Reactive Framework

✅ Non-blocking Backend – Uses Spring WebFlux for high performance.

✅ Efficient Frontend – React.js fetches and updates UI reactively.

✅ Real-time Updates – Can be extended with WebSockets / SSE.