CF

Go Full Stack with Spring Boot and React

11h 43m 36s
English
Paid

Welcome to this Amazing Course on Full Stack Web Development with React and Spring Boot. This course is designed as the Perfect First Step for Java & Spring Developers embarking on a journey into React and Full Stack Development.

Course Overview

If you have zero experience with React and Modern JavaScript, worry not. This course has you covered. Developing your first full stack web application using these technologies is both rewarding and enjoyable.

What You Will Learn

Throughout this course, you will gain practical experience by building a Basic Todo Management Application. This will be accomplished using React, Spring Boot, and Spring Security Frameworks over more than 100 steps, ensuring a thorough understanding of each component.

Technologies Covered

  • Frontend Framework: React
  • JavaScript: Modern JavaScript and Create React App
  • Backend & API: Java, Spring Boot, and REST API Framework
  • Security: Spring Security (Authentication and Authorization - Basic and JWT)
  • Styling: BootStrap
  • Tools: Maven, Node (npm), Visual Studio Code, Eclipse, and Tomcat Embedded Web Server

We will guide you through setting up and mastering each of these technologies.

Course Description

Requirements

  • An eagerness to learn while having fun :)
  • Basic programming experience with JavaScript, Java, and Spring is beneficial
  • We'll assist you in understanding Modern JavaScript, Spring Boot, and JPA basics
  • Guidance on installing Chrome, Eclipse, Visual Studio Code, and Node JS (npm)

Target Audience

  • Individuals aspiring to develop a full stack application with React and Spring Boot
  • Java Developers who want to dive into Full Stack Development with React and Spring Boot
  • Spring Boot Developers aiming to create a full stack application using React
  • Learners interested in understanding the foundational building blocks of React Frontend Framework
  • Participants wanting to build basic RESTful APIs and services with Spring Boot Framework
  • Those eager to secure REST APIs with Spring Boot and Spring Security using Basic Authentication and JWT

Learning Outcomes

  • Develop your first FULL STACK Application with React and Spring Boot
  • Master the Basics of Building remarkable Frontend Applications with React
  • Initiate into Building comprehensive RESTful APIs with Spring Boot
  • Configure Basic Authentication and JWT using Spring Security
  • Overcome challenges of integrating a React Frontend with a RESTful API
  • Understand React Basics - Components, JSX, State, and Props
  • Connect REST API to JPA/Hibernate with Spring Boot
  • Step-by-step development of a Todo Management Full Stack Application with login/logout functionalities
  • Learn to secure RESTful APIs using Spring Boot and Spring Security

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 126 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 126 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Full Stack Application with React and Spring Boot - Introduction
All Course Lessons (126)
#Lesson TitleDurationAccess
1
Full Stack Application with React and Spring Boot - Introduction Demo
02:40
2
Step 00 - Getting Started with the Course
03:11
3
Step 01 - Understanding Full Stack Application Architecture
03:50
4
Step 02 - Using Create React App to Create and Launch a React Application
07:26
5
Step 03 - Importing React App into Visual Studio Code
05:21
6
Step 04 - Exploring React Project Structure
06:29
7
Step 05 - Introduction to React Components
03:53
8
Step 06 - Playing with React Class Components
04:18
9
Step 07 - Introduction to Function Components in React
03:01
10
Step 08 - Exploring JSX Further - Babel and more
10:51
11
Step 09 - Refactoring components to individual modules and Quick Review of JavaS
07:51
12
Step 10 - Exercise - Creating seperate modules for other components
03:40
13
Step 01 - Introduction to Section - Building Counter Application
01:25
14
Step 02 - Creating Basic React Counter Component
03:50
15
Step 03 - Adding a Button and a Counter to the React Counter Component
04:40
16
Step 04 - Handling click event on the increment button
03:56
17
Step 05 - Adding State to a React Counter Component
10:34
18
Step 06 - Understanding React - Behind the scenes - Virtual Dom
03:22
19
Step 07 - Understanding setState and Using Arrow Functions to avoid this binding
06:25
20
Step 08 - Defining Inline Javascript CSS in JSX
05:17
21
Step 09 - Defining Multiple Counter Buttons and Adding a Component Prop
05:51
22
Step 10 - Understanding React Component Props - Default Value and Type Constrain
04:23
23
Step 11 - Using React Developer Tools Chrome Plugin
03:51
24
Step 12 - Moving State Up - Refactoring to Counter and Counter Button Components
05:15
25
Step 13 - Moving State Up - Adding state to Counter Component
09:04
26
Step 14 - Best Practice - Using Previous State in setState
03:16
27
Step 15 - Adding Decrement Buttons and Reset Button
06:39
28
Step 16 - Quick Review of the Counter Example
06:18
29
Step 01 - Introduction to Todo Management App
01:11
30
Step 02 - Getting Started with Login Component
06:52
31
Step 03 - Understanding React Controlled Component - Adding State to Login
09:55
32
Step 04 - Refactoring to Common Change Event for Multiple Form Elements
04:31
33
Step 05 - Adding Hardcoded Authentication to Login Component
09:53
34
Step 06 - Understanding Conditional Rendering with && in React JSX
04:28
35
Step 07 - Implementing Routing for Login and Welcome Components with React Route
08:11
36
Step 08 - Implementing Routing from Login to Welcome Component
03:48
37
Step 09 - Adding an Error Component for Invalid URIs
03:14
38
Step 10 - Adding Route Parameter for Welcome Component
02:44
39
Step 11 - 01 - Creating a Basic React List Todo Component
09:22
40
Step 11 - 02 - Adding a Link from Welcome to Todo Page and New Todo Attributes
05:20
41
Step 12 - Adding Bootstrap Framework and Creating Components for Header and Foot
04:44
42
Step 13 - Using Bootstrap to Create a Menu with Navigation Links
05:37
43
Step 14 - Enhancing Footer and Creating Logout Component
04:10
44
Step 15 - Styling Login, List Todo and Other Components with CSS and Bootstrap
04:16
45
Step 16 - Using Session Storage to Store User Authentication Token
06:53
46
Step 17 - Implementing Logout to remove User Authentication Token
02:42
47
Step 18 - Enabling Menu Links Based on User Authentication Token
06:15
48
Step 19 - Securing Components using Authenticated Route
06:57
49
Step 20 - Refactoring React Components into JavaScript Modules
08:05
50
Step 21 - Quick Review - Routes, Authenticated Route and Components
01:31
51
Step 22 - What is a Web Service?
06:09
52
Step 23 - Important How Questions related to Web Services
06:42
53
Step 24 - Web Services - Key Terminology
04:14
54
Step 25 - Introduction to RESTful Web Services
07:27
55
Step 26 - Initializing a RESTful Services Project with Spring Boot
05:36
56
Step 27 - Creating a Spring Boot Hello World Service
04:52
57
Step 28 - Enhancing the Spring Boot Hello World Service to return a Bean
05:31
58
Step 29 - Quick Review of Spring Boot Auto Configuration and Dispatcher Servlet
08:06
59
Step 30 - Enhancing the Hello World Service with a Path Variable
03:19
60
Step 31 - Connecting React with Restful API - 1 - Preparing Welcome Page
06:38
61
Step 32 - Connecting React with Restful API - 2 - Understanding Axios HTTP Clein
04:40
62
Step 33 - Connecting React with Restful API - 3 - Running React App on Port 4200
01:55
63
Step 34 - Connecting React with Restful API - 4 - Adding Axios and Creating Hel
07:20
64
Step 35 - Connecting React with Restful API - 5 - Allow Cross Origin Requests Fr
05:55
65
Step 36 - Connecting React with Restful API - 6 - Quick Review
03:18
66
Step 37 - Calling Hello World Bean JSON API from React Frontend
03:26
67
Step 38 - Calling Hello World HTTP Service with Path Variables
03:23
68
Step 39 - Handling API Error Responses in React Frontend
04:02
69
Step 40 - Designing RESTful Services for Todo Resource
02:51
70
Step 41 - Creating Spring Boot REST API for retrieving Todo List
10:13
71
Step 42 - Connecting React Frontend with Todo List RESTful Service
08:21
72
Step 43 - Understanding Important React Lifecycle Methods
07:30
73
Step 44 - Creating Spring Boot REST API to delete a Todo - 1 - Create DELETE Req
07:12
74
Step 45 - Creating Spring Boot REST API to delete a Todo - Execute DELETE Reques
02:50
75
Step 46 - Adding Delete Todo Feature to React Frontend
08:02
76
Step 47 - Creating Todo Component and Handle Routing
06:09
77
Step 48 - Designing Todo Form with moment, Formik and Bootstrap
09:07
78
Step 49 - Initializing and Handling Form Submit with Formik
07:24
79
Step 50 - Implementing Form Validation with Formik
06:43
80
Step 51 - Creating Retrieve Todo Spring Boot API and Connecting React
06:00
81
Step 52 - Creating Spring Boot REST API for Updating Todo - PUT Request Method
05:03
82
Step 53 - Creating Spring Boot REST API for Creating a Todo - POST Request Metho
08:53
83
Step 54 - RESTful Web Services - Best Practices
03:30
84
Step 55 - Implementing Update Todo Feature in React Frontend
05:16
85
Step 56 - Implementing New Todo Feature in React Frontend
06:30
86
Step 57 - Overview of Security with Basic Auth and JWT
02:01
87
Step 58 - Setting up Spring Security
05:31
88
Step 59 - Configure standard userid and password
02:24
89
Step 60 - Enhancing React Welcome Data Service to use Basic Auth
08:27
90
Step 61 - Configure Spring Security to disable CSRF and enable OPTION Requests
05:45
91
Step 62 - Creating React Axios Interceptor to add Basic Auth Header
08:09
92
Step 63 - Remove Hard Coding of User Credentials
03:24
93
Step 64 - Create Basic Authentication RESTful Service in Spring Boot
02:56
94
Step 65 - Enhance React Frontend to use Basic Auth API to Validate Login
07:56
95
Step 66 - Introduction to JWT
05:33
96
Step 67 - Importing JWT Framework into Eclipse
07:37
97
Step 68 - Quick Tip - Resolving JWT Compilation Errors
01:40
98
Step 69 - Executing JWT Resources - Get Token and Refresh Token
05:46
99
Step 70 - Understanding JWT Spring Security Framework Setup
12:02
100
Step 71 - Creating a New User with Encoded Password
03:24
101
Step 72 - Using JWT Token in React Frontend
07:06
102
Step 73 - Best Practice - Use Constants for URLs and Tokens
05:41
103
Step 74 - Setting up Todo Entity and Populating Data
09:56
104
Step 75 - Connecting React with GET REST APIs connected to JPA Repository
09:35
105
Step 76 - Connecting POST, PUT and DELETE REST APIs to JPA Repository
02:54
106
Step 77 - Connecting React Frontend with JPA POST, PUT and DELETE REST APIs
02:36
107
Introduction
00:59
108
Step 01 - Introduction to Spring Boot - Goals and Important Features
06:12
109
Step 02 - Developing Spring Applications before Spring Boot
03:47
110
Step 03 - Using Spring Initializr to create a Spring Boot Application
04:50
111
Step 04 - Creating a Simple REST Controller
05:04
112
Step 05 - What is Spring Boot Auto Configuration?
09:08
113
Step 06 - Spring Boot vs Spring vs Spring MVC
05:56
114
Step 07 - Spring Boot Starter Projects - Starter Web and Starter JPA
07:40
115
Step 08 - Overview of different Spring Boot Starter Projects
04:02
116
Step 09 - Spring Boot Actuator
08:49
117
Step 10 - Spring Boot Developer Tools
04:13
118
Step 01 - Object Relational Impedence Mismatch - Understanding the problem that
04:44
119
Step 02 - World before JPA - JDBC, Spring JDBC and myBatis
07:01
120
Step 03 - Introduction to JPA
05:13
121
Step 04 - Creating a JPA Project using Spring Initializr
06:03
122
Step 05 - Defining a JPA Entity - User
04:42
123
Step 06 - Defining a Service to manage the Entity - UserService and EntityManage
04:54
124
Step 07 - Using a Command Line Runner to save the User to database.
04:39
125
Step 08 - Magic of Spring Boot and In Memory Database H2
08:38
126
Step 09 - Introduction to Spring Data JPA
05:16
Unlock unlimited learning

Get instant access to all 125 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What are the prerequisites for enrolling in this course?
While prior experience with JavaScript, Java, and the Spring framework is beneficial, it is not strictly necessary. The course is designed to assist learners in grasping the basics of Modern JavaScript, Spring Boot, and JPA. Therefore, an eagerness to learn and explore new technologies will be the most important asset for any participant.
What project will I build during the course?
Participants will develop a Basic Todo Management Application throughout the course. This project involves utilizing React for the frontend, Spring Boot and REST API Framework for the backend, and Spring Security for authentication and authorization. The course includes over 100 steps to ensure a deep understanding of these technologies as they apply to the project.
Which tools and platforms will I use in the course?
The course employs a variety of tools and platforms, including Create React App for setting up React applications, Visual Studio Code and Eclipse for development, and Maven for project management. Node (npm) is used for package management, while the Tomcat Embedded Web Server is utilized for deploying Java applications.
What is the target audience for this course?
This course is ideal for Java and Spring developers interested in expanding their skill set to include front-end development with React. It caters to individuals who are starting their journey in full stack development and looking to integrate their existing Java knowledge with modern JavaScript frameworks.
What technologies are not covered in this course?
The course does not cover non-Java or non-JavaScript languages and frameworks. It focuses specifically on React, Spring Boot, and associated tools such as Maven and Node. Other front-end frameworks like Angular or Vue.js, or backend technologies like Python or Ruby on Rails, are not part of the curriculum.
How does this course compare in depth with other full stack courses?
This course provides extensive hands-on experience with React and Spring Boot, focusing on building a full stack application from scratch. It offers detailed guidance over more than 100 steps, ensuring participants understand each component of the stack. While it may not cover every possible full stack technology, it provides a solid foundation in these two popular frameworks.
How much time should I expect to commit to this course?
The course consists of 126 lessons. While the total runtime isn't specified, the detailed step-by-step approach suggests a significant time commitment. Participants should be prepared to dedicate several hours per week to complete exercises, understand the material, and experiment with the technologies covered.