Penn Health Institute > Development > Web Development > [NEW] Full-Stack Java Development with Spring Boot 3 & React

4.52 out of 5

233 reviews on Udemy

[NEW] Full-Stack Java Development with Spring Boot 3 & React

Build FULL-STACK Web Apps using Java, Spring Boot 3, Spring Data JPA, Spring Security, JWT, JavaScript, React JS & MySQL

Instructor:

Ramesh Fadatare (Java Guides)

1,905 students enrolled

English [Auto]

Learn to develop a FULL-STACK Web Application with React and Spring Boot

Build Employee Management System FULL-STACK Web Application with React and Spring Boot

Build Todo Management FULL-STACK Web Application with React and Spring Boot

Learn Spring Boot Fundamentals and REST API Basics

Learn React JS Fundamentals

Building RESTful APIs with Spring Boot

Consuming RESTful APIs in React JS

Data Persistence with Spring Data JPA and Hibernate

Secure REST APIs using Spring Security

Build User Registration and Login Module

Secure REST APIs using JWT (JSON Web Token)

Using JWT (JSON Web Token) in React App

Style Web Pages using the Bootstrap CSS framework

Use Modern and Popular tools to build full-stack web applications such as IntelliJ IDEA, VS Code, Maven, Postman, NPM, etc.

In this hands-on project-oriented course, you will dive into the world of full-stack web app development using the powerful combination of Spring Boot and React JS.

In this course, you will build two full-stack web applications (Employee Management System and Todo Management App) using Spring Boot, Spring Security, Spring Data JPA, JWT, React JS, and MySQL database.

In this course, we will use the latest version of Spring Boot (3+), Spring Security (6+), React JS (18+), and MySQL database (8+). We will use modern and popular tools to build full-stack web applications such as IntelliJ IDEA, VS Code, Maven, Postman, NPM, etc.

What is React JS?

React JS is a JavaScript library 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.

Course Topics:

1. React JS Fundamentals

2. Spring Boot Fundamentals

3. Project 1: Employee Management System

Build Employee Management Module – Backend Implementation using Spring Boot
Build Employee Management Module – Frontend Implementation using React JS
Build Department Management Module – Backend Implementation using Spring Boot
Build Department Management Module – Frontend Implementation using React JS
Style Web Pages using the Bootstrap CSS framework

4. Project 2: Todo Management App

Todo Management Module – Backend Implementation using Spring Boot
Todo Management Module – Frontend Implementation using React JS
Secure REST APIs using Spring Security
Build Register and Login REST APIs
Implement Register and Login Features in React App
Secure REST APIs using JWT (JSON Web Token)
Using JWT (JSON Web Token) in React App
Style Web Pages using the Bootstrap CSS framework

Tools and technologies used in this course:

Server-side:

Java 17+
Spring Boot 3+
Spring Data JPA (Hibernate)
Maven
IntelliJ IDEA
MySQL database
Postman

Client-side:

React JS 18+
React Hooks
React Router
Axios
Bootstrap CSS framework
Visual Studio Code IDE
VS Code extensions
Node JS
NPM

Introduction

Course Introduction

Prerequisites for this Course

My Other Top Udemy Courses - Don't Skip

Guide to Set Up Development Environment

Spring Boot Fundamentals and REST API Development Basics

Download Lecture Notes in PDF

Section Overview

What is Spring Boot?

Spring Boot Features

Create Spring Boot Project using Spring Initializr and Import in IntelliJ IDE

Create Simple Spring Boot REST API

Spring Boot REST API returns Java Bean

Create Spring Boot REST API That Returns List

Spring Boot REST API with Path Variable - @PathVariable

Spring Boot REST API with Request Param - @RequestParam

Spring Boot POST REST API - @PostMapping and @RequestBody

Spring Boot PUT REST API - @PutMapping and @RequestBody

Spring Boot DELETE REST API - @DeleteMapping

Using Spring ResponseEntity to Manipulate the HTTP Response

Define Base URL for REST API’s in Spring MVC Controller - @RequestMapping

Download Source Code of this Section

Section Quiz - Test Yourself

React JS Fundamentals

Lecture Notes in PDF

Section Overview

Introduction to React JS

Create and Set up React App

Understanding React App Project Structure

React Components Overview

Functional Components

Class Components

Importing and Exporting Components

JSX

JSX Rules in React

Props

Destructuring Props

State and setState

useState Hook

Event Handling

Conditional Rendering

Section Quiz - Test Yourself

Employee Management System Full-Stack Project

Select Technology Stack and Understanding Project Requirements

Demo - What Are We Going to Build?

Spring Boot React Full-Stack Architecture

Employee Management Module - Spring Boot Backend

Section Overview

Spring Boot Application Three Layer Architecture

Create and Setup Spring Boot Project in IntelliJ IDEA

Configure MySQL Database in Spring Boot Application

Create Employee JPA Entity

Create EmployeeRepository

Create EmployeeDto and EmployeeMapper

Build Add Employee REST API

Build Get Employee REST API

Build Get All Employees REST API

Build Update Employee REST API

Build Delete Employee REST API

Source Code of this Section

Quiz for Sections 4 and 5 - Test Yourself

Employee Management Module - React JS Backend

Section Overview

Create and Set up React App

Understanding React App Project Structure

Adding Bootstrap in React Using NPM

Create React ListEmployeeComponent and Display Data

Connect React App with Get All Employees REST API

Adding Header and Footer to React App

Configure Routing in a React App

Create React EmployeeComponent and Configure Route

Add Employee Form Handling

Connect React App to Add Employee REST API

Add Employee Form Validation

Adding Update Button, Title and Route

Connect React App to Get Employee REST API

Connect React App to Update Employee REST API

Implement Delete Employee Feature in React App

Source Code of this Section

Section Quiz - Test Yourself

Department Management Module - Spring Boot Backend

Section Overview

Create Department Entity and DepartmentRepository

Create DepartmentDto and DepartmentMapper

Build Create Department REST API

Build Get Department REST API

Build Get All Departments REST API

Build Update Department REST API

Build Delete Department REST API

Source Code of this Section

Department Management Module - React JS Frontend

Section Overview

Add Navigation Links in Header

Design List Department Component

Connect React App with Get All Departments REST API

Create React DepartmentComponent

Add Department Form Handling

Connect React to Add Department REST API

Adding Update Button, Title and Route

Connect React App to Get Department REST API

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!

4.5

4.5 out of 5

233 Ratings