Spring Boot + React JS CRUD Example Tutorial

Go to Part 1
In this full-stack tutorial, we will learn how to develop a simple full-stack web application that is basic Employee Management Application using React, Spring Boot.  

The back-end server uses Spring Boot with Spring Web MVC for REST APIs and Spring Data JPA for interacting with MySQL database. The Front-end side is made with React, React Router, Axios & Bootstrap.
The complete source code of the project is hosted on Github. You can refer that anytime if you get stuck at something.

What we will build?

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

Spring Boot + React JS CRUD Full Stack App - Free Course on YouTube

I suggest you to watch this series on my YouTube channel to understand more about this full-stack app:

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 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.

What you'll learn

  • You will Develop Your First FULL STACK Application with React and Spring Boot
  • You will learn the Basics of Building AWESOME Frontend Applications with React
  • You will be introduced to Building Great RESTful APIs with Spring Boot
  • You will learn to How to make a REST API call from React to a Spring Boot RESTful API
  • You will learn the basics of React - Components - JSX, State and Props
  • You will develop an Employee Management Full Stack Application step by step with CRUD functionalities

ReactJS + Spring Boot CRUD Full Stack Architecture


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. sprintboot-backend (server) – To develop REST API
  2. react-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
  • Modern JavaScript (ES6)
  • NodeJS and NPM
  • VS Code IDE
  • Create React App CLI
  • Bootstrap 4.5 and Axios HTTP Library

Spring Boot + React JS CRUD Example 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. In the second part, we will create React App to consume CRUD REST APIs.

PART 1 - Spring boot + React JS CRUD Example Tutorial - Spring Boot Backend - Part 1

PART 2 - Spring boot + React JS CRUD Example Tutorial - React App Frontend - Part 2

What’s Next?

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

Go to Part 1

ReactJS Spring Boot CRUD Full Stack App - Free Course on My YouTube Channel

ReactJS + Spring Boot CRUD Full Stack App - 1 - Project Overview at https://youtu.be/n43h1eJ2EUE
ReactJS + Spring Boot CRUD Full Stack App - 2 - Project Architecture and Development Process at https://youtu.be/iK__liBIXWk
ReactJS + Spring Boot CRUD Full Stack App - 3 - Create Spring Boot Project and Configure MySQL at https://youtu.be/k5KnAhkRzh4
ReactJS + Spring Boot CRUD Full Stack App - 4 - Creating JPA Entity + Repository
at https://youtu.be/FZwLlaMmers
ReactJS + Spring Boot CRUD Full Stack App - 5 - Creating List Employee REST API
at https://youtu.be/L57OlxU0fEE
ReactJS + Spring Boot CRUD Full Stack App - 6 - Creating React App
at https://youtu.be/tUXiPfNKUWE
ReactJS + Spring Boot CRUD Full Stack App - 7 - Add Bootstrap 4 in React App
at https://youtu.be/ArxBR9C1oNA
ReactJS + Spring Boot CRUD Full Stack App - 8 - Creating React List Employee Component
at https://youtu.be/Tpt9t5IV7Vw
ReactJS + Spring Boot CRUD Full Stack App - 9 - Connecting React with List Employee REST API
at https://youtu.be/zXE7dCidXhc
ReactJS + Spring Boot CRUD Full Stack App - 10 - Add Header and Footer to React App
at https://youtu.be/LOcy9uFzBBU
ReactJS + Spring Boot CRUD Full Stack App - 11 - Configure Routing
at https://youtu.be/z2QAbWy1A40
ReactJS + Spring Boot CRUD Full Stack App - 12 - Creating Add Employee REST API
at https://youtu.be/1y3pOPNrGms
ReactJS + Spring Boot CRUD Full Stack App - 13 - Creating React Add Employee Component
at https://youtu.be/E_7uVf0RCl4
ReactJS + Spring Boot CRUD Full Stack App - 14 - React Add Employee Form Handling
at https://youtu.be/S5AFJIfRxQU
ReactJS + Spring Boot CRUD Full Stack App - 15 - Connecting React with Add Employee REST API
at https://youtu.be/ieMhlyjPjWo
ReactJS + Spring Boot CRUD Full Stack App - 16 - Creating Get Employee By Id REST API
at https://youtu.be/L5SYbfkOTQA
ReactJS + Spring Boot CRUD Full Stack App - 17 - Creating Update Employee REST API
at https://youtu.be/voJAjtioNN8
ReactJS + Spring Boot CRUD Full Stack App - 18 - Creating React Update Employee
at https://youtu.be/GrIG4-lnLkQ
ReactJS + Spring Boot CRUD Full Stack App - 19 - Connecting React with Update Employee REST API
at https://youtu.be/uPCWBOrU6Vs
ReactJS + Spring Boot CRUD Full Stack App - 20 - Add & Update Employee with Single React Component at https://youtu.be/ksvDBGF7JRE
ReactJS + Spring Boot CRUD Full Stack App - 21 - Creating Delete Employee REST API at https://youtu.be/dzgixz4X1KA

GitHub Repository

The source code on my GitHub repository at  https://github.com/RameshMF/ReactJS-Spring-Boot-CRUD-Full-Stack-App

Comments