React JS vs Old Tools: What Changed for Java Developers

<!-- Old JSP approach — server renders the page
     users.jsp
     The server owns the HTML and iterates over users. -->

<%@ page import="java.util.List" %>
<%@ page import="com.example.User" %>

<% List<User> users = (List<User>) request.getAttribute("users"); %>

<html>
  <body>
    <h1>Users</h1>
    <ul>
      <% for (User u : users) { %>
        <li><%= u.getName() %> — <%= u.getEmail() %></li>
      <% } %>
    </ul>
  </body>
</html>

<!-- What this does well: simple, direct, one file. -->
<!-- What it lacks: no component reuse, no client-side state. -->


// React approach — the client renders the UI, the server supplies data
// UserList.jsx
// The component is reusable and can live anywhere in the app.

import { useEffect, useState } from "react";

export default function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("/api/users")
      .then((res) => res.json())
      .then(setUsers);
  }, []);

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((u) => (
          <li key={u.id}>
            {u.name} — {u.email}
          </li>
        ))}
      </ul>
    </div>
  );
}

// What changes for a Java developer:
// - You are no longer producing HTML on the server.
// - The component is a piece of UI, not a page.
// - Data arrives via an API, not via request attributes.
// - The same component can be reused anywhere in the app.

// Old jQuery approach — manual DOM updates, state spread across handlers
// The state is implied by the DOM. When it grows, it gets hard to follow.

$(document).ready(function () {
  let count = 0;

  $("#increment").on("click", function () {
    count++;
    $("#count").text(count);
    if (count > 5) $("#message").text("High count");
    else $("#message").text("");
  });
});

// What this does well: small, direct, no build step.
// What it lacks: state is scattered across the DOM and closures.


// React approach — state is explicit, the UI derives from it
// Counter.jsx

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  const isHigh = count > 5;

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      {isHigh && <p>High count</p>}
    </div>
  );
}

// What changes for a Java developer:
// - State is explicit and lives in one place.
// - The UI is a function of state, not a series of side effects.
// - No manual DOM manipulation.
// - Easier to test because the logic is plain JavaScript.

// Backend (Spring Boot) — you already know this part
// UserController.java

@RestController
@RequestMapping("/api/users")
public class UserController {

    private final UserService service;

    public UserController(UserService service) {
        this.service = service;
    }

    @GetMapping
    public List<UserDto> allUsers() {
        return service.findAll();
    }

    @GetMapping("/{id}")
    public UserDto user(@PathVariable Long id) {
        return service.findById(id);
    }
}


// Frontend (React) — this is what you add
// Users.jsx

import { useEffect, useState } from "react";

export default function Users() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("/api/users")
      .then((res) => {
        if (!res.ok) throw new Error("Failed to load users");
        return res.json();
      })
      .then(setUsers)
      .catch(setError)
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Could not load users.</p>;

  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

// What a Java developer should notice:
// - Your Spring Boot controller is unchanged.
// - The React component is a thin, reusable UI layer.
// - The contract between them is a JSON API — which you already know.
// - You are not rewriting your backend; you are adding a second frontend.