Go Full Stack with Spring Boot and React [Video]

Book Image

Go Full Stack with Spring Boot and React [Video]

By : In28Minutes Official

Book Image

Go Full Stack with Spring Boot and React [Video]

By: In28Minutes Official

Overview of this book

Welcome to this amazing course on full-stack web development with React and Spring Boot. This course is designed to be the perfect first step as an introduction to React and full-stack development for Java and Spring developers. Zero experience with React and Modern JavaScript? No problem. Start learning now! 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 , the Create React app (to create React projects), Spring Boot (REST API framework), Spring (dependency management), Spring Security (authentication and authorization - basic and JWT), BootStrap (for 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 framework that allows you to build RESTful API and microservices. Let’s combine these frameworks and create an awesome full-stack web application.

Free Chapter

Introduction

Full Stack Application with React and Spring Boot - Introduction

Full Stack Application with React and Spring Boot - Introduction

Getting Started with React - Basics with Components

Step 01 - Understanding Full Stack Application Architecture

Step 02 - Using Create React App to Create and Launch a React Application

Step 03 - Importing React App into Visual Studio Code

Step 04 - Exploring React Project Structure

Step 05 - Introduction to React Components

Step 06 - Playing with React Class Components

Step 07 - Introduction to Function Components in React

Step 08 - Exploring JSX Further - Babel and more

Step 09 - Refactoring components to individual modules and Quick Review of JavaS

Step 10 - Exercise - Creating separate modules for other components

Next Steps with React - Building Counter Application

Step 01 - Introduction to Section - Building Counter Application

Step 02 - Creating Basic React Counter Component

Step 03 - Adding a Button and a Counter to the React Counter Component

Step 04 - Handling click event on the increment button

Step 05 - Adding State to a React Counter Component

Step 06 - Understanding React - Behind the scenes - Virtual Dom

Step 07 - Understanding setState and Using Arrow Functions to avoid this binding

Step 08 - Defining Inline Javascript CSS in JSX

Step 09 - Defining Multiple Counter Buttons and Adding a Component Prop

Step 10 - Understanding React Component Props - Default Value and Type Constrain

Step 11 - Using React Developer Tools Chrome Plugin

Step 12 - Moving State Up - Refactoring to Counter and Counter Button Components

Step 13 - Moving State Up - Adding state to Counter Component

Step 14 - Best Practice - Using Previous State in setState

Step 15 - Adding Decrement Buttons and Reset Button

Step 16 - Quick Review of the Counter Example

Combining Spring Boot and React to Build Full Stack Todo Management Application

Step 01 - Introduction to Todo Management App

Step 02 - Getting Started with Login Component

Step 03 - Understanding React Controlled Component - Adding State to Login

Step 04 - Refactoring to Common Change Event for Multiple Form Elements

Step 05 - Adding Hardcoded Authentication to Login Component

Step 06 - Understanding Conditional Rendering with && in React JSX

Step 07 - Implementing Routing for Login and Welcome Components with React Route

Step 08 - Implementing Routing from Login to Welcome Component

Step 09 - Adding an Error Component for Invalid URIs

Step 10 - Adding Route Parameter for Welcome Component

Step 11 - 01 - Creating a Basic React List Todo Component

Step 11 - 02 - Adding a Link from Welcome to Todo Page and New Todo Attributes

Step 12 - Adding Bootstrap Framework and Creating Components for Header and Foot

Step 13 - Using Bootstrap to Create a Menu with Navigation Links

Step 14 - Enhancing Footer and Creating Logout Component

Step 15 - Styling Login, List Todo and Other Components with CSS and Bootstrap

Step 16 - Using Session Storage to Store User Authentication Token

Step 17 - Implementing Logout to remove User Authentication Token

Step 18 - Enabling Menu Links Based on User Authentication Token

Step 19 - Securing Components using Authenticated Route

Step 20 - Refactoring React Components into JavaScript Modules

Step 21 - Quick Review - Routes, Authenticated Route and Components

Getting Started with Spring Boot REST API Services

Step 22 - What is a Web Service?

Step 23 - Important How Questions related to Web Services

Step 24 - Web Services - Key Terminology

Step 25 - Introduction to RESTful Web Services

Step 26 - Initializing a RESTful Services Project with Spring Boot

Step 27 - Creating a Spring Boot Hello World Service

Step 28 - Enhancing the Spring Boot Hello World Service to return a Bean

Step 29 - Quick Review of Spring Boot Auto Configuration and Dispatcher Servlet

Step 30 - Enhancing the Hello World Service with a Path Variable

Connecting Spring Boot REST API with React Frontend

Step 31 - Connecting React with Restful API - 1 - Preparing Welcome Page

Step 32 - Connecting React with Restful API - 2 - Understanding Axios HTTP Cleint

Step 33 - Connecting React with Restful API - 3 - Running React App on Port 4200

Step 34 - Connecting React with Restful API - 4 - Adding Axios and Creating Hel

Step 35 - Connecting React with Restful API - 5 - Allow Cross Origin Requests Fr

Step 36 - Connecting React with Restful API - 6 - Quick Review

Step 37 - Calling Hello World Bean JSON API from React Frontend

Step 38 - Calling Hello World HTTP Service with Path Variables

Step 39 - Handling API Error Responses in React Frontend

Step 40 - Designing RESTful Services for Todo Resource

Step 41 - Creating Spring Boot REST API for retrieving Todo List

Step 42 - Connecting React Frontend with Todo List RESTful Service

Step 43 - Understanding Important React Lifecycle Methods

Step 44 - Creating Spring Boot REST API to delete a Todo - 1 - Create DELETE Req

Step 45 - Creating Spring Boot REST API to delete a Todo - Execute DELETE Reques

Step 46 - Adding Delete Todo Feature to React Frontend

Step 47 - Creating Todo Component and Handle Routing

Step 48 - Designing Todo Form with moment, Formik and Bootstrap

Step 49 - Initializing and Handling Form Submit with Formik

Step 50 - Implementing Form Validation with Formik

Step 51 - Creating Retrieve Todo Spring Boot API and Connecting React

Step 52 - Creating Spring Boot REST API for Updating Todo - PUT Request Method

Step 53 - Creating Spring Boot REST API for Creating a Todo - POST Request Metho

Step 54 - RESTful Web Services - Best Practices

Step 55 - Implementing Update Todo Feature in React Frontend

Step 56 - Implementing New Todo Feature in React Frontend

Getting Started with Spring Security and Basic Auth

Step 57 - Overview of Security with Basic Auth and JWT

Step 58 - Setting up Spring Security

Step 59 - Configure standard userid and password

Step 60 - Enhancing React Welcome Data Service to use Basic Auth

Step 61 - Configure Spring Security to disable CSRF and enable OPTION Requests

Step 62 - Creating React Axios Interceptor to add Basic Auth Header

Step 63 - Remove Hard Coding of User Credentials

Step 64 - Create Basic Authentication RESTful Service in Spring Boot

Step 65 - Enhance React Frontend to use Basic Auth API to Validate Login

Getting Started with JWT

Step 66 - Introduction to JWT

Step 67 - Importing JWT Framework into Eclipse

Step 68 - Quick Tip - Resolving JWT Compilation Errors

Step 69 - Executing JWT Resources - Get Token and Refresh Token

Step 70 - Understanding JWT Spring Security Framework Setup

Step 71 - Creating a New User with Encoded Password

Step 72 - Using JWT Token in React Frontend

Step 73 - Best Practice - Use Constants for URLs and Tokens

Integrating with the Backend using JPA and Hibernate

Step 74 - Setting up Todo Entity and Populating Data

Step 75 - Connecting React with GET REST APIs connected to JPA Repository

Step 76 - Connecting POST, PUT and DELETE REST APIs to JPA Repository

Step 77 - Connecting React Frontend with JPA POST, PUT and DELETE REST APIs

Appendix - Spring Boot in 10 Steps

Step 01 - Introduction to Spring Boot - Goals and Important Features

Step 02 - Developing Spring Applications before Spring Boot

Step 03 - Using Spring Initializr to create a Spring Boot Application

Step 04 - Creating a Simple REST Controller

Step 05 - What is Spring Boot Auto Configuration?

Step 06 - Spring Boot vs Spring vs Spring MVC

Step 07 - Spring Boot Starter Projects - Starter Web and Starter JPA

Step 08 - Overview of different Spring Boot Starter Projects

Step 09 - Spring Boot Actuator

Step 10 - Spring Boot Developer Tools

First 10 Steps in JPA with H2 in-memory database

Step 01 - Object Relational Impedence Mismatch - Understanding the problem that

Step 02 - World before JPA - JDBC, Spring JDBC and myBatis

Step 03 - Introduction to JPA

Step 04 - Creating a JPA Project using Spring Initializr

Step 05 - Defining a JPA Entity - User

Step 06 - Defining a Service to manage the Entity - UserService and EntityManage

Step 07 - Using a Command Line Runner to save the User to database.

Step 08 - Magic of Spring Boot and In Memory Database H2

Step 09 - Introduction to Spring Data JPA

Step 10 - More JPA Repository - findById and findAll

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Chapter 5

Getting Started with Spring Boot REST API Services

Content Locked

Section 6

Step 27 - Creating a Spring Boot Hello World Service

Getting Started with Spring Boot REST API Services: Step 27 - Creating a Spring Boot Hello World Service