Use React and Spring Boot to Build a Simple CRUD App

Matt Raible

I’d suggest asking this question on Stack Overflow and tagging it with “reactjs”. It’s out of the scope of this tutorial. You could also checkout JHipster. There’s tutorials on this site that show you how to generate React UIs with JHipster.

Marcin Koziarski

After installing lompok jar:
- restart eclipse
- remove existing project from eclipse (this step made it working for me).
- build using maven (outside eclipse)
- import project to eclipse again

Hernán J. González

Good tutorial, thanks.
A few issues I had and how I solved them (using Windows, Spring Boot 2.1.2, node 10.15.1, yarn 1.13.0)

The request
http PUT :8080/api/group/6 name=‘Dublin JUG’ city=Dublin country=Ireland address=Downtown
does not work for me (and logs a misleading “Request method ‘PUT’ not supported” error message).
The id should go not in the url but in the object data:
http PUT :8080/api/group id=6 name=“Dublin JUG” city=Dublin country=Ireland address=Downtown

(and the double quotes are Windows friendly)

Also, I got the error “react_popper not found”
Fixed by changing
yarn add bootstrap@4.1.3 react-cookie@3.0.4 react-router-dom@4.3.1 reactstrap@6.5.0
to
yarn add bootstrap react-cookie react-router-dom reactstrap

フェルナンデズ レミヒョ

Good tutorial, thanks.
Now I can get IdToken, but how get I the AccessToken,
I need this token for validationn in my others microservices.

Matt Raible

If you’re using WebClient, you can see the Reactive WebClient documentation. I’m not sure how to get the access token directly. You might try searching on Stack Overflow.

フェルナンデズ レミヒョ

Thanks, I used OAuth2AuthorizedClientService for get the AccessToken.
You used this in https://developer.okta.com/…

sneijder10 hagi

Hi.Thank you very much for this tutorial.I have a question about react.Why do we use this line in GroupList.js

this.remove = this.remove.bind(this);

I deleted this line.It is still working.Can we use bind method in same component?

Matt Raible

I think you’re right - it’s probably not needed. The reason is because the button has an onClick that invoked it as a method:


onClick={() => this.remove(group.id)}

Because you’re binding it in the constructor, you could simplify the onClick handler to be onClick={this.remove(groupId)}. According to React’s Handling Events documentation, the “bind” syntax is necessary to make this work in the callback.

ashebby

Hi, following this tut I have setup my app differently whereby my application is split into two different project folders client/server.
Regarding login redirect in prod environment, how do I config controller as it throws a servlet exception ie. “Could not resolve view with name ‘redirect:/’”

Matt Raible

Are you deploying them on two different domains too? If you’re packaging them in the same app (as this tutorial shows), you could simply change the redirect to go to the location of your app. If you’re deploying them separately, you could probably remove the RedirectController and remove @Profile(“dev”) from the RequestCache bean. That way, it’d redirect back to your app rather than relying on the redirect.

James Brake

I am having the biggest problems with the event.builder() and have tried all of your options and reinstalled my entire Intellij. Any suggestions? Error(2,20) java: package javafx.event does not exist

Matt Raible

It looks like you have a bad import. There’s no JavaFX code in this post. Also, you might need to install the Lombok plugin for IntelliJ. If you do it from the command line (with Maven), it should work since there’s a plugin that does annotation processing.

You can also compare your code to this post’s GitHub repo.

James Brake

I have uninstalled and reinstalled the Lombok plugin for Intellij multiple times and annotation processing is turned on. I’ve switched my Java version to 8 on everything in the IDE. What is the the command to install Lombok from the command line?

Matt Raible

There’s no command to install Lombok on the command line. Maven will detect Lombok in your classpath and process the annotations for you. You just need to run the following (after fixing your import):


./mvnw spring-boot:run

James Brake

So I fixed the imports but still have the error under builder() and setEvents
When I run maven I keep getting this error and I have check all areas and I have 1.8.0_201 installed and set https://uploads.disquscdn.c…

Matt Raible

Looks like a Java / Maven issue. I’d search for the error on stackoverflow.com.

jubbsy1

Hi. Why are you creating a Collections SingletonSet?

redi ramaj

When i try too execute the spring application after the security configurations i get the following errors:


org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name ‘securityConfiguration’: Unsatisfied dependency expressed through method ‘setContentNegotationStrategy’ parameter 0;

Matt Raible

I’m not sure I understand your question. Are you suggesting that I refactor the code to make it better? If so, how?

Matt Raible

Are you using the same version of libraries that I’m using in this post? If so, can you compare your code to the example on GitHub. You can use Smart Synchronize to compare directories. If you take this approach, I’d recommend you exclude generated directories when comparing (e.g., node_modules and target).