0% found this document useful (0 votes)
1 views40 pages

Go Java Full Stack With Spring Boot and React

The Spring & Spring Boot Interview Guide provides a comprehensive roadmap for developing a full stack application using React and Spring Boot. It covers installation guides, course overviews, and step-by-step instructions for building a Todo Management Application, including topics such as React components, RESTful APIs, and Spring Security. The guide is designed for individuals with prior experience in Java and JavaScript, aiming to enhance their skills in full stack development.

Uploaded by

Luong Hong Giang
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
1 views40 pages

Go Java Full Stack With Spring Boot and React

The Spring & Spring Boot Interview Guide provides a comprehensive roadmap for developing a full stack application using React and Spring Boot. It covers installation guides, course overviews, and step-by-step instructions for building a Todo Management Application, including topics such as React components, RESTful APIs, and Spring Security. The guide is designed for individuals with prior experience in Java and JavaScript, aiming to enhance their skills in full stack development.

Uploaded by

Luong Hong Giang
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Spring & Spring Boot Interview Guide

Spring & Spring Boot Interview Guide


Table of Contents

1 Your First Full Stack Application with React and Spring Boot.........................2

Take your first steps towards becoming a Full Stack Developer with
React and Spring Boot.............................................................................................2
References.....................................................................................................................................2
Installation Guides....................................................................................................................3
Getting Started with Spring, Spring Boot and JPA.................................................................4
Course Overview........................................................................................................................4
Introduction....................................................................................................................................................4
What You will learn....................................................................................................................................4
Requirements.................................................................................................................................................5
Step Wise Details........................................................................................................................................5
Code Snippets............................................................................................................................10
Core JWT Components............................................................................................................................10
Course Recording Notes........................................................................................................................22
Templates.....................................................................................................................................25
Welcome Message.....................................................................................................................................25
Thank You for completing the course message.....................................................................26
Bonus Lectures...........................................................................................................................................26
Other Courses..............................................................................................................................................26
About in28Minutes.................................................................................................................26
Our Beliefs.....................................................................................................................................................27
Our Approach...............................................................................................................................................27
What You will Learn?.............................................................................................................28
Big Picture.....................................................................................................................................................28
TypeScript and JavaScript....................................................................................................................28
React Basics..................................................................................................................................................28
Running React Applications................................................................................................................29
Automated Tests and Code Quality..............................................................................29
Course Details...........................................................................................................................29
Request URLs and Examples..............................................................................................................29
JWT Authenticate.......................................................................................................................................31
Useful Links...................................................................................................................................................31
Connection to MySQL............................................................................................................32
Diagrams.......................................................................................................................................32
Todo 35
Next Steps...................................................................................................................................36

Page 1 of 40
Spring & Spring Boot Interview Guide

1 Your First Full Stack Application with React and


Spring Boot
Take your first steps towards becoming a Full Stack Developer with
React and Spring Boot
React is a one of the most popular front end view frameworks
 Components
 JSX
 State
 Props
In combination with other libraries, React helps in doing a wide variety of
front end features
 Forms Handling
 Routing System
 HTTP Requests
Spring Boot is an awesome framework to build RESTful API and
Microservices.
In this course, lets combine these awesome frameworks to create your first
full stack web application.
References
 [Link]
 [Link]
 [Link]
Installation Guides
Required Tools
 Node v8+ for npm
 Visual Studio Code - Latest Version
 Java 8+
 Eclipse - Oxygen+ - (Embedded Maven From Eclipse)
Installing Node Js (npm) & Visual Studio Code
 Playlist - [Link]
list=PLBBog2r6uMCQN4X3Aa_jM9qVjgMCHMWx6
 Steps

Page 2 of 40
Spring & Spring Boot Interview Guide

o Step 01 - Installing NodeJs and NPM - Node Package Manager


o Step 02 - Quick Introduction to NPM
o Step 03 - Installing Visual Studio Code - Front End Java Script
Editor
Installing Java, Eclipse & Embedded Maven
 Playlist - [Link]
list=PLBBog2r6uMCSmMVTW_QmDLyASBvovyAO3
 Steps
o 0 - Overview - Installation Java, Eclipse and Maven
o 1 - Installing Java JDK
o 2 - Installing Eclipse IDE
o 3 - Using Embedded Maven in Eclipse
o 4 - Troubleshooting Java, Eclipse and Maven
Troubleshooting Installations
 Node JS and NPM
o [Link]
o [Link]
 Visual Studio Code
o [Link]
o [Link]
 Eclipse and Embedded Maven
o PDF
: [Link]
InstallationGuide-JavaEclipseAndMaven_v2.pdf
o GIT Repository For
Installation : [Link]
steps
Getting Started with Spring, Spring Boot and JPA
 Spring Tutorial for Beginners - [Link]
v=edgZo2g-LTM
 Spring Boot Tutorial for Beginners - [Link]
v=pcdpk3Yd1EA
 JPA and Hibernate Tutorial for Beginners
- [Link]

Page 3 of 40
Spring & Spring Boot Interview Guide

Course Overview
Introduction
Developing your first full stack application with React and Spring Boot is fun.
In this course, you will learn the basics of full stack development developing
a Basic Todo Management Application using React, Spring Boot and Spring
Security Frameworks.
You will build the application step by step - in more than 50 steps. This
course would be a perfect first step as an introduction to React and Full
Stack Development.
You will be using React (Frontend View Framework), React Create App(To
create React project), Various JavaScript Libraries (Axios, Formik, React
Router), 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.
What You will learn
 You will develop your first full stack application with React and Spring
Boot
 You will learn the basic of React - React Components and Routing
 You will learn 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 an React Frontend
to a RESTful API
 You will learn to connect REST API to JPA/Hibernate with Spring Boot
 You will learn to use a wide variety of Spring Boot Starter Projects -
Spring Boot Web, and Spring Boot Data JPA
 You will understand the best practices in designing RESTful web
services
 You will develop a Todo Management Full Stack Application step by
step with login and logout functionalities
 You will learn the magic of Spring Boot - Auto Configuration, Spring
Initializr and Starter Projects
 You will understand how to make best use of Spring Boot Actuator and
Spring Boot Developer Tools

Page 4 of 40
Spring & Spring Boot Interview Guide

 You will understand and use the embedded servlet container options
provided by Spring Boot
Requirements
 You should have prior experience with Java, Basic JavaScript and
Spring Framework.
 You should have Chrome browser installed.
 We will help you install Eclipse, Visual Studio Code and Node JS(for
npm)
 We will help you install Chrome Restlet Client Plugin and Chrome React
DevTools Plugin
 We will help you learn the basics of Modern JavaScript, Spring Boot and
JPA.
Step Wise Details
 000 - Full Stack Application with React and Spring Boot - Introduction
 000 - Step 00 - Getting Started with the Course
Getting Started with React - Basics with Components
 01 Step 01 - Understanding Full Stack Application Architecture
 01 Step 02 - Using Create React App to Create and Launch a React
Application
 01 Step 03 - Importing React App into Visual Studio Code
 01 Step 04 - Exploring React Project Structure
 01 Step 05 - Introduction to React Components
 01 Step 06 - Playing with React Class Components
 01 Step 07 - Introduction to Function Components in React
 01 Step 08 - Exploring JSX Further - Babel and more
 01 Step 09 - Refactoring components to individual modules and Quick
Review of JavaScript Modules
 01 Step 10 - Exercise - Creating seperate modules for other
components
Next Steps with React - Building Counter Application
 02 Step 01 - Introduction to Section - Building Counter Application
 02 Step 02 - Creating Basic React Counter Component
 02 Step 03 - Adding a Button and a Counter to the React Counter
Component
 02 Step 04 - Handling click event on the increment button
 02 Step 05 - Adding State to a React Counter Component

Page 5 of 40
Spring & Spring Boot Interview Guide

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


 02 Step 07 - Understanding setState and Using Arrow Functions to
avoid this binding
 02 Step 08 - Defining Inline Javascript CSS in JSX
 02 Step 09 - Defining Multiple Counter Buttons and Adding a
Component Prop
 02 Step 10 - Understanding React Component Props - Default Value
and Type Constraints
 02 Step 11 - Using React Developer Tools Chrome Plugin
 02 Step 12 - Moving State Up - Refactoring to Counter and Counter
Button Components
 02 Step 13 - Moving State Up - Adding state to Counter Component
 02 Step 14 - Best Practice - Using Previous State in setState
 02 Step 15 - Adding Decrement Buttons and Reset Button
 02 Step 16 - Quick Review of the Counter Example
Combining Spring Boot and React to Build Full Stack Todo
Management Application
 03 Step 01 - Introduction to Todo Management App
 03 Step 02 - Getting Started with Login Component
 03 Step 03 - Understanding React Controlled Component - Adding
State to Login Component
 03 Step 04 - Refactoring to Common Change Event for Multiple Form
Elements
 03 Step 05 - Adding Hardcoded Authentication to Login Component
 03 Step 06 - Understanding Conditional Rendering with && in React JSX
 03 Step 07 - Implementing Routing for Login and Welcome
Components with React Router
 03 Step 08 - Implementing Routing from Login to Welcome Component
 03 Step 09 - Adding an Error Component for Invalid URIs
 03 Step 10 - Adding Route Parameter for Welcome Component
 03 Step 11 - 01 - Creating a Basic React List Todo Component
 03 Step 11 - 02 - Adding a Link from Welcome to Todo Page and New
Todo Attributes
 03 Step 12 - Adding Bootstrap Framework and Creating Components
for Header and Footer
 03 Step 13 - Using Bootstrap to Create a Menu with Navigation Links

Page 6 of 40
Spring & Spring Boot Interview Guide

 03 Step 14 - Enhancing Footer and Creating Logout Component


 03 Step 15 - Styling Login, List Todo and Other Components with CSS
and Bootstrap
 03 Step 16 - Using Session Storage to Store User Authentication Token
 03 Step 17 - Implementing Logout to remove User Authentication
Token
 03 Step 18 - Enabling Menu Links Based on User Authentication Token
 03 Step 19 - Securing Components using Authenticated Route
 03 Step 20 - Refactoring React Components into JavaScript Modules
 03 Step 21 - Quick Review - Routes, Authenticated Route and
Components
Getting Started with Spring Boot REST API Services
 03 Step 22 -- What is a Web Service?
 03 Step 23 -- Important How Questions related to Web Services
 03 Step 24 -- Web Services - Key Terminology
 03 Step 25 -- Introduction to RESTful Web Services
 03 Step 26 -- Initializing a RESTful Services Project with Spring Boot
 03 Step 27 -- Creating a Spring Boot Hello World Service
 03 Step 28 -- Enhancing the Spring Boot Hello World Service to return a
Bean
 03 Step 29 -- Quick Review of Spring Boot Auto Configuration and
Dispatcher Servlet - What's happening in the background?
 03 Step 30 -- Enhancing the Hello World Service with a Path Variable
Connecting Spring Boot REST API with React Frontend
 03 Step 31 - Connecting React with Restful API - 1 - Preparing Welcome
Page
 03 Step 32 - Connecting React with Restful API - 2 - Understanding
Axios HTTP Cleint Framework and Promises
 03 Step 33 - Connecting React with Restful API - 3 - Running React App
on Port 4200
 03 Step 34 - Connecting React with Restful API - 4 - Adding Axios and
Creating HelloWorldService
 03 Step 35 - Connecting React with Restful API - 5 - Allow Cross Origin
Requests From Spring Boot
 03 Step 36 - Connecting React with Restful API - 6 - Quick Review
 03 Step 37 - Calling Hello World Bean JSON API from React Frontend

Page 7 of 40
Spring & Spring Boot Interview Guide

 03 Step 38 - Calling Hello World HTTP Service with Path Variables


 03 Step 39 - Handling API Error Responses in React Frontend
 03 Step 40 - Designing RESTful Services for Todo Resource
 03 Step 41 -- Creating Spring Boot REST API for retrieving Todo List
 03 Step 42 - Connecting React Frontend with Todo List RESTful Service
 03 Step 43 - Understanding Important React Lifecycle Methods
 03 Step 44 -- Creating Spring Boot REST API to delete a Todo - 1 -
Create DELETE Request Method
 03 Step 45 -- Creating Spring Boot REST API to delete a Todo - Execute
DELETE Request Method
 03 Step 46 - Adding Delete Todo Feature to React Frontend
 03 Step 47 - Creating Todo Component and Handle Routing
 03 Step 48 - Designing Todo Form with moment, Formik and Bootstrap
 03 Step 49 - Initializing and Handling Form Submit with Formik
 03 Step 50 - Implementing Form Validation with Formik
 03 Step 51 - Creating Retrieve Todo Spring Boot API and Connecting
React
 03 Step 52 -- Creating Spring Boot REST API for Updating Todo - PUT
Request Method
 03 Step 53 -- Creating Spring Boot REST API for Creating a Todo - POST
Request Method
 03 Step 54 -- RESTful Web Services - Best Practices
 03 Step 55 - Implementing Update Todo Feature in React Frontend
 03 Step 56 - Implementing New Todo Feature in React Frontend
Getting Started with Spring Security and Basic Auth
 03 Step 57 -- Overview of Security with Basic Auth and JWT
 03 Step 58 -- Setting up Spring Security
 03 Step 59 -- Configure standard userid and password
 03 Step 60 - Enhancing React Welcome Data Service to use Basic Auth
 03 Step 61 -- Configure Spring Security to disable CSRF and enable
OPTION Requests
 03 Step 62 - Creating React Axios Interceptor to add Basic Auth Header
 03 Step 63 - Remove Hard Coding of User Credentials
 03 Step 64 -- Create Basic Authentication RESTful Service in Spring
Boot

Page 8 of 40
Spring & Spring Boot Interview Guide

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


Login Credentials
Getting Started with JWT
 03 Step 66 -- Introduction to JWT
 03 Step 67 - Importing JWT Framework into Eclipse
 03 Step 68 - Quick Tip - Resolving JWT Compilation Errors
 03 Step 69 -- Executing JWT Resources - Get Token and Refresh Token
 03 Step 70 -- Understanding JWT Spring Security Framework Setup
 03 Step 71 -- Creating a New User with Encoded Password
 03 Step 72 - Using JWT Token in React Frontend
 03 Step 73 - Best Practice - Use Constants for URLs and Tokens
Integrating with the Backend using JPA and Hibernate
 03 Step 74 -- Setting up Todo Entity and Populating Data
 03 Step 75 - Connecting React with GET REST APIs connected to JPA
Repository
 03 Step 76 - Connecting POST, PUT and DELETE REST APIs to JPA
Repository
 03 Step 77 - Connecting React Frontend with JPA POST, PUT and
DELETE REST APIs
Spring Boot in 10 Steps
 Introduction to 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
 Introduction to JPA in 10 Steps

Page 9 of 40
Spring & Spring Boot Interview Guide

 Step 01 - Object Relational Impedence Mismatch - Understanding the


problem that JPA solves
 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
EntityManager
 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
for file in *; do mv "${file}" "${file//-/ }"; done
for file in *; do mv "${file}" "${file// / - }"; done
for file in *; do mv "${file}" "${file//01 Step/Step}"; done
Code Snippets
Core JWT Components
[Link]=mySecret
[Link]=/authenticate
[Link]=/refresh
[Link]=Authorization
[Link]=604800
package [Link];

import [Link];
import [Link];
import [Link];

import [Link];
import [Link];
import [Link];
import [Link];

@Service
public class JwtInMemoryUserDetailsService implements UserDetailsService {

static List<JwtUserDetails> inMemoryUserList = new ArrayList<>();

static {
[Link](new JwtUserDetails(1L, "in28minutes",
"$2a$10$3zHzb.Npv1hfZbLEU5qsdOju/tk2je6W6PnNnY.c1ujWPcZh4PL6e", "ROLE_USER_2"));
}

@Override
public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
Optional<JwtUserDetails> findFirst = [Link]()

Page 10 of 40
Spring & Spring Boot Interview Guide

.filter(user -> [Link]().equals(username)).findFirst();

if (![Link]()) {
throw new UsernameNotFoundException([Link]("USER_NOT_FOUND '%s'.", username));
}

return [Link]();
}

@Component
public class JwtTokenAuthorizationOncePerRequestFilter extends OncePerRequestFilter {

private final Logger logger = [Link]([Link]());

@Autowired
private UserDetailsService jwtInMemoryUserDetailsService;

@Autowired
private JwtTokenUtil jwtTokenUtil;

@Value("${[Link]}")
private String tokenHeader;

@Override
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain
chain) throws ServletException, IOException {
[Link]("Authentication Request For '{}'", [Link]());

final String requestTokenHeader = [Link]([Link]);

String username = null;


String jwtToken = null;
if (requestTokenHeader != null && [Link]("Bearer ")) {
jwtToken = [Link](7);
try {
username = [Link](jwtToken);
} catch (IllegalArgumentException e) {
[Link]("JWT_TOKEN_UNABLE_TO_GET_USERNAME", e);
} catch (ExpiredJwtException e) {
[Link]("JWT_TOKEN_EXPIRED", e);
}
} else {
[Link]("JWT_TOKEN_DOES_NOT_START_WITH_BEARER_STRING");
}

[Link]("JWT_TOKEN_USERNAME_VALUE '{}'", username);


if (username != null && [Link]().getAuthentication() == null) {

UserDetails userDetails = [Link](username);

if ([Link](jwtToken, userDetails)) {
UsernamePasswordAuthenticationToken usernamePasswordAuthenticationToken = new
UsernamePasswordAuthenticationToken(userDetails, null, [Link]());

Page 11 of 40
Spring & Spring Boot Interview Guide

[Link](new
WebAuthenticationDetailsSource().buildDetails(request));

[Link]().setAuthentication(usernamePasswordAuthenticationToken);
}
}

[Link](request, response);
}
}

@Component
public class JwtTokenUtil implements Serializable {

static final String CLAIM_KEY_USERNAME = "sub";


static final String CLAIM_KEY_CREATED = "iat";
private static final long serialVersionUID = -3301605591108950415L;
private Clock clock = [Link];

@Value("${[Link]}")
private String secret;

@Value("${[Link]}")
private Long expiration;

public String getUsernameFromToken(String token) {


return getClaimFromToken(token, Claims::getSubject);
}

public Date getIssuedAtDateFromToken(String token) {


return getClaimFromToken(token, Claims::getIssuedAt);
}

public Date getExpirationDateFromToken(String token) {


return getClaimFromToken(token, Claims::getExpiration);
}

public <T> T getClaimFromToken(String token, Function<Claims, T> claimsResolver) {


final Claims claims = getAllClaimsFromToken(token);
return [Link](claims);
}

private Claims getAllClaimsFromToken(String token) {


return [Link]().setSigningKey(secret).parseClaimsJws(token).getBody();
}

private Boolean isTokenExpired(String token) {


final Date expiration = getExpirationDateFromToken(token);
return [Link]([Link]());
}

private Boolean ignoreTokenExpiration(String token) {


// here you specify tokens, for that the expiration is ignored
return false;
}

Page 12 of 40
Spring & Spring Boot Interview Guide

public String generateToken(UserDetails userDetails) {


Map<String, Object> claims = new HashMap<>();
return doGenerateToken(claims, [Link]());
}

private String doGenerateToken(Map<String, Object> claims, String subject) {


final Date createdDate = [Link]();
final Date expirationDate = calculateExpirationDate(createdDate);

return [Link]().setClaims(claims).setSubject(subject).setIssuedAt(createdDate)
.setExpiration(expirationDate).signWith(SignatureAlgorithm.HS512, secret).compact();
}

public Boolean canTokenBeRefreshed(String token) {


return (!isTokenExpired(token) || ignoreTokenExpiration(token));
}

public String refreshToken(String token) {


final Date createdDate = [Link]();
final Date expirationDate = calculateExpirationDate(createdDate);

final Claims claims = getAllClaimsFromToken(token);


[Link](createdDate);
[Link](expirationDate);

return [Link]().setClaims(claims).signWith(SignatureAlgorithm.HS512, secret).compact();


}

public Boolean validateToken(String token, UserDetails userDetails) {


JwtUserDetails user = (JwtUserDetails) userDetails;
final String username = getUsernameFromToken(token);
return ([Link]([Link]()) && !isTokenExpired(token));
}

private Date calculateExpirationDate(Date createdDate) {


return new Date([Link]() + expiration * 1000);
}
}

@Component
public class JwtUnAuthorizedResponseAuthenticationEntryPoint implements AuthenticationEntryPoint,
Serializable {

private static final long serialVersionUID = -8970718410437077606L;

@Override
public void commence(HttpServletRequest request, HttpServletResponse response,
AuthenticationException authException) throws IOException {
[Link](HttpServletResponse.SC_UNAUTHORIZED,
"You would need to provide the Jwt Token to Access This resource");
}
}

public class JwtUserDetails implements UserDetails {

private static final long serialVersionUID = 5155720064139820502L;

Page 13 of 40
Spring & Spring Boot Interview Guide

private final Long id;


private final String username;
private final String password;
private final Collection<? extends GrantedAuthority> authorities;

public JwtUserDetails(Long id, String username, String password, String role) {


[Link] = id;
[Link] = username;
[Link] = password;

List<SimpleGrantedAuthority> authorities = new ArrayList<SimpleGrantedAuthority>();


[Link](new SimpleGrantedAuthority(role));

[Link] = authorities;
}

@JsonIgnore
public Long getId() {
return id;
}

@Override
public String getUsername() {
return username;
}

@JsonIgnore
@Override
public boolean isAccountNonExpired() {
return true;
}

@JsonIgnore
@Override
public boolean isAccountNonLocked() {
return true;
}

@JsonIgnore
@Override
public boolean isCredentialsNonExpired() {
return true;
}

@JsonIgnore
@Override
public String getPassword() {
return password;
}

@Override
public Collection<? extends GrantedAuthority> getAuthorities() {
return authorities;
}

@Override

Page 14 of 40
Spring & Spring Boot Interview Guide

public boolean isEnabled() {


return true;
}

@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class JWTWebSecurityConfig extends WebSecurityConfigurerAdapter {

@Autowired
private JwtUnAuthorizedResponseAuthenticationEntryPoint
jwtUnAuthorizedResponseAuthenticationEntryPoint;

@Autowired
private UserDetailsService jwtInMemoryUserDetailsService;

@Autowired
private JwtTokenAuthorizationOncePerRequestFilter jwtAuthenticationTokenFilter;

@Value("${[Link]}")
private String authenticationPath;

@Autowired
public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
auth
.userDetailsService(jwtInMemoryUserDetailsService)
.passwordEncoder(new BCryptPasswordEncoder());
}

//@Bean
//public PasswordEncoder passwordEncoderBean() {
// return new BCryptPasswordEncoder();
//}

@Bean
@Override
public AuthenticationManager authenticationManagerBean() throws Exception {
return [Link]();
}

@Override
protected void configure(HttpSecurity httpSecurity) throws Exception {
httpSecurity
.csrf().disable()
.exceptionHandling().authenticationEntryPoint(jwtUnAuthorizedResponseAuthenticationEntryPoint
).and()
.sessionManagement().sessionCreationPolicy([Link]).and()
.authorizeRequests()
.anyRequest().authenticated();

httpSecurity
.addFilterBefore(jwtAuthenticationTokenFilter, [Link]);

httpSecurity

Page 15 of 40
Spring & Spring Boot Interview Guide

.headers()
.frameOptions().sameOrigin() //H2 Console Needs this setting
.cacheControl(); //disable caching
}

@Override
public void configure(WebSecurity webSecurity) throws Exception {
webSecurity
.ignoring()
.antMatchers(
[Link],
authenticationPath
)
.antMatchers([Link], "/**")
.and()
.ignoring()
.antMatchers(
[Link],
"/" //Other Stuff You want to Ignore
)
.and()
.ignoring()
.antMatchers("/h2-console/**/**");//Should not be in Production!
}
}

@RestController
@CrossOrigin(origins="[Link]
public class JwtAuthenticationRestController {

@Value("${[Link]}")
private String tokenHeader;

@Autowired
private AuthenticationManager authenticationManager;

@Autowired
private JwtTokenUtil jwtTokenUtil;

@Autowired
private UserDetailsService jwtInMemoryUserDetailsService;

@RequestMapping(value = "${[Link]}", method = [Link])


public ResponseEntity<?> createAuthenticationToken(@RequestBody JwtTokenRequest
authenticationRequest)
throws AuthenticationException {

authenticate([Link](), [Link]());

final UserDetails userDetails =


[Link]([Link]());

final String token = [Link](userDetails);

return [Link](new JwtTokenResponse(token));


}

Page 16 of 40
Spring & Spring Boot Interview Guide

@RequestMapping(value = "${[Link]}", method = [Link])


public ResponseEntity<?> refreshAndGetAuthenticationToken(HttpServletRequest request) {
String authToken = [Link](tokenHeader);
final String token = [Link](7);
String username = [Link](token);
JwtUserDetails user = (JwtUserDetails)
[Link](username);

if ([Link](token)) {
String refreshedToken = [Link](token);
return [Link](new JwtTokenResponse(refreshedToken));
} else {
return [Link]().body(null);
}
}

@ExceptionHandler({ [Link] })
public ResponseEntity<String> handleAuthenticationException(AuthenticationException e) {
return [Link]([Link]).body([Link]());
}

private void authenticate(String username, String password) {


[Link](username);
[Link](password);

try {
[Link](new UsernamePasswordAuthenticationToken(username,
password));
} catch (DisabledException e) {
throw new AuthenticationException("USER_DISABLED", e);
} catch (BadCredentialsException e) {
throw new AuthenticationException("INVALID_CREDENTIALS", e);
}
}
}

public class AuthenticationException extends RuntimeException {


public AuthenticationException(String message, Throwable cause) {
super(message, cause);
}
}

public class JwtTokenRequest implements Serializable {

private static final long serialVersionUID = -5616176897013108345L;

private String username;


private String password;

public JwtTokenRequest() {
super();
}

public JwtTokenRequest(String username, String password) {


[Link](username);
[Link](password);
}

Page 17 of 40
Spring & Spring Boot Interview Guide

public String getUsername() {


return [Link];
}

public void setUsername(String username) {


[Link] = username;
}

public String getPassword() {


return [Link];
}

public void setPassword(String password) {


[Link] = password;
}
}

public class JwtTokenResponse implements Serializable {

private static final long serialVersionUID = 8317676219297719109L;

private final String token;

public JwtTokenResponse(String token) {


[Link] = token;
}

public String getToken() {


return [Link];
}
}
Course Recording Notes
Preview Video
 Welcome to course on *** in ** simple steps.
 I'm Ranga Karanam. I've so and so much experience with ... I've been
using this framework for ...
 At in28minutes, we ask one question everyday - How to create more
effective courses? All our success - *** students on Udemy and ***
subscribers on Youtube - is a result of this pursuit of excellence.
 You will develop *** and *** using ***
 You will learn the basics like *** and move on to the advanced
concepts like ***.
 You will use
o ... todo ...
o Maven for dependency management, building and running the
application in tomcat.
o Eclipse IDE

Page 18 of 40
Spring & Spring Boot Interview Guide

 All the code for this course and the step by step details are in our
Github repository.
 We have an awesome installation guide to help you install Maven and
Eclipse. You are NOT expected to have any experience with Eclipse,
Maven, or Tomcat.
 What are we waiting for? Lets have some fun with *** in *** steps. We
had a lot of fun creating this course for you and We are confident that
you will have a lot of fun. I hope you are as excited as we are to learn
more. Go ahead and enroll for the course. Or take a test drive with a
free preview. See you in the course.
Course Intro Video
 Welcome to this course on ***. We are excited to teach you how to
build awesome ***.
 In this video, we introduce you to the different sections of the course.
By the end of the video you should have a clear idea of how to make
the best use of the course.
 We have organized this course into 6 different sections. We have
designed each section to be independent of each other. That means,
you have the flexibility of customizing the course based on your skills
and your needs.
 If you have experience with Spring and Spring Boot, you can skip these
sections.
 Lets get a quick overview of each of the sections now:
o Section I is an one hour introduction to Spring
o Section II is an one hour introduction to Spring Boot..
 In summary this is your course. Feel free to create your own path and
tailor it to your needs.
 I will see you in the next video where we introduce you to our github
repository
Overview of the Github Repository
 Welcome Back. In this video, we give you an overview of how our
github repository for this course is organized.
 Github repository for this course is at ****.
 Home page of the github repository has an overview of the course and
installation guide
 For each hands-on section of the course, we have a seperate folder in
the repository. You can see these five folders for *** different sections
o Folder 1 contains ...
o Folder 2 contains ...

Page 19 of 40
Spring & Spring Boot Interview Guide

o Folder 3 contains ...


 Each of these folders contain
o Step by Step details of the sections
o Complete code example at the end of the section
o Intermediate backups at different stages of the section
o Useful Links
 For example, let's look at the folder for ***. Home page of the folder
contains
o Step by step details : What are we going to do in each step
o Useful Links : Different links that would be useful during the
course
o Complete Code, Snippets and Examples : Example code that
your can use during the section. For example, If you are using a
class and you do not know the package of the class, you can
search here and quickly find what you would need.
o Intermediate Backups : You can download any of these zips and
import them into Eclipse as maven projects. File > Import >
Existing Maven Projects.
o Understanding our github repository is key part of making best
use of this course. I recommend to spend some time with our
github repository and I will see you in the next video.
Installation of Tools Video
 In this video, we will help you install all the basic tools to get you
started with the course
 We use
o Maven for Dependency Management
o Eclipse as IDE
o ..
 Step by step details to install Java, Eclipse and Maven are in the
installation guide present here. Also included are links to 5 videos that
will help you to install and trouble shoot installations.
 If you have any problems during the course, we recommend you to
look at the troubleshooting section of the installation playlist.
 Get your tools ready and I will see you in the course
Each Section Introduction
 Why is this section important to the course?
 What is discussed in this section?

Page 20 of 40
Spring & Spring Boot Interview Guide

 What is the github folder for this section?


 Can a student skip this sections?
 Is there a trouble shooting guide?
 What are the backups available?
 Are examples in this section dependent on any other section?
Conclusion Video
 Congratulations! You have successfully completed the course on ... We
covered a wide range of topics starting from Spring, Spring Boot to .....
I'm sure you had a lot of fun doing this course. If you loved this course,
we would love to hear from you. Do not forget to leave us a review.
Until we see you in another in28minutes course, here's bye from the
team here at in28minutes.
 To find out more about *** use these References
Templates
Welcome Message

## ADD A FEW SAMPLE REVIEWS AFter a couple of months


## ADD A FEW SAMPLE REVIEWS - in the description of the course

Congratulations on joining this course from in28Minutes.

There are three things you need to understand before you start this course!

1...... Listen + See + Do Hands-on + Repeat = 90% Retention


For the first 2 hours, we repeat a few concepts to help you retain them. .

2...... Set Yourself a Goal


Set 1 hour aside every day for the next week for this course! No exceptions allowed :)

3...... Udemy asks you for a review very early in the course! If you are not ready for giving a review, you
can skip giving a review.

Thank you and enjoy the course,


Ranga From in28Minutes
Thank You for completing the course message
Congratulations on completing the course from in28Minutes.

Good Luck for your future.

Thank you ,
Ranga from in28Minutes
Bonus Lectures
TITLE : Bonus Lecture : Coupons for My Best-Selling Courses -30 Day Money Back Guarantee
I hope you enjoyed it!

Connect and share your success (Course Completion Certificate) on Linked In


- [Link]

Page 21 of 40
Spring & Spring Boot Interview Guide

Here are coupons for many of my best-selling courses. Please click the images/courses below to watch
the course video previews (all of these courses have 30-day 100% money back guarantees):

- Copy relevant courses from [Link]

Other Courses
 300+ Videos and Courses - [Link]
 25 Videos and Articles for Beginners on Spring Boot
About in28Minutes
 At in28Minutes, we ask ourselves one question everyday. How do we
help you learn effectively - that is more quickly and retain more of
what you have learnt?
 We use Problem-Solution based Step-By-Step Hands-on Approach With
Practical, Real World Application Examples.
 Our success on Udemy and Youtube (2 Million Views & 12K
Subscribers) speaks volumes about the success of our approach.
 While our primary expertise is on Development, Design & Architecture
Java & Related Frameworks (Spring, Struts, Hibernate) we are
expanding into the front-end world (Bootstrap, JQuery, React JS).
Our Beliefs
 Best Courses are interactive and fun.
 Foundations for building high quality applications are best laid down
while learning.
Our Approach
 Problem Solution based Step by Step Hands-on Learning
 Practical, Real World Application Examples.
 We use 80-20 Rule. We discuss 20% things used 80% of time in depth.
We touch upon other things briefly equipping you with enough
knowledge to find out more on your own.
 We will be developing a demo application in the course, which could be
reused in your projects, saving hours of your effort.
 We love open source and therefore, All our code is open source too and
available on Github.
Troubleshooting
Rangas-MacBook-Pro:04-10-2018 rangaraokaranam$ node -v

Rangas-MacBook-Pro:04-10-2018 rangaraokaranam$ npm -v


6.4.1

Page 22 of 40
Spring & Spring Boot Interview Guide

#Global
npm uninstall -g React-cli
npm cache verify
npm install -g @React/cli@7.0.3

#Inside the project - If you had an earlier version of React cli


rm -rf node_modules
npm uninstall --save-dev React-cli
npm install --save-dev @React/cli@latest
npm install
 Why Visual Studio Code?
o [Link]
%2F0k2kj45,%2Fm%2F0_x5x3g,%2Fm%2F0134xwrk,%2Fm
%2F0b6h18n
 We use Light Theme
 Install
o Auto Import - Automatically finds, parses and provides code
actions and code completion for all available imports. Works with
Typescript and TSX
o Reload to Activate
What You will Learn?
Big Picture
 What is the High Level Architecture of our Full Stack Application?
 What is an SPA?
 What is React?
TypeScript and JavaScript
 I'm new to TypeScript. Will I be able to adapt to it?
 How does a JavaScript Class compare to a Java Class?
o Packages vs Modules
o import statements
o Decorator vs Annotation
 What is a JavaScript Module?
 How does JavaScript Syntax compare to Java Syntax?

Page 23 of 40
Spring & Spring Boot Interview Guide

o Arrays - Filtering, Spread Operator and Functional Stuff


o Custom Objects
React Basics
 What is React Component?
 What are the conventions for file extensions in React Projects?
 How do you build forms in React? How do you do Form Validation?
 What is Routing?
 How do you implement Routing in React?
 How do you call HTTP Services in React?
Running React Applications
 What is Root Component? What are Bootstrap Components? How is the
React Application Bootstrapped? \src\[Link], \src\
[Link], AppModule, AppComponent
 Do Browsers understand JSX? How does JSX code get converted to
JavaScript code?
Automated Tests and Code Quality
 What are unit tests? How are unit tests organized in React? How is
different from Java?
 How can you run tests? \src\[Link]
 What are coding standards? How can you check coding standards for
React Cli Project? What is Lint? What is Linting? Is there a Standard
Style Guide for React? \[Link]
 How can I run coding standards check for React Projects?
Course Details
Request URLs and Examples
Common Headers
Origin - [Link]
Content-Type - application/json
Authorization
- Bearer *** or
- Basic *****
Retrieve all todos for a user
 GET - [Link]
[
{
id: 1,

Page 24 of 40
Spring & Spring Boot Interview Guide

username: "in28minutes",
description: "Learn to Dance 2",
targetDate: "2018-11-09T12:05:18.647+0000",
: false,
},
{
id: 2,
username: "in28minutes",
description: "Learn about Microservices 2",
targetDate: "2018-11-09T12:05:18.647+0000",
: false,
},
{
id: 3,
username: "in28minutes",
description: "Learn about React",
targetDate: "2018-11-09T12:05:18.647+0000",
: false,
},
]
Retrieve a specific todo
 GET - [Link]
{
id: 1,
username: "in28minutes",
description: "Learn to Dance 2",
targetDate: "2018-11-09T12:05:18.647+0000",
: false,
}
Creating a new todo
 POST to [Link] with BODY of
Request given below
{
"username": "in28minutes",
"description": "Learn to Drive a Car",
"targetDate": "2018-11-09T10:49:23.566+0000",
"done": false
}
Updating a new todo
 [Link] with BODY of Request
given below
{
"id": 1
"username": "in28minutes",
"description": "Learn to Drive a Car",
"targetDate": "2018-11-09T10:49:23.566+0000",
"done": false
}
Delete todo
 DELETE to [Link]

Page 25 of 40
Spring & Spring Boot Interview Guide

JWT Authenticate
 POST to [Link]
{
"username":"ranga",
"password":"password@!23@#!"
}
Response
{
"token":
"eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJyYW5nYSIsImV4cCI6MTU0MjQ3MjA3NCwiaWF0IjoxNTQxODY3M
jc0fQ.kD6UJQyxjSPMzAhoTJRr-Z5UL-
FfgsyxbdseWQvk0fLi7eVXAKhBkWfj06SwH43sY_ZWBEeLuxaE09szTboefw"
}
Other URLS
 Refresh - [Link]
Useful Links
 Our Website
 Facebook
 Twitter
 Google Plus
Connection to MySQL
create sequence hibernate_sequence start with 1 increment by 1

create table todo (


id bigint not null,
description varchar(255),
is_done boolean not null,
target_date timestamp,
username varchar(255),
primary key (id))

Diagrams
 Courtesy [Link]

digraph architecture {
node[style=filled,color="#59C8DE",fontsize=20]
//node [style=filled,color="#D14D28", fontcolor=white];
edge [fontsize=6 ];

VIRTUALDOM[label=<Virtual DOM>];
DOM
REACTAPP[label=<App>];

{rank=same; DOM, REACTAPP};

VIRTUALDOM -> DOM [ label="diff & update" ];


REACTAPP -> VIRTUALDOM [ label="creates" ];

Page 26 of 40
Spring & Spring Boot Interview Guide

DOM -> REACTAPP [ label="events" ];

digraph architecture {
node[style=filled,color="#59C8DE",fontsize=20]
//node [style=filled,color="#D14D28", fontcolor=white];
edge [fontsize=9 ];
{rank=same; Actions, Reducers, Store};

Actions -> Reducers


View -> Actions [ label="dispatch" ];
Store -> View [label ="subscribe"]
Reducers -> Store

graph architecture {
node[style=filled,color="#59C8DE"]
//node [style=filled,color="#D14D28", fontcolor=white];
rankdir = TB;
node[shape=record]

FRONTEND[label=<React Application<BR />


<FONT POINT-SIZE="9">Modern JavaScript - ES6</FONT>>];

REST[label=<RESTFUL API<BR />


<FONT POINT-SIZE="9">Spring Boot on Java</FONT>>];

DB[label=<Database>];

FRONTEND -- REST -- DB
DB[shape=cylinder]
}

digraph architecture {
node[style=filled,color="#59C8DE"]
//node [style=filled,color="#D14D28", fontcolor=white];
rankdir = TB;
node[shape=record]

FRONTEND[label=<React Application<BR />


<FONT POINT-SIZE="9">JavaScript</FONT>>];

MODULE0[label=<Components>];

MODULE1[label=<Libraries>];

COMPONENT01[label=<Login>];
COMPONENT02[label=<Logout>];
COMPONENT03[label=<ListTodo>];
COMPONENT04[label=<Todo>];
COMPONENT05[label=<Header>];
COMPONENT06[label=<Footer>];
COMPONENT07[label=<Menu>];

Page 27 of 40
Spring & Spring Boot Interview Guide

COMPONENT11[label=<Formik>];
COMPONENT12[label=<Axios>];
COMPONENT13[label=<ReactRouter>];

FRONTEND -> MODULE0


FRONTEND -> MODULE1

MODULE0 -> COMPONENT01


MODULE0 -> COMPONENT02
MODULE0 -> COMPONENT03
MODULE0 -> COMPONENT04
MODULE0 -> COMPONENT05
MODULE0 -> COMPONENT06
MODULE0 -> COMPONENT07

MODULE1 -> COMPONENT11


MODULE1 -> COMPONENT12
MODULE1 -> COMPONENT13

graph architecture {

node[style=filled,color="#59C8DE"]
//node [style=filled,color="#D14D28", fontcolor=white];
rankdir = TB;
node[shape=record]

COMPONENT[label=<Component>];

View[label=<View<BR />
<FONT POINT-SIZE="9">JSX or Javascript</FONT>>];
Logic[label=<Logic<BR />
<FONT POINT-SIZE="9">Javascript</FONT>>];
Styling[label=<Styling<BR />
<FONT POINT-SIZE="9">CSS</FONT>>];
State[label=<State<BR />
<FONT POINT-SIZE="9">Internal Data Store</FONT>>];
Props[label=<Props<BR />
<FONT POINT-SIZE="9">Pass Data</FONT>>];

COMPONENT -- View
COMPONENT -- Logic
COMPONENT -- Styling
COMPONENT -- State
COMPONENT -- Props
}

graph architecture {

node[style=filled,color="#59C8DE"]
//node [style=filled,color="#D14D28", fontcolor=white];
rankdir = TB;
node[shape=record]

Page 28 of 40
Spring & Spring Boot Interview Guide

React -- Components
Components -- JSX
Components -- State
Components -- Props
React -- Features
Features -- Routing
Features -- Forms
Features -- RestAPICalls
Features -- Authentication

RestAPICalls[label=<Rest API Calls>]


Forms[label=<Forms and Validation>]

Todo
 Debugging with Visual Studio Code
o To debug the client side React code, we'll need to install the
Debugger for Chrome extension
- [Link]
itemName=[Link]-for-chrome
o Open the Extensions view (⇧⌘X or Ctrl+Shift+X)
o Type Debugger for Chrome
o Install
o Reload
o Go to the Debug view (⇧⌘D or Ctrl+Shift+D)
o Click on gear button to create [Link]
o Choose Chrome from the Select Environment dropdown
o Set URL to "url": "[Link]
 Running Examples
o Download the zip or clone the Git repository.
o Unzip the zip file (if you downloaded one)
o Open Command Prompt and Change directory (cd) to folder
containing [Link]
o Open Eclipse
 File -> Import -> Existing Maven Project -> Navigate to the
folder where you unzipped the zip
 Select the right project

Page 29 of 40
Spring & Spring Boot Interview Guide

o Choose the Spring Boot Application file (search for file with
@SpringBootApplication)
o Right Click on the file and Run as Java Application
o You are all Set
o For help : use our installation guide
- [Link]
list=PLBBog2r6uMCSmMVTW_QmDLyASBvovyAO3
Next Steps
 React
o Why we need to bind event handlers in Class Components in
React?
 [Link]
bind-event-handlers-in-class-components-in-react-
f7ea1a6f93eb
o class vs className - A discussion
 [Link]
classname-in-react-16
o

 Modern JavaScript
o [Link]
o [Link]
o [Link]
blob/master/chapters/[Link]
o [Link]
introduction_to_JavaScript
o Modern Javascript Quickly
- [Link]
345340c
 React
o [Link]
static/html/[Link]
o class vs className
- [Link]
classname-in-react-16
o [Link]
and-when-to-use-them-2111a1b692b1
o [Link]
[Link]#component-lifecycle-changes

Page 30 of 40
Spring & Spring Boot Interview Guide

Section 1: Introduction
1. Step 00 - Getting Started with the Course
Cài đặt NPM
npm có sẵn khi bạn tải NodeJS về. Để kiểm tra xem trên hệ thống của bạn đã được cài npm
chưa chúng ta sử dụng lệnh npm -v, nếu một phiên bản hiện ra thì hệ thống của bạn đã
được cài đặt npm.

Vì NPM là một phần mềm cài đặt trên máy tính của bạn nên bạn có thể sử dụng nó để cài
đặt các thư viện Javascript từ trên Internet. Để cài đặt một thư viện nào đó, chỉ cần mở
cửa sổ Terminal (hoặc CMD) và thực thi lệnh giống dưới đây:

npm install package-name

Trong các dự án với javascript thì chắc hẳn các bạn sẽ cần nhiều thư viện của javascript.
Điển hình như jquery, bootstrap, express, vue, react,... thì việc quản lý các thư viện này như
thế nào, dùng phiên bản bao nhiêu, cần require thêm những module gì. Những công việc này
nếu làm thủ công thì quả là mất tay, đặc biệt là những dự án lớn.
Ví dụ cho dễ hiểu: Chúng ta sẽ cài thử expressjs với npm install express xem chúng ta sẽ
có gì Chúng ta sẽ mở file [Link]:
"dependencies": {
"express": "^4.16.4"
}

Đôi khi chúng ta xem trên mạng có cái module hay hay, ta cần dùng vào project của mình.
Điển hình như:
npm install toastr -g
npm install axios --save
npm install cross-env --save-dev

Giải thích:

 Với -g tức là ta sẽ install trên global. Nó sẽ được lưu tại usr/local/lib Bạn có thể
kiểm tra các package này với lệnh
npm list -g

 Với --save thì ta sẽ lưu trên local. Và việc quản lý này sẽ được theo dõi tại file
là [Link]. Và khi tải thì nó sẽ được lưu trữ tại thư mục node_modules trong
project của chúng ta. Khi đó trong file này sẽ xuất hiện:
"dependencies": {
"axios": "^0.18",
}

 Còn với --save-dev thì sao: Chúng ta hãy cùng thử lệnh này nhé:
npm install cross-env --save-dev

Khi cài xong ta vào file [Link] sẽ thấy:

Page 31 of 40
Spring & Spring Boot Interview Guide

"devDependencies": {
"cross-env": "^5.1",
}

Điều này có ý nghĩa gì? :v


Đọc qua cái tên chắc cũng có thể hiểu ngay được là những dependencies được dùng trong
quá trình phát triển. Như vậy có nghĩa là các package này sẽ chỉ được dùng trong quá trình
phát triển mà thôi. Còn với dependencies thì sẽ được dùng cả trên production.
Đi sâu hơn một chút nữa nào:

Cùng nhìn lại ví dụ này nhé.


"dependencies": {
"express": "^4.16.4"
}

Các bạn để ý dấu mũi tên ^ bên cạnh phiên bản của module. Dấu này có nghĩa là khi install
thì npm sẽ install phiên bản mới nhất của module đó mà nó có thể tìm thấy cho chúng ta. còn
dấu ~ thì là phiên bản tương tự.
Có hai cách để cài đặt một gói bằng npm:

 Local: sẽ tạo ra thư mục node_modules nếu chưa có trong project hoặc nếu có rồi
nó sẽ lấy code của gói cần cài đặt đưa vào đây, tức chỉ hiện diện trong thư mục
của project hiện tại. Khi cần sử dụng bạn có thể sử dụng lệnh require().
 Global: sẽ lưu trữ code của gói trong các file hệ thống cố định trong máy, chỉ có
thể dùng các package này thông qua các hàm CLI (Command Line Interface) ví dụ
như gulp. Không thể dùng package thông qua require().
[Link]
Để quản lý các gói cài đặt cục bộ bằng npm thì cách tốt nhất là thông qua file [Link],
chính là file nằm trong thư mục gốc của project. File JSON này chứa các nội dung:

 Các gói thư viện lập trình mà project sử dụng.


 Cho phép xác định phiên bản chính xác của các gói thư viện lập trình được sử dụng.
Các gói bạn xây dựng có thể chia sẻ dễ dàng với các lập trình viên khác trên toàn cầu
thông qua npm.
Lệnh npm init –yes sẽ tạo ra file [Link] mẫu.

npm init --yes


Wrote to /home/topdev/random-keygen/[Link]:

{
"name": "random-keygen",
"description": "",
"version": "1.0.4",
"description": "",
"main": "[Link]",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},

Page 32 of 40
Spring & Spring Boot Interview Guide

"repository": {
"type": "git",
"url": "[Link]
},
"keywords": [],
"author": "Đàm Việt",
"license": "ISC",
"bugs": {
"url": "[Link]
},
"homepage": "[Link]
}

Section 2: Getting Started with React - Basics with


Components
2. Step 01 - Understanding Full Stack Application Architecture

3. Step 02 - Using Create React App to Create and Launch a React Application
[Link]
npx create-react-app todo-app
cd my-app
npm start
4. Step 02 - An Update to Create React App

There are two kinds of components in React - Function and Class.

Create React App - Recent Update

[Link] is no longer created as Class Component. It is switched to Function


Component.

Here on, in the course, we use [Link] as a Class Component.

Page 33 of 40
Spring & Spring Boot Interview Guide

Change You need to Make in Next Step in Visual Studio Code

Replace [Link] with code below:

1. import React, { Component } from 'react';


2. import logo from './[Link]';
3. import './[Link]';
4.
5. class App extends Component {
6. render() {
7. return (
8. <div className="App">
9. <header className="App-header">
10. <img src={logo} className="App-logo" alt="logo" />
11. <p>
12. Edit <code>src/[Link]</code> and save to reload.
13. </p>
14. <a
15. className="App-link"
16. href="[Link]
17. target="_blank"
18. rel="noopener noreferrer"
19. >
20. Learn React
21. </a>
22. </header>
23. </div>
24. );
25. }
26. }
27. export default App;

Page 34 of 40
Spring & Spring Boot Interview Guide

5. Step 03 - Importing React App into Visual Studio Code


6. Step 04 - Exploring React Project Structure
7. Step 05 - Introduction to React Components
8. Step 06 - Playing with React Class Components
9. Step 07 - Introduction to Function Components in React
10. Step 08 - Exploring JSX Further - Babel and more
11. Step 09 - Refactoring components to individual modules and Quick Review of
JavaS
12. Step 10 - Exercise - Creating seperate modules for other components
Section 3: Next Steps with React - Building Counter
Application
13. Step 01 - Introduction to Section - Building Counter Application
14. Step 02 - Creating Basic React Counter Component
15. Step 03 - Adding a Button and a Counter to the React Counter Component
16. Step 04 - Handling click event on the increment button
17. Step 05 - Adding State to a React Counter Component
18. Step 06 - Understanding React - Behind the scenes - Virtual Dom
19. Step 07 - Understanding setState and Using Arrow Functions to avoid this
binding
20. Step 08 - Defining Inline Javascript CSS in JSX
21. Step 09 - Defining Multiple Counter Buttons and Adding a Component Prop
22. Step 10 - Understanding React Component Props - Default Value and Type
Constrain
23. Step 11 - Using React Developer Tools Chrome Plugin
24. Step 12 - Moving State Up - Refactoring to Counter and Counter Button
Components
25. Step 13 - Moving State Up - Adding state to Counter Component
26. Step 14 - Best Practice - Using Previous State in setState
27. Step 15 - Adding Decrement Buttons and Reset Button
28. Step 16 - Quick Review of the Counter Example
Section 4: Combining Spring Boot and React to
Build Full Stack Todo Management Application

Page 35 of 40
Spring & Spring Boot Interview Guide

29. Step 01 - Introduction to Todo Management App


30. Step 02 - Getting Started with Login Component
31. Step 03 - Understanding React Controlled Component - Adding State to Login
32. Step 04 - Refactoring to Common Change Event for Multiple Form Elements
33. Step 05 - Adding Hardcoded Authentication to Login Component
34. Step 06 - Understanding Conditional Rendering with && in React JSX
35. React V6+ upgrades
36. Step 07 - Implementing Routing for Login and Welcome Components with
React Route
37. Step 07 - React V6+ Updates
38. Step 08 - Implementing Routing from Login to Welcome Component
39. Step 08 - React V6+ Updates
40. Step 09 - Adding an Error Component for Invalid URIs
41. Step 09 - React V6+ Updates
42. Step 10 - Adding Route Parameter for Welcome Component
43. Step 10 - React V6+ Updates
44. Step 11 - 01 - Creating a Basic React List Todo Component
45. Step 11 - 02 - Adding a Link from Welcome to Todo Page and New Todo
Attributes
46. Step 12 - Adding Bootstrap Framework and Creating Components for Header
and Foot
47. Step 12 - React V6+ Updates
48. Step 13 - Using Bootstrap to Create a Menu with Navigation Links
49. Step 14 - Enhancing Footer and Creating Logout Component
50. Step 15 - Styling Login, List Todo and Other Components with CSS and
Bootstrap
51. Step 16 - Using Session Storage to Store User Authentication Token
52. Step 17 - Implementing Logout to remove User Authentication Token
53. Step 18 - Enabling Menu Links Based on User Authentication Token
54. Step 18 - React V6+ Updates
55. Step 19 - Securing Components using Authenticated Route
56. Step 19 - React V6+ Updates
57. Step 20 - Refactoring React Components into JavaScript Modules
58. Step 21 - Quick Review - Routes, Authenticated Route and Components

Page 36 of 40
Spring & Spring Boot Interview Guide

Section 5: Getting Started with Spring Boot REST


API Services
59. Step 22 - What is a Web Service?
60. Step 23 - Important How Questions related to Web Services
61. Step 24 - Web Services - Key Terminology
62. Step 25 - Introduction to RESTful Web Services
63. Fastest Approach to Solve Your Exceptions
64. Step 26 - Initializing a RESTful Services Project with Spring Boot
65. Step 27 - Creating a Spring Boot Hello World Service
66. Step 28 - Enhancing the Spring Boot Hello World Service to return a Bean
67. Step 29 - Quick Review of Spring Boot Auto Configuration and Dispatcher
Servlet
68. Step 30 - Enhancing the Hello World Service with a Path Variable
Section 6: Connecting Spring Boot REST API with
React Frontend
69. Step 31 - Connecting React with Restful API - 1 - Preparing Welcome Page
70. Step 32 - Connecting React with Restful API - 2 - Understanding Axios HTTP
Clein
71. Step 33 - Connecting React with Restful API - 3 - Running React App on Port
4200
72. Step 34 - Connecting React with Restful API - 4 - Adding Axios and Creating
Hel
73. Step 35 - Connecting React with Restful API - 5 - Allow Cross Origin Requests
Fr
74. Step 36 - Connecting React with Restful API - 6 - Quick Review
75. Step 37 - Calling Hello World Bean JSON API from React Frontend
76. Step 38 - Calling Hello World HTTP Service with Path Variables
77. Step 39 - Handling API Error Responses in React Frontend
78. Step 40 - Designing RESTful Services for Todo Resource
79. Step 41 - Creating Spring Boot REST API for retrieving Todo List
80. Step 42 - Connecting React Frontend with Todo List RESTful Service
81. Step 43 - Understanding Important React Lifecycle Methods

Page 37 of 40
Spring & Spring Boot Interview Guide

82. Step 44 - Creating Spring Boot REST API to delete a Todo - 1 - Create DELETE
Req
83. Step 45 - Creating Spring Boot REST API to delete a Todo - Execute DELETE
Reques
84. Step 46 - Adding Delete Todo Feature to React Frontend
85. React V6 Updates for Step 47
86. Step 47 - Creating Todo Component and Handle Routing
87. Step 48 - Designing Todo Form with moment, Formik and Bootstrap
88. Step 49 - Initializing and Handling Form Submit with Formik
89. Step 50 - Implementing Form Validation with Formik
90. Step 51 - Creating Retrieve Todo Spring Boot API and Connecting React
91. Step 52 - Creating Spring Boot REST API for Updating Todo - PUT Request
Method
92. Step 53 - Creating Spring Boot REST API for Creating a Todo - POST Request
Metho
93. Step 54 - RESTful Web Services - Best Practices
94. Step 55 - Implementing Update Todo Feature in React Frontend
95. Step 56 - Implementing New Todo Feature in React Frontend
Section 7: Getting Started with Spring Security and
Basic Auth
96. Step 57 - Overview of Security with Basic Auth and JWT
97. Step 58 - Setting up Spring Security
98. Step 59 - Configure standard userid and password
99. Step 60 - Enhancing React Welcome Data Service to use Basic Auth
100. Solving Your Problems with Basic Authentication
101. Step 61 - Configure Spring Security to disable CSRF and enable OPTION
Requests
102. Step 62 - Creating React Axios Interceptor to add Basic Auth Header
103. Step 63 - Remove Hard Coding of User Credentials
104. Step 64 - Create Basic Authentication RESTful Service in Spring Boot
105. Step 65 - Enhance React Frontend to use Basic Auth API to Validate Login
Section 8: Getting Started with JWT
106. Step 66 - Introduction to JWT

Page 38 of 40
Spring & Spring Boot Interview Guide

107. Step 67 - Importing JWT Framework into Eclipse


108. Step 68 - Quick Tip - Resolving JWT Compilation Errors
109. Step 69 - Executing JWT Resources - Get Token and Refresh Token
110. Step 70 - Understanding JWT Spring Security Framework Setup
111. Step 71 - Creating a New User with Encoded Password
112. Solving Your Problems with JWT Authentication
113. Step 72 - Using JWT Token in React Frontend
114. Step 73 - Best Practice - Use Constants for URLs and Tokens
Section 9: Integrating with the Backend using JPA
and Hibernate
115. COURSE UPDATE : H2 Database URL
116. Step 74 - Setting up Todo Entity and Populating Data
117. Step 75 - Connecting React with GET REST APIs connected to JPA
Repository
118. Step 76 - Connecting POST, PUT and DELETE REST APIs to JPA Repository
119. Step 77 - Connecting React Frontend with JPA POST, PUT and DELETE REST
APIs
Section 10: Bonus Section
120. Bonus Lecture
Section 11: Appendix - Spring Boot in 10 (Actually
12) Steps
121. Step 01 - Getting Started with Spring Boot - Goals
122. Step 02 - Setting up New Spring Boot Project with Spring Initializr
123. Step 03 - Build a Hello World API with Spring Boot
124. Step 04 - Understanding the World Before Spring Boot - 10000 Feet Overview
125. Step 05 - Understanding Spring Boot Magic - Spring Boot Starter Projects
126. Step 06 - Understanding Spring Boot Magic - Auto Configuration
127. Step 07 - Playing with Spring Boot
128. Step 08 - Understanding Spring Boot Magic - Embedded Servers
129. Step 09 - Exploring Spring Boot Actuator
130. Step 10 - Exploring Spring Boot DevTools

Page 39 of 40
Spring & Spring Boot Interview Guide

131. Step 11 - Understanding Spring Boot vs Spring vs Spring MVC


132. Step 12 - Getting Started with Spring Boot - Review
Section 12: First 10 Steps in JPA with H2 in-
memory database
133. Step 01 - Object Relational Impedence Mismatch - Understanding the
problem that
134. Step 02 - World before JPA - JDBC, Spring JDBC and myBatis
135. Step 03 - Introduction to JPA
136. Step 04 - Creating a JPA Project using Spring Initializr
137. COURSE UPDATE : H2 Database URL
138. Step 05 - Defining a JPA Entity - User
139. Step 06 - Defining a Service to manage the Entity - UserService and
EntityManage
140. Step 07 - Using a Command Line Runner to save the User to database.
141. Step 08 - Magic of Spring Boot and In Memory Database H2
142. Step 09 - Introduction to Spring Data JPA
143. Step 10 - More JPA Repository - findById and findAll

Page 40 of 40

You might also like