React: Store <Form> data from to MySQL - mysql

Question

I have created a register page in reactjs, where I am taking firstName, lastName, password, email from a user.
In the backend, I have created the application using SpringBoot to handle the request from frontend.
Now, I am able to store (temporarily) the register form data in http://localhost:8080/forms .
When the user enters the data in register form at the front end, the data is stored temporarily in the spring boot application in the url mentioned in the axios.
So, when I enter this url (in the browser), am able to see the list of registered users with their credentials in JSON format like this :
[{"firstName":"Bhavya", "lastName":"Gupta", "email":"abcd#a", "password":"zaqxsw","id":100}]
But this data is temporarily stored, so when I restart the server the data is no longer there.
submitBook= event =>{
event.preventDefault();
const book = {
firstName: this.state.firstName,
lastName: this.state.lastName,
password: this.state.password,
email: this.state.email
};
axios.post("http://localhost:8080/forms",book).then(response => {
if(response.data!=null){
this.setState({"show":true});
setTimeout(() => this.setState({"show":false}),3000);
} else {
this.setState({"show":false});
}
});
this.setState(this.initialState);
}
The complete code is available here
I want to store the register form data from front-end (client-side) into a MySQL database, so that I can perform login authentication on the data stored.
I have created MySQL database with 4 columns - firstName, lastName, email, password. I searched on the internet and read several answers in SO Sending data to database in React, referred several blogs and articles, but I am not able to understand how to achieve this.
Can anyone please help me out in solving this issue?

Answer 1

In a typical/modern web application, you have well defined roles/purposes for each part of the system. From your question, it appears that you intend for the roles to be interchanged and that might the source of your troubles here.
Let;s look closely at your set-up:
Client-side/Front-end (JavaScript/React)
This is simply an enabler for a user to interact with your actual application. In your set-up, this should render the form and capture registration data.
Server-side/Back-end (Java/SpringBoot)
This is your application layer where most processing happens (business logic).
In your set-up, this is where your MVC happens. And essentially, after any required validation, this layer then communicates with the Database.
Database-layer (SQL or NoSQL)
This is the layer that you utilize to store and persist data within your app. In your set-up, you are using MySQL to handle your data.
Already your backend is already exposing endpoints which you are consuming at the front-end via axios. Therefore the direct answer to your question lies in getting SpringBoot to work with your MySQL in order to persist your data.
Here is an official tutorial on how to access data with MySQL from the spring team.

Answer 2

For Posting Form data from ReactJS to MySQL database via Spring Boot Application, I have written blogs, that gives a detailed explanation and a step by step method to connect front end part with backend .
Refer to these blogs :
Prerequisites to POST form data from ReactJS to an API endpoint : Part 1
Initial Setup for creating a basic React App: Part 2
Posting Form data from ReactJS to MySQL database via Spring Boot Application: Part 3