Spring Boot React Full Stack Web Development Tutorial

In this full-stack web development tutorial, we will learn how to develop a simple full-stack web application that is a basic Employee Management Application using React, React Hooks, Spring Boot, and MySQL database.

In the previous tutorial ( Spring Boot + React JS CRUD Example Tutorial), we haven't used React Hooks but in this tutorial, we will use React Hooks in React application development.
 
React is used to build user interfaces (UI) on the front end.

Spring boot is popular to develop RESTful web services and microservices.

React Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. 

Code Example on GitHub

This tutorial is accompanied by a working code example on GitHub

Spring Boot React Full-Stack Architecture


What we will build?

We will build a full-stack web application that is a basic Employee Management Application with CRUD features:
  • Create Employee
  • List Employee
  • Update Employee
  • Delete Employee
Following is the screenshot of the final version of our application -



Quick overview of React and Spring Boot

What is React JS?

  • React is used to build user interfaces (UI) on the front end.
  • React is not a framework (unlike Angular, which is more opinionated).
  • React is an open-source project created by Facebook.

What is React Hooks?

Hooks were added to React in version 16.8.

Hooks allow function components to have access to state and other React features. Because of this, class components are generally no longer needed.

Hooks allow us to "hook" into React features such as state and lifecycle methods.

What is Spring Boot?

  • Spring boot to develop REST web services and microservices.
  • Spring Boot has taken the Spring framework to the next level. It has drastically reduced the configuration and setup time required for spring projects.
  • You can set up a project with almost zero configuration and start building the things that actually matter to your application.

Prerequisites

  • Basic familiarity with HTML & CSS
  • Basic knowledge of JavaScript and programming
  • Spring Boot Basics
  • ReactJS basics
  • Node.js and npm installed globally

Full-Stack App Development

We will build two projects:
  1. sprint boot-backend (server) – To develop REST API
  2. react-hooks-frontend (client) – Consume REST API

Tools and Technologies Used

Server-side tools and technologies used

  • Spring Boot 2 +
  • SpringData JPA ( Hibernate)
  • Maven 3.2 +
  • JDK 1.8
  • Embedded Tomcat 8.5+
  • MySQL Database

Client-side tools and technologies used

  • React
  • React Hooks
  • Modern JavaScript (ES6)
  • NodeJS and NPM
  • VS Code IDE
  • Create React App CLI
  • Bootstrap 5 and Axios HTTP Library

Spring Boot React Full Stack Web Development Tutorial - 2 Parts

To keep it simple, I divide this tutorial into 2 parts. In the first part, we will develop and expose CRUD REST APIs using Spring Boot and the MySQL database. In the second part, we will create React App to consume CRUD REST APIs.

What's next?

In the first part, we will develop and expose CRUD REST APIs using Spring Boot and the MySQL database.

Spring Boot React Full Stack Web Development Course on YouTube

I have created a complete video course on React Spring boot full-stack development and published it on my YouTube channel:

Comments