Scribd
Upload
12 views3 pages

Full Stack User List with Spring Boot

The document outlines a full stack application using React for the frontend and Spring Boot for the backend to display a list of users. The backend serves user data as JSON through a REST API, while the frontend fetches this data and renders it in a user-friendly format. The example includes code snippets for the User entity, UserController, and the React component that handles data fetching and display.

Uploaded by

bb9324985
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views3 pages

Full Stack User List with Spring Boot

The document outlines a full stack application using React for the frontend and Spring Boot for the backend to display a list of users. The backend serves user data as JSON through a REST API, while the frontend fetches this data and renders it in a user-friendly format. The example includes code snippets for the User entity, UserController, and the React component that handles data fetching and display.

Uploaded by

bb9324985
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

React + Spring Boot Full Stack Example

Project Overview
Goal: Display a list of users fetched from backend

Frontend: React (calls API)

Backend: Spring Boot (serves JSON)

Backend: Spring Boot (Java)


1. [Link] (Entity Class)

public class User {

private int id;

private String name;

public User(int id, String name) {

[Link] = id;

[Link] = name;

public int getId() { return id; }

public String getName() { return name; }

2. [Link]
@RestController

@CrossOrigin(origins = "[Link]

public class UserController {

@GetMapping("/users")

public List<User> getUsers() {

return [Link](

new User(1, "Bala"),

new User(2, "Ajay"),


React + Spring Boot Full Stack Example

new User(3, "Divya")

);

Frontend: React
1. React Component ([Link])

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

function App() {

const [users, setUsers] = useState([]);

useEffect(() => {

fetch("[Link]

.then((res) => [Link]())

.then((data) => setUsers(data));

}, []);

return (

<div>

<h2>User List</h2>

<ul>

{[Link]((user) => (

<li key={[Link]}>{[Link]}</li>

))}

</ul>

</div>

);

}
React + Spring Boot Full Stack Example

export default App;

Result
Spring Boot sends user data (JSON)

React fetches it and displays on browser

You might also like