Scribd
Upload
6 views3 pages

React SpringBoot FullStack Example

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
6 views3 pages

React SpringBoot FullStack Example

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
You are on page 1/ 3

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. User.java (Entity Class)

public class User {

private int id;

private String name;

public User(int id, String name) {

this.id = id;

this.name = name;

public int getId() { return id; }

public String getName() { return name; }

2. UserController.java
@RestController

@CrossOrigin(origins = "http://localhost:3000")

public class UserController {

@GetMapping("/users")

public List<User> getUsers() {

return Arrays.asList(

new User(1, "Bala"),

new User(2, "Ajay"),


React + Spring Boot Full Stack Example

new User(3, "Divya")

);

Frontend: React
1. React Component (App.js)

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

function App() {

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

useEffect(() => {

fetch("http://localhost:8080/users")

.then((res) => res.json())

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

}, []);

return (

<div>

<h2>User List</h2>

<ul>

{users.map((user) => (

<li key={user.id}>{user.name}</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