how to save react form data into database using Spring boot

realNameHidden - Mar 27 '23 - - Dev Community

step 1 : Create react project

Image description

step 2 : run the app

Image description

step 3 : create register.jsx

Image description

step 4 : In order to use bootstrap add cdn links in public/index.html

Copy-paste the stylesheet into your

before all other stylesheets to load our CSS.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
Enter fullscreen mode Exit fullscreen mode

add below script in body

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
Enter fullscreen mode Exit fullscreen mode

index.html look like below

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
  <title>React App</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

install axios

Image description

create service folder and create file user.service.js

Image description

user.service.js

import axios from "axios";
const API_URL = "http://localhost:8080";

class UserService {
    saveUser(user) {
        return axios.post(API_URL + "/saveUser", user);
    }
}

export default new UserService
Enter fullscreen mode Exit fullscreen mode

RegisterForm.jsx

import React, { useState } from 'react'
import userService from './service/user.service';

function RegisterForm() {
    const [user, setUser] = useState({
        userName: "",
        email: "",
        mobile: "",
        address: "",
    });
    const [msg, setMsg] = useState("")

    const handleChange = (e) => {
        const value = e.target.value;
        setUser({ ...user, [e.target.name]: value })
    }

    const RegisterUser = (e) => {
        e.preventDefault();
        console.log(user);
        userService.saveUser(user)
            .then((res) => {
                console.log("User Added Successfully");
                setMsg("Used Added Sucessfully");
                setUser({
                    userName: "",
                    email: "",
                    mobile: "",
                    address: "",
                })
            }).catch((error) => {
                console.log(error);
            });
    }
    return (
        <>
            <div className='container mt-3'>
                <div className='row'>
                    <div className='col-md-6 offset-md-3'>
                        <div className='card'>
                            <div className='card-header fs-3 text-center'>
                                Register User
                            </div>
                            {msg && <p className="fs-4 text-center text-success">{msg}</p>}
                            <div className='card-body'>
                                <form onSubmit={(e) => RegisterUser(e)}>
                                    <div className='mb-3'>
                                        <label>Enter UserName</label>
                                        <input type="text" name="userName" className='form-control' onChange={(e) => handleChange(e)}
                                            value={user.userName} />
                                    </div>
                                    <div className='mb-3'>
                                        <label>Enter Email</label>
                                        <input type="text" name="email" className='form-control'
                                            onChange={(e) => handleChange(e)}
                                            value={user.email} />
                                    </div>
                                    <div className='mb-3'>
                                        <label>Enter mobile No</label>
                                        <input type="text" name="mobile" className='form-control'
                                            onChange={(e) => handleChange(e)}
                                            value={user.mobile} />
                                    </div>
                                    <div className='mb-3'>
                                        <label>Enter Address</label>
                                        <input type="text" name="address" className='form-control'
                                            onChange={(e) => handleChange(e)}
                                            value={user.address} />
                                    </div>
                                    <button className="btn btn-primary col-md-12">Submit</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}

export default RegisterForm
Enter fullscreen mode Exit fullscreen mode

Image description

Create Spring boot project with following dependencies

Image description

Directory Structure

Image description

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.0.5</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>SpringBootReact</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>SpringBootReact</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>17</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>
Enter fullscreen mode Exit fullscreen mode

application.properties


spring.datasource.url=jdbc:mysql://localhost:3306/new
spring.datasource.username=root
spring.datasource.password=root


spring.jpa.hibernate.ddl-auto=update
Enter fullscreen mode Exit fullscreen mode

User.java

package com.example.demo.model;

import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import jakarta.persistence.Table;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
@Entity
@Table(name = "user_tab")
public class User {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;

    private String userName;

    private String address;

    private String mobile;

    private String email;
}
Enter fullscreen mode Exit fullscreen mode

UserRepo.java

package com.example.demo.repo;

import org.springframework.data.jpa.repository.JpaRepository;

import com.example.demo.model.User;

public interface UserRepo extends JpaRepository<User, Integer>{

}
Enter fullscreen mode Exit fullscreen mode

UserController.java

package com.example.demo.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

import com.example.demo.model.User;
import com.example.demo.repo.UserRepo;

@CrossOrigin(origins = "http://localhost:3000")
@RestController
public class UserController {

    @Autowired
    private UserRepo repo;

    @PostMapping("/saveUser")
    public ResponseEntity<String> saveUser(@RequestBody User user){
        repo.save(user);
        return new ResponseEntity<String>("User Saved",HttpStatus.OK);
    }
}
Enter fullscreen mode Exit fullscreen mode

Now run both react and spring boot apps

enter the form data

Image description

click on submit

Image description

See your database

Image description

Image
Why We Do We Love Asbestos Lawsuit Attorneys (And You Should Also!)
Image
Are You Getting The Most Value You Cheap Couches For Sale?
Image
Where Will Asbestos Lawyers Be One Year From This Year?
Image
teknik naikkan keterampilan dalam permainan slots online
Image
20 Rising Stars To Watch In The Cheap Couches UK Industry
Image
Creating and Connecting to Linux Virtual Machine using a Public Key

tutorial, devops, learning, cloud
Image
The 12 Worst Types Of Accounts You Follow On Twitter
Image
Stubbing HTTP communication in E2E test with Hoverfly

e2e, testing, hoverfly, proxy
Image
teknik akses web-site judi slots online tanpa blokir
Image
Setting Up CI/CD for Node.js with GitHub Actions
Image
20 Myths About Good Accident Lawyers: Busted
Image
The Reasons Accident Lawyers Is More Difficult Than You Think
Image
Leather Fahion

jackets
Image
panduan menunjuk permainan judi slots online yang benar
Image
Ten Things You've Learned In Kindergarden That'll Help You With Asbestos Exposure Claim
Image
Exploring Zsh 'ls' Alternatives: Elevating Your Command Line Experience

webdev, javascript, beginners, programming
Image
tehnik memutuskan mesin slots online uang asli
Image
Cheapest VPS Offers for 2024: Reliable & Budget-Friendly Solutions for Cloud Hosting

cheapshoting, vps
Image
NordVPN's Monthly Plans and Pricing Explained

vpn, nordvpn
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .