Go Java Full Stack With Spring Boot and React
Go Java Full Stack With Spring Boot and React
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
Page 2 of 40
Spring & Spring Boot Interview Guide
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
Page 6 of 40
Spring & Spring Boot Interview Guide
Page 7 of 40
Spring & Spring Boot Interview Guide
Page 8 of 40
Spring & Spring Boot Interview Guide
Page 9 of 40
Spring & Spring Boot Interview Guide
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
@Service
public class JwtInMemoryUserDetailsService implements UserDetailsService {
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
if (![Link]()) {
throw new UsernameNotFoundException([Link]("USER_NOT_FOUND '%s'.", username));
}
return [Link]();
}
@Component
public class JwtTokenAuthorizationOncePerRequestFilter extends OncePerRequestFilter {
@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]());
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 {
@Value("${[Link]}")
private String secret;
@Value("${[Link]}")
private Long expiration;
Page 12 of 40
Spring & Spring Boot Interview Guide
return [Link]().setClaims(claims).setSubject(subject).setIssuedAt(createdDate)
.setExpiration(expirationDate).signWith(SignatureAlgorithm.HS512, secret).compact();
}
@Component
public class JwtUnAuthorizedResponseAuthenticationEntryPoint implements AuthenticationEntryPoint,
Serializable {
@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");
}
}
Page 13 of 40
Spring & Spring Boot Interview Guide
[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
@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;
authenticate([Link](), [Link]());
Page 16 of 40
Spring & Spring Boot Interview Guide
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]());
}
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 JwtTokenRequest() {
super();
}
Page 17 of 40
Spring & Spring Boot Interview Guide
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
Page 20 of 40
Spring & Spring Boot Interview Guide
There are three things you need to understand before you start this course!
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 ,
Ranga from in28Minutes
Bonus Lectures
TITLE : Bonus Lecture : Coupons for My Best-Selling Courses -30 Day Money Back Guarantee
I hope you enjoyed it!
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):
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
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
Page 23 of 40
Spring & Spring Boot Interview Guide
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
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>];
Page 26 of 40
Spring & Spring Boot Interview Guide
digraph architecture {
node[style=filled,color="#59C8DE",fontsize=20]
//node [style=filled,color="#D14D28", fontcolor=white];
edge [fontsize=9 ];
{rank=same; Actions, Reducers, Store};
graph architecture {
node[style=filled,color="#59C8DE"]
//node [style=filled,color="#D14D28", fontcolor=white];
rankdir = TB;
node[shape=record]
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]
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>];
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
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:
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
Page 31 of 40
Spring & Spring Boot Interview Guide
"devDependencies": {
"cross-env": "^5.1",
}
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:
{
"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]
}
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
Page 33 of 40
Spring & Spring Boot Interview Guide
Page 34 of 40
Spring & Spring Boot Interview Guide
Page 35 of 40
Spring & Spring Boot Interview Guide
Page 36 of 40
Spring & Spring Boot Interview Guide
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
Page 39 of 40
Spring & Spring Boot Interview Guide
Page 40 of 40