Use React and Spring Boot to Build a Simple CRUD App

React was designed to make it painless to create interactive UIs. Its state management is efficient and only updates components when your data changes. Component logic is written in JavaScript, meaning you can keep state out of the DOM and create encapsulated components.

Developers like CRUD (create, read, update, and delete) apps because they show a lot of the base functionality you need when creating an app. Once you have the basics of CRUD completed in an app, most of the client-server plumbing is finished, and you can move on to implementing the necessary business logic.

Today, I’ll show you how to create a basic CRUD app with Spring Boot and React. In this tutorial, I’ll use the OAuth 2.0 Authorization Code flow and package the React app in the Spring Boot app for production. At the same time, I’ll show you how to keep React’s productive workflow for developing locally.


This is a companion discussion topic for the original entry at https://developer.okta.com/blog/2022/06/17/simple-crud-react-and-spring-boot

Hello Matt, Thanks for the very nice tutorial for frontend beginners like me. I did a clone of the repo, everything is working but i have noticed a slight issue. In the first section of the article w/o Okta, the data that were pre-populated with our Spring Boot were nicely displayed on the react front end. On the second section which we have enabled the Okta code, on successfully authenticated, these pre-populated data do not appear on the front end. When i attemptted to create a new event, the event id is 6 (which means the pre-populated data exist but react is not showing)

I am using Java 18.0.2.1 and node v16.18.0. There are no errors on the console.

Hi Melvin,

This is because in the first part of the tutorial, there is no filter on the /groups endpoint:

@GetMapping("/groups")
Collection<Group> groups() {
    return groupRepository.findAll();
}

After adding Okta, the groups list is filtered by user:

@GetMapping("/groups")
Collection<Group> groups(Principal principal) {
    return groupRepository.findAllByUserId(principal.getName());
}

If you change it back to the previous groupRepository.findAll(), you’ll see all the groups. Please let me know if this answers your question.

Its working now. Thanks for the great help !