Tìm hiểu về reactjsexpress framework

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA HỆ THỐNG THÔNG TIN

BÁO CÁO ĐỒ ÁN 2

ĐỀ TÀI: TÌM HIỂU VỀ REACTJS-EXPRESS
FRAMEWORK

Lớp:

SE122.N21

Giảng viên hướng dẫn:

ThS. Nguyễn Công Hoan

Sinh viên thực hiện:

Nguyễn Bảo Duy – 19520488

🙡 TP. Hồ Chí Minh, 6/2023 🙡


ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA HỆ THỐNG THÔNG TIN

BÁO CÁO ĐỒ ÁN 2
ĐỀ TÀI: TÌM HIỂU VỀ REACTJS-EXPRESS
FRAMEWORK

Lớp:

SE122.N21

Giảng viên hướng dẫn:

ThS. Nguyễn Công Hoan

Sinh viên thực hiện:

Nguyễn Bảo Duy – 19520488

🙡 TP. Hồ Chí Minh, 6/2023 🙡


LỜI CẢM ƠN
Em xin gửi lời cảm ơn tới thầy Nguyễn Công Hoan đã giúp đỡ, hướng dẫn,
định hướng cách làm việc của em trong suốt quá trình thực hiện đồ án. Em vơ cùng
biết ơn thầy vì đã tận tình chỉ dẫn em thực hiện đề tài này. Trong q trình thực hiện
của em cịn hạn chế và cịn nhiều khó khăn nên khơng tránh khỏi những thiếu sót
nên em mong thầy sẽ đưa ra những góp ý, hướng dẫn để em có thêm cho mình
nhiều kiến thức bổ ích, tinh thần học tập hiệu quả, nghiêm túc. Em xin chân thành
cảm ơn thầy!
TP. Hồ Chí Minh, tháng 6 năm 2023
Sinh viên thực hiện

Nguyễn Bảo Duy

1

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………, ngày ……… tháng ……… năm ………
Giảng viên hướng dẫn

Nguyễn Công Hoan

2


3

MỤC LỤC
DANH MỤC HÌNH ẢNH...............................................................................6
DANH MỤC BẢNG........................................................................................7
Chương 1 Tổng quan về đề tài.......................................................................8
1.1. Lý do chọn đề tài....................................................................................8
1.2. Mục tiêu.................................................................................................8
1.3. Phạm vi nghiên cứu...............................................................................8
1.4. Đối tượng sử dụng................................................................................9
1.5. Phương pháp thực hiện........................................................................9
1.6. Công nghệ..............................................................................................9
Chương 2 Cơ sở lý thuyết.............................................................................10
2.1. Reactjs..................................................................................................10
2.1.1. Giới thiệu chung............................................................................10
2.1.2. Các khái niệm cơ bản....................................................................10
2.1.2.1. Tiến cận component-based.........................................................10
2.1.2.2. Virtual DOM..............................................................................11
2.1.2.3. Props và State.............................................................................12
2.1.2.4. Vòng đời của component............................................................12
2.1.2.5. React Hook.................................................................................13
2.1.2.6. Cách Reactjs hoạt động..............................................................14
2.1.2.7. Ưu điểm của Reactjs...................................................................14
2.2. React-Route.........................................................................................16
2.3. React Redux và Redux-toolkit..........................................................17
2.4. Expressjs.............................................................................................18
2.5. Mongoose.............................................................................................18
2.6. JSON Web Token...............................................................................19

4

Chương 3 Phân tích và thiết kế hệ thống....................................................20
3.1. Xây dựng hệ thống.............................................................................20
3.1.1. Kiến trúc hệ thống.........................................................................20
3.1.2. Mô tả chi tiết.................................................................................20
3.2. Phân tích yêu cầu................................................................................20
3.2.1. Yêu cầu chức năng........................................................................20
3.2.2. Yêu cầu phi chức năng..................................................................21
3.3. Sơ đồ use-case.....................................................................................22
3.3.1. Danh sách actor.............................................................................23
3.3.2. Danh sách use-case........................................................................23
3.4. Sơ đồ use-case.....................................................................................24
3.4.1. Đăng ký.........................................................................................24
3.4.2. Đăng nhập.....................................................................................24
3.4.3. Tìm kiếm.......................................................................................25
3.4.4. Xem tin tức....................................................................................25
3.4.5. Đánh giá sản phẩm........................................................................26
3.4.6. Thêm sản phẩm vào giỏ hàng........................................................26
3.4.7. Sửa sản phẩm trong giỏ hàng........................................................27
3.4.8. Xóa sản phẩm trong giỏ hàng........................................................27
3.4.9. Xử lý đơn hàng..............................................................................27
3.4.10. Thêm sản phẩm...........................................................................28
3.4.11. Sửa sản phẩm...............................................................................28
3.4.12. Xóa sản phẩm..............................................................................29
3.4.13. Thêm tin tức................................................................................29
3.4.14. Sửa tin tức...................................................................................30
3.4.15. Xóa tin tức...................................................................................30
Chương 4 Xây dựng website.........................................................................32
4.1. Giao diện bên phía người dùng.........................................................32

5


4.1.1. Trang chủ.......................................................................................32
4.1.2. Đăng nhập.....................................................................................33
4.1.3. Đăng ký.........................................................................................34
4.1.4. Tin tức...........................................................................................34
4.1.5. Giỏ hàng........................................................................................35
4.2. Giao diện bên phía người dùng.........................................................36
4.2.1. Đăng nhập.....................................................................................36
4.2.2. Tổng quan......................................................................................36
4.2.3. Danh sách các hãng sản phẩm.......................................................37
4.2.4. Danh sách sản phẩm......................................................................38
Chương 5 Kết luận........................................................................................39
5.1. Thuận lợi.............................................................................................39
5.2. Khó khăn.............................................................................................39
5.3. Ưu điểm của đồ án..............................................................................39
5.4. Nhược điểm của đồ án.......................................................................39
5.5. Hướng phát triển đề tài......................................................................39
TÀI LIỆU THAM KHẢO...............................................................................40

6


DANH MỤC HÌNH ẢNH
Hình 2.1.2.2.1 Mơ tả Virtual DOM.................................................................12
Hình 2.1.2.4.1 Vịng đời của component........................................................13
Hình 3.1.1.1 Sơ đồ kiến trúc hệ thống.............................................................20
Hình 3.2.2.1 Sơ đồ use-case............................................................................22

Hình 3.2.2.2 Sơ đồ phân rã use-case...............................................................22
Hình 4.1.1.1 Trang chủ....................................................................................32
Hình 4.1.2.1 Màn hình đăng nhập...................................................................33
Hình 4.1.3.1 Màn hình đăng ký.......................................................................34
Hình 4.1.4.1 Màn hình tin tức.........................................................................34
Hình 4.1.5.1 Màn hình giỏ hàng......................................................................35
Hình 4.2.1.1 Màn hình đăng nhập...................................................................36
Hình 4.2.2.1 Màn hình tổng quan....................................................................36
Hình 4.2.3.1 Màn hình các hãng sản phẩm.....................................................37
Hình 4.2.4.1 Màn hình danh sách sản phẩm...................................................38

7


DANH MỤC BẢNG
Bảng 3.1.2.1 Kiến trúc hệ thống......................................................................20
Bảng 3.2.1.1 Yêu cầu chức năng.....................................................................20
Bảng 3.3.1.1 Danh sách Actor.........................................................................23
Bảng 3.3.2.1 Danh sách use-case....................................................................23
Bảng 3.4.1.1 Đặc tả use-case Đăng ký............................................................24
Bảng 3.4.2.1 Đặc tả use-case Đăng nhập.......................................................24
Bảng 3.4.3.1 Đặc tả use-case Tìm kiếm.........................................................25
Bảng 3.4.4.1 Đặc tả use-case Xem tin tức......................................................25
Bảng 3.4.5.1 Đặc tả use-case Đánh giá sản phẩm..........................................26
Bảng 3.4.6.1 Đặc tả use-case Thêm sản phẩm vào giỏ hàng.........................26
Bảng 3.4.7.1 Đặc tả use-case Sửa sản phẩm trong giỏ hàng..........................27
Bảng 3.4.8.1 Đặc tả use-case Xóa sản phẩm trong giỏ hàng.........................27
Bảng 3.4.9.1 Đặc tả use-case Xử lý đơn hàng................................................27
Bảng 3.4.10.1 Đặc tả use-case Thêm sản phẩm.............................................28
Bảng 3.4.11.1 Đặc tả use-case Sửa sản phẩm................................................28

Bảng 3.4.12.1 Đặc tả use-case Xóa sản phẩm................................................29
Bảng 3.4.13.1 Đặc tả use-case Thêm tin tức..................................................29
Bảng 3.4.14.1 Đặc tả use-case Sửa tin tức.....................................................30
Bảng 3.4.15.1 Đặc tả use-case Xóa tin tức.....................................................30

8


Chương 1 Tổng quan về đề tài
1.1.Lý do chọn đề tài
Trong thời đại khoa học công nghệ ngày càng phát triển thì website là thứ
cơng cụ ngày càng cần thiết và quan trọng đối với các doanh nghiệp. Website giúp
doanh nghiệp giao tiếp và tiếp cận khách hàng dễ dàng hơn, hiệu quả hơn, thơng
qua đó biết được nhu cầu tìm hiểu sản phẩm và các phản hồi đến từ khách hàng.
Một website chất lượng và chuyên nghiệp giúp nâng cao hình ảnh và uy tín của
doanh nghiệp. Vì vậy, việc xây dựng và thiết kế một website là một bước thiết yếu
để doanh nghiệp có thể phát triển mạnh mẽ.
Hiện nay, để có thể xây dựng và phát triển một ứng dụng web một cách
nhanh chóng thì đã có rất nhiều thư viện, framework hỗ trợ cho chúng ta sử dụng.
 Về phía client: Reactjs sẽ giúp các developers xây dựng một giao diện người
dùng linh hoạt thông qua component nhằm để dễ dàng tái sử dụng, bảo trì các
component này. Ngoài ra, Reactjs sử dụng Virtual DOM để tăng hiệu suất của
ứng dụng web và giảm tải cho trình duyệt.
 Về phía server: Express.js giúp đơn giản hóa việc xây dựng ứng dụng web phía
server bằng cách cung cấp các APIs đơn giản và dễ hiểu. Nó cũng linh hoạt cho
phép bạn tùy chỉnh và mở rộng theo nhu cầu của ứng dụng.

1.2.Mục tiêu
-

Tìm hiểu và nghiên cứu cách thức hoạt động của ReactJS và Express.js.

-

Sử dụng các nghiên cứu đó để xây dựng một hệ thống ứng dụng web.

1.3.Phạm vi nghiên cứu
 Phạm vi môi trường:
o Triển khai ứng dụng trên môi trường web.
 Phạm vi chức năng:
o Quản lý thông tin sản phẩm

9


o Quản lý giỏ hàng
o Tìm kiếm sản phẩm theo nhu cầu
o Phân loại các sản phẩm
o Đánh giá các sản phẩm

1.4.Đối tượng sử dụng
 Người dùng khách
 Người dùng có tài khoản
 Quản trị viên (Admin)

1.5.Phương pháp thực hiện
-

Tìm hiểu về Reactjs, Express.js và một số thư viện khác.

-

Khảo sát các website bán hàng có trên thị trường để xác định các yêu cầu,
tính năng của ứng dụng.

-

Xây dựng hệ thống Backend kết nối với cơ sở dữ liệu.

-

Thiết kế giao diện website cho người dùng và cho quản trị viên

1.6.Công nghệ
-

Front-end: Reactjs với Redux.

-

Back-end: Express.js.

-

Database: MongoDB.

-

10

Chương 2 Cơ sở lý thuyết
2.1.Reactjs
2.1.1.Giới thiệu chung
ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi
Facebook. Nó được sử dụng để xây dựng giao diện người dùng (UI) động và tương
tác trên các ứng dụng web. ReactJS giúp phân chia giao diện thành các component
độc lập, cho phép việc quản lý và tái sử dụng mã dễ dàng hơn.
Một trong những đặc điểm nổi bật của ReactJS là việc sử dụng Virtual DOM
(DOM ảo) để tối ưu hiệu năng. Thay vì tương tác trực tiếp với DOM thực, ReactJS
sử dụng DOM ảo để cập nhật chỉ những phần cần thiết thay vì tồn bộ giao diện.
Điều này giúp giảm tải và tăng tốc độ hiển thị giao diện.
2.1.2.Các khái niệm cơ bản
2.1.2.1.Tiến cận component-based
Cách tiếp cận component-based trong ReactJS là một cách cấu trúc ứng dụng
của bạn bằng cách chia nhỏ nó thành các component độc lập và có thể tái sử dụng.
Mỗi component đại diện cho một phần hoặc tính năng cụ thể trong ứng dụng của
bạn và nó có thể được tổng hợp, lồng vào nhau và sử dụng lại trong các phần khác
nhau của ứng dụng của bạn.
Dưới đây là các nguyên tắc chính của cách tiếp cận component-based trong
ReactJS:
1. Khả năng tái sử dụng: Các component được thiết kế để có thể tái sử
dụng, nghĩa là bạn có thể sử dụng cùng một component nhiều lần trong các phần
khác nhau của ứng dụng. Điều này giúp giảm trùng lặp mã và thúc đẩy cơ sở mã
modular và có thể bảo trì.
2. Tách biệt: Mỗi component trong ReactJS tập trung vào một mối quan tâm
hoặc chức năng cụ thể. Bằng cách chia nhỏ ứng dụng của bạn thành các component
nhỏ hơn, bạn có thể quản lý các phần khác nhau của ứng dụng một cách riêng biệt
và dễ dàng thực hiện các thay đổi hoặc cập nhật mà không ảnh hưởng đến các phần
khác.

11


3. Component: ReactJS cung cấp một cách để kết hợp các component lại
với nhau để xây dựng các giao diện người dùng phức tạp hơn. Bạn có thể lồng các
component bên trong các component khác để tạo một hệ thống phân cấp các
component đại diện cho cấu trúc ứng dụng của bạn.
4. Quản lý trạng thái: Các component trong ReactJS có thể có trạng thái
riêng, cho phép chúng quản lý và kiểm sốt dữ liệu của chính chúng. Bằng cách
đóng gói trạng thái bên trong các component , bạn có thể đảm bảo rằng mỗi
component đều độc lập và độc lập.
2.1.2.2.Virtual DOM
Virtual DOM là một khái niệm quan trọng trong ReactJS. Nó là một cơ chế
tối ưu hóa để làm việc với DOM (Document Object Model) trong ứng dụng web.
Trước khi đi vào chi tiết về Virtual DOM, chúng ta cần hiểu DOM là gì.
DOM là một biểu diễn cấ trúc của một tài liệu HTML hoặc XML mà trình
duyệt web sử dụng để hiển thị nội dung vàản lý sự tương tác của người dùng với nội
dung đó.
Khi một ứng dụng React được render, React tạo ra một bản sao ảo của DOM
hiện tại, được gọi là Virtual DOM. Virtual DOM là một biểu diễn của DOM trong
bộ nhớ và nó cung cấp một cách tiếp cận hiệu quả hơn để cập nhật và tái render các
component của ứng dụng.
Khi trạng thái của ứng dụng thay đổi, React so sánh Virtual DOM mới với
Virtual DOM cũ để tìm ra sự khác biệt. Sau đó, React chỉ cập nhật những phần thay
đổi duy nhất trên DOM thực tế, thay vì cập nhật toàn bộ DOM. Điều này giúp tăng
hiệu suất và tối ưu hóa sự render của ứng dụng. Virtual DOM cũng cho phép React
gom nhóm nhiều thay đổi vào một lần cập nhật, giúp giảm số lần truy cập và cập
nhật.

12


Hình 2.1.2.2.1 Mơ tả Virtual DOM

2.1.2.3.Props và State
Trong ReactJS, "props" là một cách để truyền dữ liệu từ một thành phần cha
xuống các thành phần con. "Props" là viết tắt của "properties" và nó được sử dụng
để truyền các giá trị tĩnh từ một thành phần cha xuống các thành phần con.
Khi một thành phần nhận được một giá trị "prop" từ thành phần cha, nó có
thể sử dụng giá trị đó để hiển thị và tương tác với người dùng. Một lợi ích quan
trọng của việc sử dụng props là nó cho phép tái sử dụng các thành phần và tạo ra
các thành phần động dựa trên dữ liệu đầu vào.

Cịn State là một đặc tính của các component. Nó được sử dụng để lưu
trữ và quản lý các dữ liệu có thể thay đổi trong component. Khi state thay đổi,
React sẽ tự động cập nhật và render lại component để hiển thị dữ liệu mới.
2.1.2.4.Vòng đời của component
Một loạt các thay đổi mà Component trải qua từ khi nó được tạo ra cho tới
khi nó kết thúc (bị hủy) được gọi là một vòng đời (lifecycle) của Component. Trong
quá trình tồn tại của Component các phương thức sẽ được gọi, dưới đây là hình ảnh
minh họa vịng đời của Component và các phương thức sẽ được gọi trong các giai
đoạn khác nhau.

13


Hình 2.1.2.4.2 Vịng đời của component

Các phương thức trong React Component Lifecycle có thể chia ra làm 3 pha

chính là:
 Mounting: giai đoạn component được tạo ra và render lần đầu tiên trên cây
DOM. Các phương thức có thể sử dụng là contructor(), render(),
componentDidMount()
 Updating: giai đoạn component cần cập nhật lại giao diện mỗi khi props và
state của component đó có sự thay đổi. Các phương thức có thể sử dụng là
render(), shouldComponentUpdate(), componentDidUpdate()
 Unmounting: giai đoạn component bị xóa khỏi cây DOM. Phương thức có
thể sử dụng là componentWillUnmount()
2.1.2.5.React Hook
Để có thể sử dụng trạng thái (state) và các hoạt động (lifecycle) trong các
thành phần React, chúng ta phải sử dụng các lớp (class components). Tuy nhiên,
việc sử dụng lớp có thể dẫn đến các vấn đề callback các phương thức phức tạp và
khó khăn trong việc chia sẻ logic giữa các thành phần.

14


Với React Hook, chúng ta có thể viết mã logic trong các hàm (functional
components) mà không cần sử dụng lớp. Hook cho phép chúng ta sử dụng các tính
năng như trạng thái, hoạt động và các hiệu ứng của React mà không cần viết lại
thành các lớp.
Các hook thường dùng là:
 useState: dùng để khai báo một biến state và một phương thức cập nhật
setState thay cho việc sử dụng this.state trong class. Khi có nhu cầu cập nhật
biến state, ta chỉ cần gọi phương thức setState() và truyền tham số mới để
cập nhật.
 useEffect: dùng để thực hiện các side effect bên trong component function
(ví dụ như thay đổi DOM, lấy dữ liệu, …). Nó cùng mục đích với
componentDidMount, componentUpdate và componentWillUnmount nhưng

được thống nhất lại trong một API duy nhất.
2.1.2.6.Cách Reactjs hoạt động
ReactJS thường được sử dụng để tạo giao diện cho các single page
application (SPA). Ứng dụng web được chia thành các component. Mỗi component
bao gồm hai thành phần chính: state và props. Props là dữ liệu được truyền từ
component cha sang component con, trong khi state là dữ liệu của component. Ứng
dụng web khơng render tồn bộ trang web mà chỉ render lại phần mà người dùng sử
dụng; phần chỉ được render khi tình trạng của nó thay đổi. ReactJS đã cải thiện hiệu
suất của ứng dụng web và trở thành thư viện phát triển giao diện phổ biến vì nguyên
tắc hoạt động cùng với các component chỉ định nghĩa một lần có thể sử dụng nhiều
lần.
2.1.2.7.Ưu điểm của Reactjs
 Dễ tiếp cận:

React là thư viện khá dễ tiếp cận và sử dụng đối với những lập trình
viên mới bắt đầu học, thậm chí bạn có thể sử dụng React chỉ trong vài ngày
học theo tuturial và đọc các tài liệu liên quan. Trong mơ hình MVC (Model-

15


View-control) thì React đảm nhận nhiệm vụ View. Nó hoạt động bằng cách
kết hợp HTML và Javascript thuần, vì thế cú pháp trong React khá là dễ hiểu.
 Tăng tốc độ tải trang với Virtual DOM:

Việc sử dụng Real DOM cấu trúc dạng tree với kích thước lớn, khi thay
đổi gía trị, cây DOM được cập nhật lại tồn bộ gây tốn thời gian và rủi ro.
Để giải quyêt vấn đề trên, React sử dụng Virual DOM (DOM ảo), mỗi
khi render thì React sẽ tạo ra một DOM ảo và lưu nó vào trong bộ nhớ, khi
thay đổi state của component thì DOM ảo sẽ được cập nhật lại và so sách với

DOM ảo cũ (được đồng bộ với DOM thật trước đó) bằng thuật tốn ‘diffing‘,
để tìm ra những node cần thay đổi và cuối cùng cập nhật lại những node đó
trên DOM thật. Vì thế q trình cập nhật lại cây DOM sẽ không bị gián đoạn
và làm chậm phản hồi, giúp website chạy mượt mà và nhanh hơn.
 Tái sử dụng dễ dàng:

React giúp lập trình viên hồn tồn có thể sử dụng lại các component
đã khai báo trước đó để phát triển các ứng dụng khác nhau có cùng chứ năng.
Đây là một điểm mạnh cũng như lợi thế của ReactJS giúp các lập trình
viên có thể dễ thở hơn trong các dự án.
 Viết component dễ dàng với JSX:

Khi nhắc đến React ta không thể bỏ qua JSX (Javascript + XML), đây
là cú pháp mở rộng gần giống XML, người dùng có thể lập trình React bằng
cú pháp của XML thay vì sử dụng Javascript mà khơng làm thay đổi ý nghĩa
của Javascript, nó giúp chúng ta dễ dàng định nghĩa và quản lý các
component phức tạp cũng như việc dễ dàng đọc hiểu được ý nghĩa của các
component hơn.
 Thân thiện với SEO:

16


Một vai trò quan trọng trong tối ưu SEO là tốc độ tải trang. React có
thể tăng tốc dộ tải trang của ứng dụng thông qua Virtual DOM, nên rất có
hiệu quả với việc cải thiện kết quả SEO.
Mặt khác, React có khả năng tạo ra các giao diện người dùng có thể
truy cập vào các cơng cụ tìm kiếm. Tuy nhiên React không thể cải thiện 100%
khả năng SEO của trang web, còn cần phải phụ thuộc vào các thư viện bổ
sung, nội dung trang web, định tuyến, tương tác người dùng, v.v…

 Dễ tích hợp và kiểm thử:

Như đã giới thiệu ở trên, React chỉ là một thư viện giúp tạo ra giao diện
người dùng (View) nên có thể dễ dàng tích hợp vào các framework khác như
Angular, BackbooneJS…
React được thiết kế với việc tạo ra các component riêng lẻ, nên việc
kiểm thử UI, chức năng cũng được đơn giản hóa theo từng component. Bằng
cách tích hợp các thư viện kiểm thử như Jest, Enzyme, React Testing Library
… sẽ giúp cho việc kiểm thử dễ dàng hơn.
2.2.React-Route
React-Router là một thư viện định tuyến (routing) tiêu chuẩn trong React. Nó
giữ cho giao diện của ứng dụng đồng bộ với URL trên trình duyệt. ReactRouter cho phép bạn định tuyến "luồng dữ liệu" (data flow) trong ứng dụng của bạn
một cách rõ ràng. Nó tương đương với sự khẳng định, nếu bạn có URL này, nó sẽ
tương đương với Route này, và giao diện tương ứng.
Bao gồm các thành phần cơ bản:
 BrowserRouter: Được sử dụng phổ biến hơn, nó sử dụng History API có
trong HTML5 để theo dõi lịch sử bộ định tuyến của bạn.
 Route: Định nghĩa một ánh xạ (mapping) giữa một URL và một Component.
Điều đó có nghĩa là khi người dùng truy cập theo một URL trên trình duyệt,
một Component tương ứng sẽ được render trên giao diện.

17


 Link: Trong HTML thì cặp thẻ để chuyển hướng đó là thẻ <a></a> thì trong
react chúng ta sẽ dử dụng cặp thẻ <Link></Link> được import từ ReactRouter.
 NavLink:

NavLink thì

rất

giống

với Link về

cách

sử

dụng,

nhưng NavLink tốt hơn vì nó hỗ trợ thêm một số thuộc tính như
là activeClassName và activeStyle 2 thuộc tính này giúp cho khi mà nó trùng
khớp thì nó sẽ được active lên và chúng ta có thể style cho nó.
2.3.React Redux và Redux-toolkit
Redux là cơng cụ quản lý state phổ biến và khá gây tranh cãi trong hệ sinh
thái react, vì có khá nhiều dev than phiền là redux dài dịng và khó sử dụng. Riêng
mình thì khơng thấy khó nhưng nhiều lúc cũng thấy hơi dài dịng thật . Vì để tạo ra
một store hồn chỉnh thì chúng ta cần qua khá nhiều bước, tạo nhiều file với các
đoạn code lặp lại khá nhiều, ngoài ra redux không hề xây dựng một quy chuẩn rõ
ràng cho việc viết logic., cũng như ngồi redux thì đơi khi ta cần cài đặt thêm một
số thư viện nữa như middleware, selectors... thì mới có thể viết hồn chỉnh
logic quản lý state.
Redux-toolkit là một package được sinh ra nhằm giải quyết phần lớn những
vấn đề kể trên, được phát triển bởi chính chủ reduxjs team, giúp chúng ta viết code
redux nhanh gọn, hồn chỉnh theo một quy chuẩn thống nhất.
Redux có 3 thành phần:
 Store: lưu trạng thái ứng dụng và nó là duy nhất trong bất kỳ một ứng dụng
Redux nào. Bạn có thể access các state được lưu, update state, và đăng ký or

hủy đăng ký các listeners thông qua helper methods.
 Action: là các event, Chúng là cách mà chúng ta send data từ app đến Redux
store. Những data này có thể là từ sự tương tác của user vs app, API calls
hoặc cũng có thể là từ form submission.
 Reducer: là các function nguyên thủy chúng lấy state hiện tại của app, thực
hiện một action và trả về một state mới. Những states này được lưu như

18