Go Full Stack with Spring Boot and React

11h 43m 36s
English
Paid

Course description

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

Read more about the course

Zero Experience with React and Modern JavaScript? No Problem.  Start Learning Now!

Look No Further!

Developing your first full stack web application with React and Spring Boot is fun.

In this course, you will learn the basics of full stack web development developing a Basic Todo Management Application using React, Spring Boot and Spring Security Frameworks.  You will build the Todo Management Application step by step - in more than 100 steps.

You will be using React (Frontend Framework), Modern JavaScript , Create React App(To create React projects), Java, Spring Boot (REST API Framework), Spring (Dependency Management), Spring Security (Authentication and Authorization - Basic and JWT), BootStrap (Styling Pages), Maven (dependencies management), Node (npm), Visual Studio Code (JavaScript IDE), Eclipse (Java IDE) and Tomcat Embedded Web Server.

We will help you set up each one of these.

React is a view framework providing a great deal of flexibility in integrating with a wide range of frameworks to provide a wide range of features. Spring Boot is an awesome Java framework to build RESTful API and Microservices. Lets combine these frameworks and create an awesome java full stack web application.

Requirements:
  • You have an attitude to learn while having fun :)
  • You have some programming experience with JavaScript, Java and Spring.
  • We will help you learn the basics of Modern JavaScript, Spring Boot and JPA
  • We will help you install Chrome, Eclipse, Visual Studio Code and Node JS (for npm)

Who this course is for:

  • You want to develop your first full stack application with React and Spring Boot
  • You are a Java Developer aiming to get started with Full Stack Development with React and Spring Boot
  • You are a Spring Boot Developer looking to Build a Full Stack Application with React
  • You want to learn the fundamental building blocks of React Frontend Framework
  • You want to learn to build basic RESTful API and Services with Spring Boot Framework
  • You want to learn how to Secure REST API with Spring Boot and Spring Security with Basic Authentication and JWT

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 use Spring Security to configure Basic Authentication and JWT
  • You will learn to Solve the Challenges of Connecting a React Frontend to a RESTful API
  • You will learn the basics of React - Components - JSX, State and Props
  • You will learn to connect REST API to JPA/Hibernate with Spring Boot
  • You will develop a Todo Management Full Stack Application step by step with login and logout functionalities
  • You will learn to secure RESTful API with Spring Boot and Spring Security

Watch Online

Join premium to watch
Go to premium
# Title Duration
1 Full Stack Application with React and Spring Boot - Introduction 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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

MERN STACK 2022 - Build Ultimate CMS (WordPress Clone)

MERN STACK 2022 - Build Ultimate CMS (WordPress Clone)

Sources: udemy
Learn to build FullStack JavaScript Web Apps using MERN (MongoDB ExpressJs ReactJs NodeJS) Stack If you love learning new skills and building real world apps wi
34 hours 4 minutes 17 seconds
Building Your First App with Spring Boot and Angular

Building Your First App with Spring Boot and Angular

Sources: pluralsight
Spring Boot and Angular have forever changed how web applications are built. Understanding how they work is essential for any full-stack developer. In this course, Building Your...
2 hours 22 minutes 15 seconds
Server Side Rendering with React and Redux

Server Side Rendering with React and Redux

Sources: udemy, Stephen Grider
Go beyond the basics of React and Redux! This course will teach you to combine the ultra-popular React v16, Redux, React Router, and Express technologies to bu
8 hours 14 minutes 30 seconds
Advanced Animating React with Framer Motion

Advanced Animating React with Framer Motion

Sources: leveluptutorials
Welcome to Advanced Animating React with Framer Motion! In this series, we will dive into more advanced concepts as well as discuss what is new in Framer Motion
2 hours 57 minutes 30 seconds
React JS 19 Crash Course | Build an App and Master React in 2 Hours

React JS 19 Crash Course | Build an App and Master React in 2 Hours

Sources: jsmastery.pro, Adrian Hajdin
This course offers a practical approach: clear explanations, real tasks, and necessary tools, so you can not only understand but also immediately apply the new.
2 hours 7 minutes 16 seconds