TÌM HIỂU FRAMEWORK SPRING CHO BACKEND, REACTJS CHO FRONTEND VÀ XÂY DỰNG WEBSITE BÁN GIÀY MINH HỌA

TRƯỜNG
ĐẠI
HỌC
GIAO
THÔNG
TP. HỒ
TRƯỜNG
ĐẠI
HỌC GIAO
THÔNG
VẬN TẢIVẬN
TP. HỒTẢI
CHÍ MINH
KHOA CÔNG NGHỆ THÔNG TIN

CHÍ MINH

THỰC TẬP TỐT NGHIỆP

TÌM HIỂU FRAMEWORK SPRING CHO
BACKEND, REACTJS CHO FRONTEND VÀ XÂY
DỰNG WEBSITE BÁN GIÀY MINH HỌA
Ngành:

CÔNG NGHỆ THÔNG TIN

Chuyên ngành: TRUYỀN THÔNG VÀ MẠNG MÁY TÍNH

Giảng viên hướng dẫn : Trần Đức Doanh
Sinh viên thực hiện

:

Cao Tiến Quang - 1651150026 - KM16
Trần Phước Thành - 1651150034 - KM16

TP. Hồ Chí Minh, 2020

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN


………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….

TP. Hồ Chí Minh, ngày … tháng … năm 2020
Giảng viên hướng dẫn

2


NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….

TP. Hồ Chí Minh, ngày … tháng … năm 2020

Giảng viên phản biện

3


LỜI CAM ĐOAN
Nhóm tôi xin cam đoan đây là công trình nghiên cứu công nghệ độc lập của
riêng nhóm chúng tôi, không sao chép từ bất khi đồ án nào.
Các số liệu sử dụng phân tích trong luận án có nguồn gốc rõ ràng, đã công bố
theo đúng quy định. Các kết quả nghiên cứu trong luận án do nhóm tôi tự tìm
hiểu, phân tích một cách trung thực, khách quan và phù hợp với thực tiễn.
Mọi sự tham khảo trong đồ án này đều được trích dẫn các nguồn tài liệu trong
danh mục tài liệu tham khảo.
Các kết quả này chưa từng được công bố trong bất kỳ nghiên cứu nào khác.

TP. Hồ Chí Minh, ngày … tháng … năm 2020
Sinh viên thực hiện
MỤC LỤC

4


DANH MỤC CÁC TỪ VIẾT TẮT
API: Application Program Interface
AJAX: Asynchronous Javascript and XML
EJB: Enterprise JavaBeans
DOM: Document Object Model
HTML: Hypertext Markup Language
IDE: Integrated Development Environment
JEE: Java Enterprise Edition

JDBC: Java Database Connectivity
JDK: Java Development Kit
JDO: Java Data Objects
JNDI: Java Naming and Directory Interface
JPA: Java Persistence API
JS: Javascript
JSX: Javascript XML
MVC: Model View Controller
NPM: Node Package Manager
ORM: Object Relational Mapping
PJO: Plain Javascript Object

5


POJO: Plain Old Java Object
SPA: Single Page Application
STOMP: Streaming Text Oriented Messaging Protocol
UI: User Interface
XML: Extensible Markup Language

6


DANH MỤC HÌNH ẢNH
Hình 1.1: Kiến trúc Spring framework
Hình 1.2 : Spring IOC container
Hình 1.3 : ApplicationContext
Hình 1.4: Virtual DOM
Hình 1.5: React one-way binding

Hình 1.5: Cài đặt ReactJs
Hình 1.6: Redux Store
Hình 1.7: Nguyên lý vận hành của Redux
Hình 1.8: Middleware redux-thunk
Hình 2.1: Các tác nhân của hệ thống
Hình 2.2: Biểu đồ Use Case
Hình 2.3: Biểu đồ hoạt động đăng nhập
Hình 2.4: Biểu đồ hoạt động đăng xuất
Hình 2.5: Biểu đồ chức năng xem thông tin sản phẩm
Hình 2.6: Biểu đồ chức năng thêm sản phẩm vào giỏ hàng
Hình 2.7: Biểu đồ chức năng thêm sản phẩm vào giỏ hàng
Hình 2.8: Biểu đồ chức năng xóa sản phẩm
Hình 2.9: Biểu đồ chức năng xóa sản phẩm
7


Hình 2.10 : Biểu đồ chức năng xóa sản phẩm
Hình 3.1: Trang chủ - Thanh điều hướng, slide
Hình 3.2: Trang chủ - Danh sách sản phẩm
Hình 3.3: Trang chủ - Một số sản phẩm mới nhất
Hình 3.4: Trang danh sách sản phẩm
Hình 3.5: Thông tin chi tiết sản phẩm
Hình 3.6: Phần bình luận
Hình 3.7: Giỏ hàng
Hình 3.8: Địa chỉ giao hàng
Hình 3.9: Thanh toán và đặt mua
Hình 3.10: Danh sách sản phẩm
Hình 3.11: Danh sách người dùng
Hình 3.12: Trang đăng nhập
Hình 3.13: Trang đăng ký

8


DANH MỤC BẢNG
Bảng 2.1: Bảng người dùng
Bảng 2.2: Bảng sản phẩm
Bảng 2.3: Bảng Thể Loại
Bảng 2.4: Bảng Đơn hàng
LỜI MỞ ĐẦU
1. Tính cấp thiết của đề tài
Nếu như trước đây khi Internet chưa ra đời và ngay cả khi nó ra đời được một
thời gian, con người thường có thói quen mua bán hàng hóa, giao dịch trên
các môi trường truyền thống như siêu thị, cửa hàng, khu chợ hay trung tâm
thương mại. Với hình thức mua bán truyền thống này, người mua phải đến tận
nơi để xem xét sản phẩm, trả giá, thanh toán và nhận sản phẩm. Tuy nhiên giờ
đây, với hình thức bán hàng trực tuyến, người mua hàng và người bán có thể
tương tác trực tiếp với nhau trên Internet. Ưu điểm của bán hàng trực tuyến
đối với các cửa hàng, doanh nghiệp đó là không bị giới hạn về thời gian và
không gian, có thể bán hàng mọi lúc, mọi nơi 24/7, tiết kiệm chi phí đầu tư
thuê mặt bằng hay nhân công, phạm vi tiếp cận rộng bao gồm mọi vùng miền
trong nước và cả ngoài nước từ đó mang lại lợi nhuận và doanh thu cao, hiệu
quả hơn so với bán hàng truyền thống. Có rất nhiều hình thức bán hàng trực
tuyến khác nhau như bán hàng trên Facebook, bán hàng trên Youtube,….tuy
nhiên bán hàng trực tuyến qua website được nhiều cửa hàng, doanh nghiệp,
công ty.
Hiện nay, các công nghệ tiên tiến phát triển ngày càng mạnh mẽ và kết hợp
với sự phát triển mạnh mẽ của Thương mại điện tử (TMĐT) và được ứng
dụng ngày càng nhiều vào các lĩnh vực kinh tế, sản xuất cũng như đời sống
thường nhật của con người để phục cho các nhu cầu và mục đích của mọi

9


người. Một điểm tiêu biểu trong việc phát triển các công nghệ đó phải kể đến
việc ứng dụng công nghệ thông tin vào hầu hết các hoạt động. Nhờ đó, các
công việc được thực hiện nhanh, chính xác và đạt kết quả cao hơn rất nhiều.
Khi xã hội ngày càng phát triển, mức sống của người dân được nâng cao thu
nhập kinh tế ngày càng được cải thiện thì việc mua các vật dung điện tử hay
gia dụng,… không còn trở nên xa lạ với mọi người nữa mà ngược lại nó là
các vật dụng thông dụng hàng ngày không thể thiếu đối với mọi người hiện
nay. Hầu hết mọi người thường ra ngoài và mua các vật dụng gia đình hay các
trang thiết bị điện tử hay các sản phẩm công nghệ như điện thoại, bếp,… và
tốn rất nhiều thời gian, công sức khi đi mua, thì bây họ có thể xem và mua
chúng một cách thiết thực nhất, lựa chọn cái yêu thích và có thể đáp ứng được
nhu cầu cho người dùng thông qua mạng Internet trong môi trường Thương
mại điện tử hiện nay.
Với các lý do trên và qua tìm hiểu thì nhóm sẽ thực hiện đồ án thực tập tốt
nghiệp về ứng dụng bán các mặt hàng giày trên môi trường Thương mại điện
tử. Sẽ giúp mọi người có thể mua các mặt hàng cần thiết cho mình và gia đình
nhanh và tiết kiệm thời gian và công sức di chuyển.
Do đó nhóm xin thực hiện đề tài: “Tìm hiểu Frameword Spring cho Backend,
ReactJS cho Frontend và xây dựng website bán giày minh họa”.
2. Tình hình nghiên cứu
Từ lâu cho đến hiện nay có rất nhiều các ứng dụng thành công trong việc thực
hiện bán các đồ điện tử ,…thông qua Internet, bởi Thương mại điện tử phát
triển cực mạnh trong thập kỷ qua. Một số ứng dụng đã phát triền thành công
đó là như: Tiki, Shoppe, Nguyenkim,.. đó là những ứng đã và đang hoạt động
mạnh và có qui mô lớn tại Việt Nam.
10

Ứng dụng được xây dựng với định hướng giúp mọi người mua sắm thuận tiện
và nhanh hơn, có tính chính xác, và không mất nhiều thời gian.
3. Mục đích nghiên cứu đề tài
-

Quản lý các thông tin về khách hàng, admin.
Đưa ra các sản phẩm giày mới trên ứng dụng.
Cung cấp cho khách hàng những cập nhật mới nhất về sản phẩm và giá

-

cả.
Đưa ra các thông kê và báo cáo chính xác về số lượng sản phẩm và
khách hàng.

4. Nhiệm vụ nghiên cứu
Tìm hiểu và phân tích quy trình hoạt động của ứng dụng
-

Tìm về các công cụ để xây dựng và thiết kế hệ thống như: Eclipse,

-

Visual Studio Code, MySQL, Postman, …
Tìm hiểu Framework Spring cho Backend, ReactJS cho Frontend và

-

các thư viện hỗ trợ liên quan.
Demo hệ thống đã thực hiện trên máy.

5. Phương pháp nghiên cứu
-

Khảo sát hiện trạng về ứng dụng khác hoạt động trên môi trường

-

Thương mại điện tử.
Thu thập và tìm hiểu thông tin từ mạng internet và các trang web

-

thương mại điện tử hiện có.
Phân tích và xây dựng, thiết kế hệ thống theo yêu cầu phù hợp của

-

người dùng.
Nghiên cứu các công cụ và thuộc tính để thiết kế và xây dựng.

6. Các kết quả đạt được của đề tài

11


-

Giúp nhóm đề tài hiểu rõ hơn quy trình hoạt động về bán hàng trực

-

tuyến.
Giúp cho việc quản lý hàng hóa thuận tiện và chính xác hơn.
Tạo thuận tiện cho khách hàng mua hàng trên Website và thực hiện

-

đúng các quy trình khi mua hàng trực tuyến.
Tạo ra được một ứng dụng thương mại điện tử cho phép người dụng

-

thực hiện việc mua sản phẩm hiện có trên ứng dụng.
Ứng dụng có các quyền truy cập khác nhau như : admin hay user.
Có các chức năng cơ bản của một ứng dụng thương mại điện tử : phân
trang, giỏ hàng ,đăng nhập, đăng kí ,tạo sản phẩm ,quản lí danh sách

-

sản phẩm,…
Nhóm được tìm hiểu, nghiên cứu về các công nghệ, kỹ thuật để xây

-

dựng một website hoàn chỉnh, đầy đủ chức năng.
Nâng cao khả năng làm việc nhóm, quản lý công việc, khả năng tự học
hỏi, trau dồi kiến thức,..

7. Kết cấu của đề tài (Thực tập tốt nghiệp)





Chương 1: Tìm hiểu về framework
Chương 2: Phân tích và thiết kế hệ thống
Chương 3: Xây dựng ứng dụng minh họa
Chương 4: Kết luận và đánh giá

12


CHƯƠNG 1: TÌM HIỂU VỀ FRAMEWORK
1.1. Tìm hiểu Spring Framework
1.1.1. Khái Niệm
•

Spring là framework phát triển ứng dụng phổ biến nhất dành cho Java
Enterprise. Ban đầu nó được viết bởi Rod Johnson và lần đầu tiên được
phát hành theo giấy phép Apache 2.0 vào tháng 6 năm 2003. Spring có
kích thướng nhẹ, phiên bản cơ bản của Spring framework có kích
thước khoảng 2MB.

•

Được xây dựng dựa trên 2 nguyên tắc design chính là: Dependency
Injection và Aspect Oriented Programming.

•

Là một Java Platform mã nguồn mở, một giải pháp gọn nhẹ dành cho
Java Enterprise. Với Spring Framework các nhà phát triển có thể tạo ra
các mã có hiệu suất cao, dễ kiểm thử và có thể sử dụng lại được.

•

Không chỉ giúp chúng ta phát triển web mà spring framework nó còn là
1 hệ sinh thái phát triển rất nhiều nền tảng khác như cloud, mobile, app
... vì nó dạng tích hợp, nhúng vô là xài.

1.1.2. Lợi ích
•

Spring cho phép lập trình viên sử dụng POJO. Việc sử dụng POJO giúp
bạn không phải làm việc với EJB, ứng dụng, các luồng chạy, cấu
hình… đơn giản hơn rất nhiều.

13


•

Spring được tổ chức theo kiểu mô đun. Số lượng các gói và các lớp khá
nhiều, nhưng bạn chỉ cần quan tâm đến những gì bạn cần và không cần

•

quan tâm đến phần còn lại.
Spring hỗ trợ sử dụng khá nhiều công nghệ như ORM Framework, các
logging framework, JEE, các thư viện tạo lịch trình (Quartz và JDK

•

timer)…
Module Web của Spring được thiết kế theo mô hình MVC nên nó cung
cấp đầy đủ các tính năng giúp thay thế các web framework khác như
Struts.

1.1.3. Cài đặt Spring framework
 Yêu cầu đã cài đặt:
•

Bộ phát triển Java (JDK).

•

Thiết lập Apache Tomcat.

•

Thiết lập Eclipse (IDE).
Thiết lập thư viện Spring



Sau đây là các bước đơn giản để tải xuống và cài đặt thư viện

•

Spring framework trên máy của bạn.


Bạn cần phải tải bản .zip cho Windows và .tz cho Unix.



Tải xuống phiên bản Spring mới nhất từ
/>


Các bài hướng dẫn trên viettuts.vn sử dụng phiên
bản Spring 5.2.6.RELEASE trên Windows. Sau khi đã tải
14


xuống tệp tin đã giải nén, nó sẽ tạo cấu trúc thư mục bên
trong \lib\...


Tiếp theo là bạn phải chọn ra những gì cần sử dụng và
thêm vào CLASSPATH cho project của bạn.
Dưới đây là một số ví dụ bộ thư viện phát triển ứng dụng

•

Spring Web:


spring-aop-5.2.6.RELEASE



spring-aspects-5.2.6.RELEASE



spring-beans-5.2.6.RELEASE



spring-context-5.2.6.RELEASE



spring-context-support-5.2.6.RELEASE



spring-core-5.2.6.RELEASE



spring-instrument-5.2.6.RELEASE



spring-jdbc-5.2.6.RELEASE



spring-messaging-5.2.6.RELEASE



spring-orm-5.2.6.RELEASE



spring-oxm-5.2.6.RELEASE



spring-web-5.2.6.RELEASE

15




spring-webmvc-5.2.6.RELEASE



…

16

1.1.4. Kiến trúc, các module của Spring Framework
Spring được chia làm nhiều module khác nhau, tùy theo mục đích phát triển
ứng dụng mà ta dùng 1 trong các module đó.

Hình 1.1: Kiến trúc Spring framework
1.1.4.1. Core Container
1.1.4.1.1. Module spring-core
IoC(Inversion of Control) container được xem là cốt lõi của Spring
Framework, giúp lập trình viên quản lý quá trình thực thi DI (Dependency
Injection) trong ứng dụng một cách tự động.

17


Spring IoC Container là một chương trình (một module trong springframwork) đảm nhiệm việc Inject sự phụ thuộc (dependecies) vào các đối
tượng.

Hình 1.2 : Spring IOC container
1.1.4.1.2. Module Spring Bean
Đối tượng được quản lý bởi Spring IoC container. Định nghĩa của bean bao
gồm các thông tin được gọi là cấu hình siêu dữ liệu (configuration metadata).
•

Spring BeanFactory Container.
 Container đơn giản cung cấp những hỗ trợ cơ bản cho for DI và được
định nghĩa bởi interface org.springframework.beans.factory.Bean


Factory.

Lớp XmlBeanFactory implements BeanFactory.Container này sẽ đọc
cấu hình từ file XML và sử dụng nó để tạo cấu hình cho hệ thống
hoặc ứng dụng.

18




The BeanFactory thường thích hợp sữ dụng ở nơi mà tài nguyên bị
giới hạn như trên thiết bị di động.

1.1.4.1.3. Module spring-context
•

Xây dựng trên một nền tảng vững chắc được cung cấp bởi các module
Core và Beans, được sử dụng để truy cập vào các đối tượng trong

•

framework-style tương tự như việc đăng ký một JNDI.
ApplicationContext
Các lớp thực thi ApplicationContext:
- FileSystemXmlApplicationContext: Container này tải các định
nghĩa của bean từ file XML. Cần cung cấp đầy đủ đường dẫn của
-

file XML cấu hình bean đến constructor.
ClassPathXmlApplicationContext: Container này tải các định
nghĩa của bean từ file XML. Cần cung cấp đầy đủ đường dẫn của

file XML, cần set đúng CLASSPATH vì container này sẽ tìm
kiếm

-

file XML cấu hình trong CLASSPATH.
WebXmlApplicationContext: Container này sẽ tải file XML định
nghĩa các bean trong ứng dụng web.

19


Hình 1.3 : ApplicationContext
1.1.4.1.4. Module spring-expression
Cung cấp một Expression Language mạnh mẽ cho việc truy vấn và tính toán
một đồ thị đối tượng lúc runtime. Nó được kế thừa và mở rộng từ unified
expression language.Ngôn ngữ này hỗ trợ setting và getting giá trị các
property, gọi phương thức, truy cập vào nội dung của mảng, tập hợp và chỉ
mục, operator logic và tính toán, đặt tên biến, và truy xuất các đối tượng theo
tên từ IoC container của Spring.
1.1.4.2. Data Access/Integration
1.1.4.2.1. Module spring-jdbc
Cung cấp một lớp JDBC-abstraction để loại bỏ những code tẻ nhạt cả JDBC
và phân tích những mã lỗi cụ thể của database-vendor.

20


1.1.4.2.2. Module spring-orm
Cung cấp lớp tích hợp với các orm API phổ biến như JPA, JDO và Hibernate.

1.1.4.2.3. Module spring-oxm
Cung cấp lớp abstraction hỗ trợ triển khai Object/XML mapping như AXB,
Castor, XMLBeans, JiBX and XStream.
1.1.4.2.4. Module spring-jms
Chứa các tính năng tạo và sử dụng các message. Từ Spring Framework 4.1,
nó được tích hợp với spring-messaging.
1.1.4.2.5. Module spring-transaction
Hỗ trợ quản lý giao dịch theo chương trình và khai báo cho các lớp mà thực
hiện các giao diện đặc biệt và cho tất cả các POJO của bạn.
1.1.4.3. Web
1.1.4.3.1. Module spring-web
Cung cấp tính năng tích hợp web theo định hướng cơ bản như chức năng tập
tin tải lên nhiều phần dữ liệu và khởi tạo các container IoC sử dụng nghe
servlet và một bối cảnh ứng dụng web theo định hướng.
1.1.4.3.2. Module spring-webmvc
Bao gồm việc triển khai Model-View-Controller (MVC) của Spring cho các
ứng dụng web.

21


1.1.4.3.3. Module spring-websocket
Cung cấp hỗ trợ cho WebSocket-based, giao tiếp hai chiều giữa client và
server trong các ứng dụng web.
1.1.4.3.4. Module springwebmvc-portlet
Cung cấp việc triển khai MVC được sử dụng trong môi trường portlet và ánh
xạ chức năng của module Web-Servlet.
1.1.4.4. Các module khác
1.1.4.4.1. Module AOP
Cung cấp một thực hiện lập trình hướng khía cạnh cho phép bạn xác định

phương pháp-chặn và pointcuts để sạch tách mã thực hiện chức năng đó nên
được tách ra.
1.1.4.4.2. Module Aspects
Cung cấp tích hợp với AspectJ, mà lại là một khuôn khổ AOP mạnh mẽ và
trưởng thành.
1.1.4.4.3. Module Instrumentation
cung cấp thiết bị đo đạc lớp hỗ trợ và triển khai lớp bộ nạp được sử dụng
trong các máy chủ ứng dụng nhất định.
1.1.4.4.4. Module Messaging
Cung cấp hỗ trợ cho STOMP như WebSocket sub-protocol để sử dụng trong
các ứng dụng. Nó cũng hỗ trợ một mô hình lập trình chú thích cho việc định
tuyến và xử lý tin nhắn STOMP từ các máy khách WebSocket.

22


1.1.4.4.5. Module Test
Hỗ trợ việc kiểm tra các thành phần mùa xuân với JUnit hoặc TestNG khuôn
khổ.
1.1.5. Các dự án trong Spring Framework
Trên thực tế Spring Framework là một tập hợp của nhiều dự án con. Spring
Core như chúng ta đã tìm hiểu là nền tảng của các dự án trong Spring
Framework. Một một dự án sẽ đảm nhận một chức năng riêng trong việc xây
dựng các ứng dụng doanh nghiệp. Chúng ta sẽ cùng điểm qua các dự án lớn
trong Spring.
1.1.5.1. Spring MVC
Spring MVC được thiết kế dành cho việc xây dựng các ứng dụng nền tảng
web. Đây là một dự án chúng ta không thể bỏ qua khi xây dựng các ứng dụng
Java web.
1.1.5.2. Spring Security

Dự án này cung cấp các cơ chế xác thực (authentication) và phân quyền
(authorization) cho ứng dụng của bạn.
1.1.5.3. Spring Boot
Spring Boot là một framework giúp chúng ta phát triển cũng như chạy ứng
dụng một cách nhanh chóng.
1.1.5.4. Spring Batch

23


Dự án này giúp chúng ta dễ dàng tạo các lịch trình (scheduling) và tiến trình
(processing) cho các công việc xử lý theo mẻ (batch job).
1.1.5.5. Spring Integration
Spring Integration là một implementation của Enterprise Integration Patterns
(EIP). Dự án này thiết kế một kiến trúc hướng thông điệp hỗ trợ việc tích hợp
các hệ thống bên ngoài.
1.1.5.6. Spring Social
Dự án này sẽ kết nối ứng dụng của bạn với các API bên thứ ba của Facebook,
Twitter, Linkedin ...
1.2. Tìm hiểu ReactJS
1.2.1. Giới thiệu
Reactjs là một thư viện Javascript đang nổi lên trong những năm gần đây với
xu hướng Single Page Application (SPA). Trong khi những framework khác
cố gắng hướng đến một mô hình MVC hoàn thiện thì React nổi bật với sự đơn
giản và dễ dàng phối hợp với những thư viện Javascript khác.
Nếu như AngularJS là một Framework cho phép nhúng code javascript trong
code html thông qua các attribute như ng-model, ng-repeat...thì với react là
một thư viện cho phép nhúng code HTML trong code javascript nhờ vào JSX,
bạn có thể dễ dàng lồng các đoạn HTML vào trong JS. Tích hợp giữa
javascript và HTML vào trong JSX làm cho các component dễ hiểu hơn.

1.2.2. ReactJS là gì?

24


React là một thư viện UI phát triển tại Facebook để hỗ trợ việc xây dựng
những thành phần (components) UI có tính tương tác cao, có trạng thái và có
thể sử dụng lại được. React được sử dụng tại Facebook trong production, và
instagram được viết hoàn toàn trên React.
Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt động
trên phía client, mà còn được render trên server và có thể kết nối với nhau.
React so sánh sự thay đổi giữa các giá trị của lần render này với lần render
trước và cập nhật ít thay đổi nhất trên DOM. Trước khi đến cài đặt và cấu
hình, chúng ta sẽ đi đến một số khái niệm cơ bản:
1.2.2.1. Virtual DOM
Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng. Việc chỉ node gốc
mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với
việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến
tốc độ xử lý. React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề
này.Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin
cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi
giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree
thật.

25