REACTJS

FRAMEWORK

03/2021 KHOA CNTT - NLU

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 ReactJS
̵ ReactJS utilizes a virtual DOM (Document
Object Model) to optimize the performance of
web applications. Instead of updating the
actual DOM, ReactJS updates the virtual DOM
first and then compares it with the actual DOM
to make only the necessary updates, thus
reducing the overall workload.
̵ ReactJS can be used to build single-page
applications, mobile applications, and even
desktop applications with the help of
frameworks like Electron. It also supports
server-side rendering, making it easy to build
SEO-friendly web applications.
3

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 FEATURES & BENEFITS
Features
̵ JSX: ReactJS uses a syntax called JSX, which allows
developers to write HTML-like code in their JavaScript
files. This makes the code more readable and easier to
maintain.
̵ Virtual DOM: allows to update only the necessary
parts of the actual DOM (representation of a UI is kept
in memory and synced with the “real” DOM by a library
such as ReactDOM.), resulting in improved
performance and faster rendering.
̵ Reusable Components: ReactJS allows developers
to create reusable components, which can be easily
used across the application. This helps in reducing the
overall code complexity and improving code reusability. 4

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 FEATURES & BENEFITS
Features
̵ One-way Data Binding: ReactJS uses one-way data
binding, which makes it easy to maintain the state of
the application and reduces the likelihood of
unexpected changes.
̵ Component-Based Architecture: ReactJS uses a
component-based architecture, which makes it easy to
divide the application into smaller, more manageable
parts.
̵ State Management: ReactJS makes it easy to
manage the state of the application, which helps in
creating a more predictable and stable application.
5

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 FEATURES & BENEFITS
Features
̵ Unidirectional Data Flow: ReactJS follows a
unidirectional data flow, which means that the data
flows in a single direction, from the parent component
to the child component. This makes it easy to maintain
the state of the application.
̵ Developer Tools: easy to debug and inspect the
application.

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 FEATURES & BENEFITS
Benefits
̵ Cross-platform Compatibility: ReactJS is not limited
to building web applications, it can also be used to
build mobile applications and desktop applications.
React Native is a popular framework that uses ReactJS
to build native mobile applications for iOS and Android.
Similarly, ReactJS can be used with Electron to build
cross-platform desktop applications. This cross-platform
compatibility makes ReactJS a versatile solution that
can be used to build applications for multiple platforms.
̵ Performance: virtual DOM updates only the necessary
parts of the actual DOM, resulting in improved
performance and faster rendering 7

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 FEATURES & BENEFITS
Benefits
̵ Faster Development: ReactJS's component-based
architecture and reusable components make it easy to
develop applications faster. Developers can build
complex user interfaces by assembling small, reusable
components, reducing the overall development time
and cost. ReactJS also provides several developer tools
and libraries that further accelerate the development
process.

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 FEATURES & BENEFITS
Benefits
̵ Improved Collaboration: ReactJS's component-
based architecture and modular design make it easy for
multiple developers to work on the same project
without affecting each other's work. Each component
can be developed independently, and the overall
application can be assembled by combining these
components. This modular design makes it easy to
divide the application into smaller, more manageable
parts, improving collaboration and reducing the
likelihood of conflicts between developers.

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 Single Page Application (SPA)
̵ A single page application is a web application
or a website which provides users a very fluid,
reactive and fast experience similar to a
desktop application.
̵ It dynamically rewrites the current page rather
than loading entire new pages from a server.
That's the reason behind its reactive fast
speed.
̵ The goal is faster transitions that make the
website feel more like a native app.

10

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 Single Page Application (SPA)
̵ A single page application is a web application
or a website which provides users a very fluid,
reactive and fast experience similar to a
desktop application.
̵ It dynamically rewrites the current page rather
than loading entire new pages from a server.
That's the reason behind its reactive fast
speed.
̵ The goal is faster transitions that make the
website feel more like a native app.

11

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 TypeScript
̵ TypeScript is a programming language
developed and maintained by Microsoft.
̵ TypeScript is a statically-typed superset of
JavaScript.
̵ Every JavaScript program is also a TypeScript
program. In TypeScript, there’s some extra
syntax: you can add type declarations, type
annotations, type assertions, type guards, and
type aliases.

12

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 TypeScript
̵ TypeScript cannot run directly on the browser. It needs
a compiler to compile the file and generate it in
JavaScript file, which can run directly on the browser.
̵ The TypeScript source file is in ".ts, tsx" extension. We
can use any valid ".js" file by renaming it to ".ts" file.
In ReactJS we will use .tsx.
̵ TypeScript uses TSC (TypeScript Compiler) compiler,
which convert Typescript code (.ts file) to JavaScript
(.js file).

13

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 Advantages
̵ TypeScript supports Static typing, Strongly
type, Modules, Optional Parameters, etc.
̵ TypeScript supports object-oriented
programming features such as classes,
interfaces, inheritance, generics, etc.
̵ TypeScript is fast, simple, and most
importantly, easy to learn.
̵ TypeScript provides the error-checking feature
at compilation time. It will compile the code,
and if any error found, then it highlighted the
mistakes before the script is run. 14

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 Advantages
̵ TypeScript supports all JavaScript libraries
because it is the superset of JavaScript.
̵ TypeScript support reusability because of the
inheritance.
̵ TypeScript make app development quick and
easy as possible, and the tooling support of
TypeScript gives us autocompletion, type
checking, and source documentation.

15

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 Advantages
̵ TypeScript has a definition file with .[Link]
extension to provide a definition for external
JavaScript libraries.
̵ TypeScript supports the latest JavaScript
features, including ECMAScript 2015.
̵ TypeScript gives all the benefits of ES6 plus
more productivity.
̵ Developers can save a lot of time with
TypeScript.

16

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 JSX - TSX
̵ TSX is a variant of JSX that allows you to use
TypeScript in your ReactJS code. By using TSX,
you can add type checking to your JSX code,
which can help catch errors at compile-time
rather than run-time.

function App() {
return (
<div className="App">
<h1>XIN CHÀO FIT NLU!</h1>
</div>
);
}
17

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 JSX - TSX
̵ JSX stands for JavaScript XML, and it is a
syntax extension used in ReactJS to describe
the appearance of user interfaces. We can
write HTML-like syntax in your JavaScript code.

function App() {
return (
<div>
<h1>XIN CHÀO FIT NLU!</h1>
</div>
);
}

18

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 Getting start ReactJS

19

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 Getting start ReactJS

̵ Download: [Link]
̵ Version: 64 bit (LTS)

20

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 Getting start ReactJS

21

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 Getting start ReactJS

̵ Download:
[Link]
d/#section=windows
̵ Licenses: free for student
([Link]
on/#students)
22

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 23

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 ReactJS App structure
Root Lib

Source files for the root-level

24

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 Component
̵ Component is a reusable piece of code that
encapsulates the functionality and UI of a
specific part of an application. Components are
the building blocks of a ReactJS application,
and they allow developers to create complex
UIs by breaking them down into smaller, more
manageable pieces.
̵ There are two types of components in ReactJS:
 Functional components
 Class components

25

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 Component
̵ Functional components: These are stateless
components that are defined as functions.
They take in data (props) as input and return
UI elements as output. Functional components
are simple and easy to test, which makes them
a great choice for simple UI elements.
̵ Class components: These are stateful
components that are defined as ES6 classes.
They can manage their own state and have
access to additional features like lifecycle
methods. Class components are more complex
than functional components, but they provide
more flexibility and are a great choice for
complex UI elements. 26

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 Props
̵ Props (short for "properties") are a way of
passing data from one component to another.
They are read-only and can only be passed
from parent to child components. When a
parent component passes props to a child
component, the child component can use the
data to render its UI.

27

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 State
̵ State is a way of managing data that can
change over time. Unlike props, state is private
to a component and can only be changed by
the component itself using the "setState"
method. When the state of a component
changes, the component is re-rendered with
the updated data

28

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27
 Q&A

29

03/2021 KHOA CNTT - NLU LẬP TRÌNH FRONT END PHAN ĐÌNH LONG 27