How to Create Spring Boot and ReactJs application with MYSQL

Spring Boot Application with React JS and MYSQL. In this ReactJS and Spring Boot tutorial, Let’s create a simple web application using Spring boot, ReactJS, Rest API, and MYSQL that will display the list of books.

Tools and Technologies Used in Spring boot and ReactJs app:

  • React JS
  • Spring Boot
  • MYSQL Database

Create Spring Boot and ReactJs application with MYSQL

We will develop a simple application where we will fetch the list of Books from the database on the web page using React JS as a front-end technology and Spring Boot as a Backend technology. If you want to know more about Spring Boot check this article https://codedec.com/course/spring-boot/.

Let us divide the development process into two parts:

  • Frontend: React JS
  • Backend: Spring Boot 

Create Backend Part using Spring boot and MYSQL

Create a Database

The first step is to create a database name ‘db_demo’ using the MYSQL command line or Workbench.

Create database db_demo

Create Project

Create a project using Spring Initializr. If you don’t know how to create a project using the same check this article https://codedec.com/tutorials/how-to-create-spring-boot-project-using-spring-initializr/

Import a Project

Now, it’s time to import the project into STS. Go to File > Import > Maven > Existing Maven Project > Next > Browse > Select the project > Finish. Now it will take time to import the project and will import all the dependencies in case you added.

Configure application. properties file

# change the port
server.port=8888
#Database Configrations
spring.datasource.url=jdbc:mysql://localhost:3306/db_demo
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.username=root
spring.datasource.password=root
spring.jpa.database-platform = org.hibernate.dialect.MySQL8Dialect
spring.jpa.generate-ddl=true
spring.jpa.hibernate.ddl-auto = update

Create a Model Class

Here, we will create a Model class called Book.java. I have used the Lombok library to remove boilerplate code. In case you want to know what is Lombok check this article https://codedec.com/tutorials/how-to-configure-lombok-into-eclipse/

Book.java

package com.abc.in.model;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

import org.springframework.context.annotation.EnableAspectJAutoProxy;

import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;

@Setter
@Getter
@AllArgsConstructor
@NoArgsConstructor
@Entity
@Table(name = "book")
public class Book {

 @Id
 @GeneratedValue(strategy = GenerationType.AUTO)
 private long id;
 
 private String bookName;
 
 private String authorName;
 
 private long price;
}

Create Repository Interface

Now, we will create a Data Access Layer called BookRepository which will extend JPARepository.

package com.abc.in.repository;

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

import com.abc.in.model.Book;

public interface BookRepository extends JpaRepository<Book, Long>{	
}

Create a Controller

The client request is sent to the controller which acts as an API layer that will have the endpoints for REST API.

package com.abc.in.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import com.abc.in.model.Book;
import com.abc.in.repository.BookRepository;
@CrossOrigin(origins = "http://localhost:3001/")
@RestController
public class BookController {

 @Autowired
 private BookRepository bookRepository;
 @GetMapping("/books")
 public List<Book> getAllBooks() {
  return bookRepository.findAll();
 }
}
  • Mark this class as @RestController(It is used to simplify the creation of REST APIs).
  • @GetMapping maps the HTTP GET request onto getAllBooks() handler methods.

Now, add some data into the table with the help of the main class called SpringBootBackendPartApplication.java that would implement the CommandLineRunner interface.

package com.abc.in;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.CommandLineRunner;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

import com.abc.in.model.Book;
import com.abc.in.repository.BookRepository;

@SpringBootApplication
public class SpringBootBackendPartApplication implements CommandLineRunner {

 public static void main(String[] args) {
  SpringApplication.run(SpringBootBackendPartApplication.class, args);
 }

 @Autowired
 private BookRepository bookRepository;
 @Override
 public void run(String... args) throws Exception {
  Book book = new Book();
  bookRepository.save(new Book(1, "Wings of Fire","A P J Abdul Kalam, Arun Tiwari", 500));
  bookRepository.save(new Book(2, "The Alchemist","Paulo Coelho", 144));
  bookRepository.save(new Book(3, "War and Peace","Leo Tolstoy", 299));
  bookRepository.save(new Book(3, "Song of Solomon","Tony Morrison", 555));
  
 }

}

Run the Application

Run the above class and see the data would now be persisted into the table. Go to the browser and hit the URL http://localhost:8888/books and you will see the response in JSON format.

Create Frontend Part using ReactJS

Now, we will create a frontend part of the application using React JS. Open Cmd prompt > Go to the folder where you want to create a project with the help of command prompt codes > enter the command npx create-react-app book-frontend.

  • Now, open Visual Studio Code IDE and open the book-frontend app.
  • Here, you will see all the required folders and files.

We will be using bootstrap in React JS. So, open the terminal of VS code and type the following command

D:\Job Stuff\My_Study\React JS\book-frontend>npm install bootstrap

You have to install React Bootstrap also by using the following command

D:\Job Stuff\My_Study\React JS\book-frontend> npm install react-bootstrap

Install Axios library that is going to make a request to the endpoints which we have created at the backend.

D:\Job Stuff\My_Study\React JS\book-frontend> npm install axios

Create BookService.js

Create folder services inside the src folder and create a new js file BookService.js and inside it add the following lines of code

import axios from 'axios';
const BOOK_REST_API_URL = 'http://localhost:8888/books'
class BookService{
    getBooks(){
        return axios.get(BOOK_REST_API_URL);
    }
}
export default new BookService();
  • First, create a constant String for the endpoints URL.
  • Create a class and add a method getBooks() that will return the list of books using the Axios HTTP client library.

Create BookComponent.js

Inside the src folder, create a components folder and add a BookComponent.js and add the following lines of code

import React from 'react'
import bookService from '../services/BookService'
import {Navbar} from 'react-bootstrap'


class BookComponent extends React.Component{

    constructor(props){
        super(props)
        this.state ={
            books:[]
        }
    }
    componentDidMount(){
        bookService.getBooks().then((Response)=>{
            this.setState({books:Response.data})
        });

    }
    render(){
        return(
        <div>
            <Navbar bg="info" variant="dark" >
                <Navbar.Brand href="#">Book App</Navbar.Brand>
            </Navbar>
            <h1 className="text-center mt-5 ">List of Books</h1>
            <div className="container mt-2">
            <table className="table table-bordered border-info">
                <thead>
                    <tr>
                    <th>Id</th>
                    <th>Book Name</th>
                    <th>Book Author</th>
                    <th>Price</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        this.state.books.map(
                            books =>
                                <tr key = {books.id}>
                                        <td>{books.id}</td>
                                        <td>{books.bookName}</td>
                                        <td>{books.authorName}</td>
                                        <td>{books.price}</td>
                                </tr>
                        )
                    }
                </tbody>

            </table>
            </div>
        </div>
        )
    }
}
export default BookComponent
  • Here, import the BookService.js from ‘../services/BookService’, {Navbar} from react-bootstrap.
  • Create a class BookComponent by extending React. Component.
  • Add a constructor with props to pass data and use the state to manage the data.
  • Now, add the componentDidMount() method which will be called after a component is mounted.
  • After that, the render() method would return the view that would be rendered by the browser.
  • Now, On-line no:39, we have used the map() function to iterate over the list.

Now, add the BookComponent.js into App.js

import logo from './logo.svg';
import './App.css';
import BookComponent from './components/BookComponent';

function App() {
  return (
    <div className="App">
      <BookComponent/>
    </div>
  );
}

export default App;

Run the React JS app by going to the terminal and enter the following command

D:\Job Stuff\My_Study\React JS\book-frontend> npm start

At localhost:3001 you will be able to see the following output:

In this way, we have learned how to create a Spring Boot Application using React JS  as a frontend technology.

ReactJs and Spring boot Application examples

https://codebun.com/how-to-insert-data-into-mysql-using-react-js-and-spring-boot/

https://codebun.com/edit-and-update-records-in-react-js-using-spring-boot-and-mysql/

https://codebun.com/delete-record-from-a-table-in-react-js-spring-boot-and-mysql/

https://codebun.com/search-record-from-a-table-in-react-js-spring-boot-and-mysql/

https://codebun.com/how-to-create-a-pagination-in-react-js-and-spring-boot/

https://codebun.com/how-to-create-spring-boot-and-reactjs-application/