Thiết kế và xây dựng website bán giày bằng reactjs + mongodb

Ngoỏi ra, việc lựa chọn sử dụng cừng nghệ ReactIS để xóy dựng giao diện website cho phờp chỷng ta tạo ra một trang web thón thiện với người dỳng vỏ linh hoạt, đõp ứng được xu hướng vỏ yở

BO GIAO DUC VA DAO TAO TRUONG DAI HOC NGUYEN TAT THANH KHOA CONG NGHE THONG TIN

NGUYEN TAT THANH

TIEU LUAN MON HOC

CHUYEN DE CHUYEN SAU KTPM2

Tén dé tai:

THIET KE VA XAY DUNG WEBSITE BAN GIAY BANG

REACTJS + MONGODB

Giảng viên hướng dân : Bùi Tiên Đức

BO GIAO DUC VA DAO TAO TRUONG DAI HOC NGUYEN TAT THANH KHOA CONG NGHE THONG TIN

NGUYEN TAT THANH

TIEU LUAN MON HOC

CHUYEN DE CHUYEN SAU KTPM2

Tén dé tai:

THIET KE VA XAY DUNG WEBSITE BAN GIAY BANG

REACTJS + MONGODB

Giảng viên hướng dân : Bùi Tiên Đức

BM-ChT-

PHIEU CHAM THI TIEU LUAN/BAO CAO

Môn thi: Chuyên đề chuyên sâu KTPM2 Mã lớp học phần:

Sinh viên thực hiện: Phạm Hoài Bảo

TRUONG DAI HOC NGUYEN TAT THÀNH CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

TO NHIEM VU DO AN MON HOC

(Sinh viên phải đóng tờ này vào cuồn báo cáo)

Họ và tên sinh viên: Phạm Hoài Bảo MSSV: 2100003176

Email: SDT:

Tên đề tài: Thiết Kế Và Xây Dyng Website Ban Giay Bang ReactJS + MongoDB

Giang vién giang day:

Thời gian thực hiện: từ ngày đến

Nhiệm vụ: Phân tích, thiết kế và xây dựng website

Nội dung:

Tìm hiểu về ReactJS Tìm hiểu về đề tài ứng dụng quản lý bán hàng Phác họa thiết kế và xây dựng nội dung ứng dụng quản lý bán hàng

Xây dựng các giao diện cho ứng dụng

Phương pháp: sử dụng công nghệ ReactJS và MongoDB để thực hiện đề tài

Nội dung và yêu cầu đã được thông qua Bộ môn

TP HCM, ngảy tháng năm 2023

ThS Phạm Văn Đăng

LỜI CẢM ƠN

Em xin chân thành gửi lời cảm ơn đến với giảng viên hướng dẫn Th§ vỉ trong quá trinh học tập và thực hiện đồ án này đã tận tỉnh chỉ bảo, hướng dẫn, định hướng cho em thực hiện được đồ án này Trong thời p1an thực hiện dé án em cũng có mắc một số lỗi và cũng được thầy hướng dẫn cách khắc phục và chỉ ra hướng đi đúng Và cũng nhờ được thầy giảng dạy và hướng dẫn mà đồ án của em đã được hoàn thành nhanh chóng Em xin gửi lời cảm on sau sac dén voi thay

Em xin gửi lời cảm ơn đến với các anh chị khóa trên và bạn bè trong lớp Trong thời gian em thực hiện đồ án nhờ các anh chị, bạn bè đã tận tâm hướng dẫn cách thiết ké, viết

code như thế nào để hoàn thiện đồ án nhanh chóng Em xin gửi lời cảm ơn chân thành

đền với tật cả các anh chị, bạn bè trong lớp

Em xin cảm ơn tất cả mọi người vì đã giup em trong thời gian thực hiện đô án này kịp thời gian và hoàn thành đúng tiến độ ạ

Sinh viên thực hiện (Ký tên)

LỜI MỞ ĐẦU

Chao mừng bạn đến với thế giới của những đôi giày không chỉ là phụ kiện, mà còn

là người bạn đồng hành trên mọi nẻo đường cuộc sống Tại đây, mỗi đôi giay duoc tạo

ra không chỉ để bảo vệ đôi chân của bạn khỏi những va chạm của cuộc song hang ngay, ma con dé nang niu timg bước đi, giúp bạn tự tin bước tới thành công và hạnh phúc

Với đa dạng mẫu mã từ giày thể thao năng động, giày lười tiện lợi, đến giày tây lịch lãm, chúng tôi tự hào mang đến cho bạn những sự lựa chọn hoàn hảo cho mọi hoàn cảnh và sự kiện Dù bạn là người yêu thích sự năng động, hay ưa chuộng phong cách

cô điển, bạn đều có thể tìm thấy đôi giày ưng ý tại cửa hàng của chúng tôi

Không chỉ dừng lại ở việc cung cấp sản phâm, chúng tôi còn cam kết mang đến cho bạn trải nghiệm mua sắm trực tuyến tốt nhất Website của chúng tôi được thiết kế với giao dién than thiện va dễ sử dung, g1up ban dé dang tim kiếm va chọn lựa sản phâm

mà không cần phải rời khỏi nhà Hệ thống phân loại sản phẩm thông minh sẽ giúp bạn

lọc ra những đôi giày phủ hợp nhất với nhu cầu của mỉnh chỉ trong vai cú click chuột

Chúng tôi tin rằng website này sẽ mang lại giá trị thực tiễn cho người tiêu dùng, nâng

cao trải nghiệm mua sắm trực tuyến, và đồng thời là một sản phâm công nghệ mới, sáng tao va co khả năng ứng dụng rộng rãi

Trong tiểu luận này, chúng tôi sẽ trình bày các nội dung chính như sau:

- Chương 1: Giới thiệu chung về đề tài

- Chương 2: Cơ sở lý thuyết

- Chương 3: Phân tích và thiết kế hệ thống ứng dụng

- Chương 4: Thực nghiệm và triển khai

- Kết luận

- Tài liệu tham khảo

NHẬN XÉT CUA GIANG VIÊN HƯỚNG DẪN

LỜI MỞ ĐẦU 222 21221221221212112211221222121121221221 1212211212122 erre CHƯƠNG 1: GIỚI THIỆU CHUNG VỀ ĐÊ TÀI 22-52 2 11221E21221271221271211221 2 cre

1.1 Lý do chọn TT ccc cccccccccescscscsesesesevsvevscsvstsesevevevevasisissevesesevevevsssvsssvecsasstvesseceees IWýVA nàn ¡0:20 8n

1.3 Đối tượng nghiên CỨU 52 99 22151121111E1111211 111112111 1111212111111 2111 ce

1.4 Phạm vI nghiên CỨU 2c 2c 22212212221 121 115111111 111011111111 11111 1111111101111 11 1111k khay 1.5 Bố cục đề tài ST ST ng 12115111 E tr H HH HH HH Ha

CHƯƠNG 2: CƠ SỞ LÝ THUYÊT 22-22 22E2251122127112712121111211111211212122211 22 xe

2.1 GiGi thiéu ReactIs ăn

2.2 Cài đặt và cầu hình môi trường phát triển ReactJS s22 1E 1115121121211 6

2.2.2 Câu hình môi trường phát triển ReactJ§ 5s S2 121111112721 1.1m te 10

2.3 Cấu trúc cơ bản của ứng dụng ReactJS và xử lý sự kiện trong ReactJS

2.3.1 Câu trúc cơ bản của ứng dụng ReactJ§ 5s Ss c2 2 212211211111 rrg 11 2.3.2 Xử ly sự kiện trong Reactϧ c1 012112 112 11011111111111111 1111111111111 kg 11 2.4 Quan lý dữ liệu trong Reactls o.oo ccc c0 1 11211 1211111111111111211 1011111111120 1122111111

2.5 Forms va Routing trong Reaet]Š c1 111 1122112111211 111 11121121011 11111 15011 ngờ

2.5.1 Forms trong ReactJS - ác L1 v1 1110111111 11111 1111111111111 11H ng E11 111 kg 0 13 2.5.2 Routine trong ReactÏS c1 0 121122 11211 10110111011211111111111 201111111111 x kg 14 P.8 .unhG (0 6000) .1

CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KÉ HỆ THÓNG 52 S1 2111222211122 x2 3.1 Giới thiệu hệ thống ứng dụng - - 151 212111 121111211 111212122111 212g

3.2 Mô hình chức nắng - ¿c1 02 2112011211221 121112 110111011111 1111 111101110 1121111121111 11 1111k k

EES 0ì 005)9)000i 0i 1

CHƯƠNG 4: CHƯƠNG 4: THỰC NGHIỆM VÀ TRIÊN KHAI 2222222S2222555 5552552

4.1 Man hinh trang on acc na 4.2 Các màn hình dành cho khách hàng 2 0222221121121 121 111211511181 1113 11111111 1x ty

4.2.1Màn hình đăng nhập - 0 2212211221121 1 12111211 10112111011 101111211112 211 121 sk 23

4.2.2 Màn hình đăng ký - G2: 221212111211 1121121111 22111151 2211112011111 11 11k rrcH 23 4.2.3 Màn hình bài viẾt 5: 225 222 2221122711222112221111211121111211121212101 11102 re 25 4.2.4 Màn hình liệt kê các loại sản phẩm 5252 S19 E1 2E1E12112127115 111222 e6 26 4.2.5 Màn hình chỉ tiết sản phâm 2 1 S251 21921212715712112111111 21111121112 trtg 27 4.2.6 Màn hình liên hệ 2 G22 2221221321151 323111111 81111 1511811112011 1 1581211111 re 28

4.2.7 Màn hình tìm kiếm sản phẩm và đặt mua hàng - 52 5 SE S222 cEczeg 29 4.3 Các màn hình dành cho quản tFỊ . - 5 2c 22 2212212121123 11211553111 1121 185121111811 111 1xx ty

4.3.1 Man hinh giao điện trang quản tTỊ - 2: 222 222121112112 212511151153 212 182211 k2 33

4.3.2 Màn hình quản lý tải khoản 12 2 221211121111 111111 1111111111111 11111 11 ke 34 4.3.3 Màn hình quản lý sản phẩm (thêm, sửa, xóa sản phâm) -2- 2 22252 34 4.3.4 Màn hình quản ly bài viết (thêm, xóa bài viết) 5s 1S 2211121221122 xe 37

DANH MỤC CÁC BẢNG BIÊU

Trang

s7 08104 1 19 5T 00» )À 4i ƯŒÝ 19 Bang v00 PP 20 s5 Pin GiẳỒÚÚ 20 0n P is 0 14 1+1DŨ.Ă.Ă 20 Bang 6 ChiTietD Hen 21

10

DANH MỤC CÁC HÌNH

Trang

Hinh 1 Gidi thiéu ReactdS oo ii H.ă.ằẼ 6

Hình 2 Giới thiệu Virtual DOM - 2-21 212211221221121111112211211121121112221212 te 7

Hình 3 Giới thiệu cơ chế one-way dafa binding - s2 12 E2221121111111 11121121 t xe 8

Hình 4 Giới thiệu JSX -2 2 222 21222127112212211 1121121121222 1212 ererreg 8

Hình 5 Giới thiệu ReactJS Componett - c1 20121112112 11 2211221111111 1115111118811 re 9 Hinh 6 Giới thiệu MonpolDB - 0 1211211211111 11 1112110111011 1111 11111111011 11 TH HH re 16 Hình 7 Mô hình chức năng BFD - 2 c0 2 21211211 12111211111 111102110111 01 2011111111108 1kg 18

Hình § Mô hình CSDL quan hệ - 2 22 212EE8EEEEEE12711211222127112711211112117112120 e6 19 Hin 9 8y 04 0n 22 Hình 10 Màn hình đăng nhập - 2 2s 2S2EE251222127112112221271127111111211 012112212 xx6 23 Hình 11 Màn hình đăng ký -2 52 2S S21 211221121127211121127112112121222221221222 212 xee 24

Hinh 12 Màn hình đăng ký thành công 0 20 221221112112 112 111221121111 11111 111 ray 25

Hình 13 Màn hình bài ViẾt 2-52 2 2 E12192511127151121111271111211211211212212212 2212 re 25 Hình 14 Nội dung bải VIẾt 2-5 5à TE921121111111 11 11212111211 1212121121111 rg 26 Hình 15 Màn hình liệt kê các loại sản phẩm - 2-5219 1E 5212111115221 te 26

Hinh 16 Màn hình phân chia trang 2 2c 122122211211 121 121111111111 221 12011 81111111182 re 27 Hình 17 Màn hình chỉ tiết sản phâm -2 522 S22 S192111187121121 1111112121121 2.11 tt 27

Hình 18 Màn hình liên hệ, 22-5222 9S E9192211211275127112112711112112711211212 222.1 xc6 28 Hình 19 Màn hình tìm kiếm sản phẩm 52-5 S998 1EE1871521221211115 21111122121 E ty, 28

Hinh 20 Màn hình g1ó hàng 00202121121 1121 111112211211 111110111111111 1111011 HH Hy 29

Hình 21 Màn hình đặt mua sản phẩm 5 5 2 E2 S21511E71211111211111111212112 2 yeu 29 Hình 22 Màn hình hóa đơn 52-52222192 12E1225122212711271711221121111112112112112112 c6 30

Hinh 23 Màn hình giao diện trang quản tFỊ : c2 2 222122211231 353 1511121221281 se 30

Hinh 24 Màn hình quản lý tài khoản - ác 1221 2111211212111211 1111121111 111 111181 1 kkr 31 Hình 25 Màn hình thêm sản phâm 52 1S E21 9E1251218115211151211211121211 111 11 x0 31 Hình 26 Màn hình thêm sản phâm thành công 52 1 2E EEE2E1 2127152212112 xe 32 Hình 27 Màn hình sửa sản phẩm 5 S1 1 1 18E111211211111212111122212212 xen 32 Hình 28 Màn hình sửa sản phẩm thành công 552 S2 SE 11182521 1121511 115121212 xe 33 Hình 29 Màn hình xóa sản phâm 2 2E E12187111211211111111 121111221121 1 ru 33

Hình 30 Màn hình xóa sản phâm thành công 2222 2 E22 2EE£EE2E22E£2225225222252 2x2 Hình 31 Màn hình thêm bài viết

Hinh 32 Màn hình quản lý đơn hang

12

DANH MUC CHU VIET TAT

UI User Interface Giao diện người dùng

UX User Interface Trải nehiệm người dùng

API Application Programming Giao diện lập trình ứng dụng

Interface JSX JavaScript XML Cú pháp mở rộng cho JavaScrIpt DOM Document ObJect Model Mô hình đối tượng tài liệu

ECMAScript SPA Single Page Application Ứng dụng một trang

loT Internet of Things Internet van vat

13

CHUONG 1: GIOI THIEU CHUNG VE DE TAI

1.1 Ly do chon dờ tai

Trong thời đại cừng nghệ thừng tin bỳng nỗ vỏ Internet trở thỏnh một phần khừng thở thiếu trong đời sống hỏng ngỏy, việc mua sắm trực tuyến đọ trở nởn phổ biến vỏ tiện lợi hơn bao giờ hết Điều nỏy đặc biệt dung trong lĩnh vực thời trang, nơi mả sự tiện lợi vỏ sự đa dạng của cõc lựa chọn trực tuyến đọ lỏm thay đổi cõch thức mua sắm truyền thống Giỏy dờp lỏ một phần quan trọng của thời trang vỏ việc xóy dựng một trang web bõn giỏy sẽ khừng chỉ đõp ứng nhu cầu mua sắm của người tiởu dỳng mả cún mang lai trai nghiđờm mua săm trực tuyến tốt hơn, nhanh chụng vỏ thuận tiện hơn

Ngoỏi ra, việc lựa chọn sử dụng cừng nghệ ReactIS để xóy dựng giao diện website cho phờp chỷng ta tạo ra một trang web thón thiện với người dỳng vỏ linh hoạt, đõp ứng được xu hướng vỏ yởu cầu ngỏy cảng cao của người dỳng ReactJS lỏ một cừng nghệ lập trớnh giao diện hỏng đầu, được cộng đồng lập trớnh viởn trởn toỏn thế giới ưa chuộng nhờ vỏo khả năng tối ưu hụa hiệu suất vỏ cung cấp một trải nghiệm người dỳng mượt mỏ

Chợnh vớ những lý do trởn, việc chọn đề tỏi xóy đựng website bõn giỏy lỏ một quyết định sõng suốt, phản õnh nhu cầu thực tế vỏ xu hướng tiởu dỳng hiện đại Đồng thời, việc nỏy cũng gụp phón thỷc đấy sự phõt triển của thương mại điện tử vỏ nóng cao chất lượng dịch vụ mua sắm trực tuyến

1.2 Mục tiởu nghiởn cứu

Mục tiởu nghiởn cứu của đề tỏi nỏy khừng chỉ nhăm phõt triờn mot website ban bõnh kẹo đõp ứng nhu cóu mua sắm trực tuyởn mỏ cún hướng đến việc tạo ra một trải nghiệm người dỳng đột phõt Cụ thể, cõc mục tiởu bao gồm như sau:

- Tối ưu hụa UI/UX: Phõt triển giao diện người dỳng thón thiện vỏ trực quan, ựiỷp việc

tớm kiởm sản phẩm vỏ mua sắm trở nởn dở dỏng vỏ thuận tiện

- Tương thợch đa nền tảng: Đảm bảo trang web hoạt động mượt mỏ trởn mọi nền tảng,

từ mõy tợnh đề bỏn đởn thiệt bị dị động

- Bảo mật thông tin: Áp dụng các biện pháp an ninh mạng tiên tiến để đảm bảo đữ liệu cá nhân và thông tin thanh toán của khách hàng

- Phân tích hành vị người dùng: Sử dụng đữ liệu lớn và AI để hiểu rõ hơn về xu hướng mua sắm, từ đó cung cap các sản pham va dich vu phủ hợp

- Nâng cao hiệu quả quản lý: Tích hợp hệ thống quản lý đơn hàng và kho hàng thông

minh, giúp cải thiện quy trình vận hành và giảm thiểu chi phi

- Phát triển chiến lược Marketing: Xây dựng chiến lược tiếp thị đa kênh, tận dụng SEO

và mạng xã hội để tăng cường sự nhận diện thương hiệu và thu hút khách hàng mới

1.3 Đối tượng nghiên cứu

Đôi tượng nghiên cứu của đề tài này không chỉ ở những người tiêu dùng mà còn bao sôm cả các nhóm đôi tượng khác nhau có liên quan đên quá trình mua bán, phan phối và tiêu thụ sản phẩm Sau đây là chỉ tiết các đối tượng nghiên cứu:

- Người tiêu dùng trực tuyến: Đây là nhóm chính mà website nhắm đến, bao gồm những người mua sắm trực tuyến thường xuyên và những người mới bắt đầu quen với viẹc mua hàng qua mạng Nghiên cứu sẽ tập trung vảo việc hiểu rõ hành vi, sở thích và kỳ vọng cua ho doi voi trang web va san pham banh kẹo

- Nhà cung cấp sản phẩm: Các công ty và doanh nghiệp sản xuất bánh kẹo là những đối tac quan trọng, cung cấp những sản phẩm cho website Việc nghiên cứu sẽ đánh giá cách thức hợp tác giữa nhà cung cấp và trang web, cũng như tìm hiểu về chất lượng va da dạng sản phâm mà họ cung cấp

- Chuyên gia marketinpg và quảng cáo: Những người làm trong lĩnh vực marketinp và quảng cáo sẽ giúp định hình chiến lược tiếp thị cho website Nghiên cứu sẽ xem xét cách họ tạo ra các chiến địch quảng cáo hấp dẫn và đo lường hiệu quả của chúng

- Nhà phat trién web va lap trình viên: Đây là những người sẽ xây dựng và duy trì trang web Nghiên cứu sẽ tập trung vảo việc lựa chọn công nghệ, thiết kế giao diện người dùng vả tính năng của website, cũng như cách họ giải quyết các vấn đề kỹ thuật

2

- Các nhà phân tích dữ liệu: Nhóm này sẽ phân tích đữ liệu từ website để hiểu rõ hơn

về hành vi của người dùng và hiệu suất của trang web Nghiên cứu sẽ khám phá cách

họ sử dụng đữ liệu để cải thiện trải nghiệm người dùng và tối ưu hóa hoạt động kinh doanh

- Các nhà nghiên cứu thị trường: Họ sẽ cung cấp thông tin về xu hướng thị trường và nhu cầu của người tiêu dùng Nghiên cứu sẽ khám phá cách thông tin này được sử dụng để hình thành chiến lược sản phẩm và tiếp thị

- Các nhà thiết kế UX/UI: Họ là những người tạo ra trải nghiệm người dùng và giao diện người dùng cho website Nghiên cứu sẽ đánh giá cách họ sử dụng nguyên lý thiết

ké dé tao ra mét trang web hap dan va dé str dung

- Các nhà bán lẻ và đại lý: Những người này sẽ sử dụng website như một kênh phân phối sản phâm của họ Nghiên cứu sẽ xem xét mối quan hệ giữa họ và trang web, cũng như cách họ quản lý hàng tồn kho và đơn đặt hàng

1.4 Phạm vi nghiên cứu

Phạm vị của nghiên cứu này được xác định để tập trung vào việc phát triển và quản lý một trang web bán bánh kẹo sử dụng công nphệ ReactJS Dưới đây là các khía cạnh chỉ tiết được bao gồm trong phạm vi nghiên cứu:

- Phát triển trên nền tang ReactJS: Tan dụng khả năng linh hoạt và hiệu suất cao của ReactJS để xây dựng giao diện người dùng (UI), tập trung vảo việc tạo ra các thành phần tái sử dụng, đáp ứng và tối ưu cho các thiết bị khác nhau

- Kiến trúc và Thiết kế Hệ thống: Nghiên cứu sẽ bắt đầu bằng việc xác định kiến trúc hệ thông tông quan, bao gồm cấu trúc dữ liệu, quản lý trạng thái ứng dụng, và thiết kế cơ sở

hạ tầng backend Việc này đảm bảo rằng website có thê mở rộng và bao tri dé dang

- Quản lý Trạng thái Ứng dụng: Áp dụng các công cụ và thư viện như Redux hoặc Context API dé quan ly trạng thái toàn cục, gitip việc truyền đữ liệu giữa các components trở nên đề dàng và hiệu quả

- Routing va Navigation: Tich hop React Router để quản lý việc chuyến đổi giữa các trang và các phần khác nhau của website, cung cấp trải nghiệm người dùng mượt mà và liên mạch

- Tương tác với API và Backend: Phát triển các service để tương tác với API, xử lý dữ

liệu từ server và tích hợp chúng vào UI, đảm bảo đữ liệu được cập nhật và đồng bộ hóa một cách chính xác

- Tương thích với Các Thư Viện và Framework Khác: Đánh siá khả năng tương thích và tích hợp với các thư viện và framework khac nhu Material-UI, Ant Design, hoặc Bootstrap dé tang cuong giao diện va trải nghiệm người dùng

- Bảo mật ứng dụng: Triển khai các biện pháp bảo mật như xác thực người dùng, mã hóa

dữ liệu và bảo vệ API dé ngăn chặn các mối đe dọa an ninh mạng và bảo vệ thông tin cá nhân của người dung

- Tích hợp với các dịch vụ bên ngoài: Nghiên cửu việc tích hợp với các dịch vụ bên ngoài như công thanh toán, dịch vụ vận chuyên, và các công cụ marketine đề mở rộng chức năng và tăng cường trải nghiệm người dùng

- Phản hồi người dùng và cải tiến liên tục: Thu thập và phân tích phản hồi từ người dùng

để cải tiến sản pham, bao gom ca viéc cap nhat UI/UX va thém cac tính năng mới theo nhu cau

- Phát triển Cộng đồng và Hỗ trợ: Xây dựng một cộng đồng cho người dùng và nhà phát triển, cung cấp tài liệu hướng dẫn, hỗ trợ kỹ thuật và tạo điều kiện cho việc chia sẻ kiến

thức và kinh nghiệm

1.5 Bố cục đề tài

Bồ cục đề tài bao gồm các nội dung chính sau đây:

- Chương 1: Giới thiệu chung về đề tài

1.1 Lý do chọn đề tài

1.2 Mục tiêu nghiên cứu

1.3 Đối tượng nghiên cứu

1.4 Phạm vi nghiên cứu

1.5 Bố cục đề tài

- Chương 2: Cơ sở lý thuyết

2.1 Giới thiệu đề tài

2.2 Cài đặt và cầu hình môi trường phát triển ReactJS

2.3 Cau trúc cơ bản của ứng dụng ReactJS và xử lý sự kiện trong ReactJS

2.4 Quản lý đữ liệu trong ReactJS

2.5 Forms va Routing trong ReactJS

CHUONG 2: CO SO LY THUYET

2.1 Giới thiệu ReactJS

ReactJS là một thư viện Javascript (Font-end) đang nổi lên trong những năm gần đây với xu hướng ứng dụng một trane (Sinple Page Application) 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àng phối hợp với những thư viện Javascript khác Nếu như AngularJS la m6t Framework cho phép nhung code javasscript trong code html thông qua các attribute như ng-model, ne-repeat thì với react là một library 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 vao trong JS Tich hop gitta javascript va HTML vao trong JSX lam cho cac component dé hiéu hon

React là một thư viện UI do Facebook phát triển, hiệu quả và linh hoạt cho việc xây dựng giao diện người dùng cho phép ta tạo ra những giao diện (UI) phức tap tr những đoạn code nhỏ và độc lập, những đoạn code này gọi là “Components” 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, va www.instagram.com duoc viet hoan toan trén React

Hinh 1 Gidi thiéu ReactJS

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 phia client, ma con được render trên server và có thể kết nối với nhau React so sánh

6

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 it thay đổi nhất trên DOM Trước khi đến cài đặt và cấu hình, ta sẽ đi đến một số khái niệm

cơ bản:

- Virtual DOM: Céng nghé DOM ảo giúp tăng hiệu năng cho ứng dụng Việc chi node số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 ciing sé phai thay déi một phân, điều này sẽ ảnh hưởng đến tốc độ xử lý React

JS sur dung 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 đữ 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

Virtual DOM Real DOM

Hinh 2 Giới thiệu Virtual DOM

- React sur dung co ché one-way data binding — luéng dif ligu 1 chiều Dữ liệu được truyền tir parent đến child thông qua props Luồng đữ liệu đơn giản giúp chúng ta dễ dàng kiêm soát cũng như sửa lỗi Với các đặc điểm ở trên, React dùng để xây dựng các ứng dụng lớn

mà đữ liệu của chúng thay đổi liên tục theo thời gian Dữ liệu thay đối thì hầu hết kèm theo sự thay đổi về giao diện Ví dụ như Facebook: trên Newsfeed của bạn cùng lúc sẽ có các status khác nhau và mỗi status lại có số like, share, comment liên tục thay đổi Khi đó React sẽ rất hữu ích để sử dụng

One-Way Data Binding

phát hiện ngay trong quá trình biên dịch Ngoải ra, nó cũng cung cấp tính năng gỡ lỗi khi

biên dịch rất tốt Easier: Dễ dàng hơn JSX kế thừa dựa trên Javascript, vi vay rat dé dang

dé cho các lập trình viên Javascripts có thể sử dụng

8

React sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái Mọi thứ React đều là component Chúng giúp bảo trì mã code khi làm việc với các dự án lớn Một

react component đơn giản chỉ cần một method render Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo

- Các bước cải đặt node như sau:

> Bước |: Mo trinh duyệt và nhập https:/nodeJs.org/en/

> Bước 2: Bấm đôi vào files vừa download để mở

> Bước 3: Cài đặt Http Web Server

> Bước 4: Để Start Server, ta mở cmd và gõ node-http-server để kiếm tra xem web server co start không ta mở trình duyệt và truy cap localhost:8080/pathname

- Các bước cải đặt ReactJS bao gồm:

> Bước I: cài đặt Node.Js và npm Truy cập duong link (https://nodejs.org/) để cài đặt Node khi cài đặt Node thì npm sẽ đi kèm theo với Node cho nên không

cân cải đặt riêng npm

> Bước 2: ta tao ra App React bang cu phap sau ‘npx create-react-app my-app’

trong đó my-app ta có thể đôi thành tên khác mà ta mong muốn sau khi tạo

thành công ta dùng cú pháp 'cd my-app* đề chỉ định folder

> Bước 3: sau khi hoàn thành bước 2 ta vào terminal hoặc nhập tô hợp phím “ctrl

+ shift + ` ” để vào terminal sau đó nhập 'npm start` để chạy chương trình

2.2.2 Cấu hình môi trường phát triển ReactJS

Dam bao cài đặt các tiện ích mở rộng cần thiết cho việc hỗ trợ phát triển ReactJS:

> ES7: Cung cấp các snippets code cho JavaScript và React/Redux, giúp viết code nhanh hơn và hiệu quả hơn

> VSCode React Refactor: Cung cấp các hành động refactor code JSX cho các

nhà phát triển React

> Prcttier— Code Fornmatter: Là một công cụ định dạng code theo ý kiến, giup duy trì phong cách code nhất quán bằng cách phân tích va in lai code với các quy tắc của riêng nó

> Eslint: Phân tích tĩnh code để tìm kiếm nhanh chóng các vẫn đề, giúp cải thiện chất lượng code và tuân thủ các quy tắc lập trình

> Bracket Pair Colorization Toggler: Té mau cap ngoac dé dé dang nhan biét và theo déi cae block code

> Auto Close Tag: Tự động thém thé dong HTML/XML, tuong ty nhu IDE của Visual Studio hoac Sublime Text

> Auto Import: Tự động tìm, phân tích và cung cấp các hành động code và hoàn thành code cho tất cả các import có sẵn

> npm Intellisense: Tự động hoàn thành các module npm trong các câu lệnh

> EditorConfñg for V§ Cod: Plugin này cổ gắng ghi đè các cải đặt người

dùng/workspace với các cài đặt tìm thấy trong các tệp editorconfig

2.3 Cấu trúc cơ bản của ứng dụng ReactJS và xử lý sự kiện trong ReactJS

2.3.1 Cấu trúc cơ bản của ứng dụng ReactJS

Cấu trúc cơ bản của ứng dụng ReactJS:

> Component: Là những khối xây đựng cơ bản của giao diện người dùng Mỗi component co thé chtra ma HTML, CSS va JavaScript dé hiển thị nội dung và

> Lif&ecycle methods: React cung cấp các phương thức vòng đời giúp thực hiện các hành động tương ứng khi một component được tạo ra, cập nhật, hoặc bị hủy

2.3.2 Xử lý sự kiện trong ReactJS

Xu ly sw kién trong ReactJS:

> Bat su kién: Bat cdc su kién nhu onClick, onChange, onSubmit trén cac phan

tử HTML bằng cách sử dụng các thudc tinh event handlers trong JSX

> Xử lý sự kiện: Khi một sự kiện xảy ra, React gọi một hàm xử lý sự kiện được chỉ định Hàm này có thể là một phương thức của component hoặc một hàm độc lập

> Truyền đữ liệu: Có thể truyền dữ liệu từ component con lên component cha thông qua các hàm xử lý sự kiện Thông qua props, đữ liệu có thê được truyền

tử component con lên component cha và cập nhật state của component cha

11

2.4 Quản lý dữ liệu trong ReactJS

Các cách phô biến đề quản lý đữ liệu trong ReactJS:

- State:

> State thường được sử dụng trong các thành phần (components) để lưu trữ trạng thái cục bộ của component Ví dụ, một thành phần form có thể sử dụng state để lưu trữ đữ liệu người dùng nhập vào các trường

>_ Đề sử dụng state trong các component class, sử đụng phương thức setState()

dé cập nhật giá trị của state Trong các component function, có thể sử dụng useState hook dé tao va quan ly state

> Nó là lựa chọn lý tưởng khi muốn chia sẻ đữ liệu global nhưng không muốn

truyền props qua nhiều cấp

- Redux:

> Redux la mét thu vién quan lý trạng thái phô biến trong ứng dụng React

> Redux giúp tạo ra một trạng thái ứng dụng toàn cục, mà các component có thé truy cập và cập nhật thông qua các hàm reducers

- Hooks:

> Hooks là một tính năng mới trong React cho phép sử dụng state và các tính năng React khác trong các thành phần không cần sử dụng lớp

> Sử dụng các hooks như useState, useEffect, useContext, dé quan ly trang thai

và các hiệu img trong component function

- GraphQL:

> GraphQL 1a mét ng6n nei truy van danh cho API cho phép truy vấn dữ liệu

cu thé ma can

> Trong React, có thể sử dụng các thư viện như Apollo Client để tương tác với

dữ liệu GraphQL một cách dễ đàng và linh hoạt

2.5 Forms va Routing trong ReactJS

2.5.1 Forms trong ReactJS

Form 1a mét phan tử HTML được sử dụng để thu thập dữ liệu từ người dùng Trong ReactJS, forms co thể được tạo và quản lý bằng cách sử dụng các component va state

> Controlled Components:

e Trong React, các input elements duoc diéu khién boi React component thay

vi DOM Khi mét ngwoi dung nhập ligu vao mét input element, ø1á trị của nó được lưu trữ trong state cua component va dugc diéu chinh boi React

¢ Khi state cua component thay di, gia tri cua cac input elements duge cap nhật theo và ngược lại

> Uncontrolled Components:

e Trong một số trường hợp, có thê muốn sử dung cac input elements khéng được điều khiến bởi React Trong trường hợp này, có thể sử dụng ref để truy cập giá trị của các input elements

® Uncontrolled components thường được sử dụng khi cần tích hợp với code không phải React hoặc khi cần tối ưu hiệu suất

2.5.2 Routing trong ReactJS

Routing la ky thuat quan ly cac trang khac nhau trong một ứng dụng web một trang (SPA) Nó cho phép người dùng di chuyến giữa các trang khác nhau mà không cần tai lai toan b6 trang web

¢ React Router cung cap cac thanh phan nhu <BrowserRouter>, <Route>, va

<Link> dé quan ly navigation va hién thị các trang của ứng dụng

2.6 ReactJS va MongoDB

MongoDB là một hệ quản trị cơ sở đữ liệu NoSQL mã nguồn mở đa nền tảng được viết bằng C++ Nó lưu trữ dữ liệu dưới dạng cac document (tai ligu), duoc tô chức theo cấu trúc JSON Mỗi document có thể chứa nhiều trường với các kiểu dữ liệu khác nhau, bao gôm số, chuối, boolean, mảng và thậm chí là các document long nhau

MongoDB khác với các cơ sở dữ liệu quan hệ truyền thống ở chỗ nó không sử dụng bảng và schema cô định Thay vào đó, nó cung cấp một mô hình dữ liệu linh hoạt hơn, cho phép bạn dễ dàng lưu trữ và truy vấn đữ liệu phức tạp

14

- Công dụng của MongpoDB:

> Lưu trữ đữ liệu phi cầu trúc: MongoDB rất phù hợp cho việc lưu trữ đữ liệu phi cầu trúc, chẳng hạn như nhật ký, dữ liệu cảm biến và dữ liệu mạng xã hội Tạo ứng dụng web hiện đại: MongoDB được sử dụng rộng rãi dé phát triển các ứng dụng web hiện đại, đặc biệt là các ứng dụng di động và ứng dụng một trang (SPA)

Lưu trữ đữ liệu thời gian thực: MongoDB có thể lưu trữ và truy vẫn đữ liệu thời gian thực hiệu quả, khiến nó trở thành lựa chọn lý tưởng cho các ứng dụng loT và phân tích đữ liệu lớn

Lưu trữ dữ liệu địa lý: MonpgoDB hỗ trợ đữ liệu địa lý, cho phép bạn lưu trữ và truy vấn đữ liệu có thông tin vị trí

- Ưu điểm của MongoDB:

> Linh hoat: MongoDB cung cap mot m6 hinh dtr ligu linh hoat, cho phép bạn dé dàng lưu trữ và truy vấn dữ liệu phức tạp

Có thể mở rộng: MongoDB có thể mở rộng theo chiều ngang, cho phép bạn

thêm nhiều máy chủ để đáp ứng nhu cầu lưu trữ và truy vấn đữ liệu ngày càng tăng

Dễ sử dụng: MongoDB có giao diện truy vấn đơn giản và dễ sử dụng, khiến nó

tro thành lựa chọn tốt cho cả người mới bắt đầu vả người dùng có kinh nghiệm

Hiệu suất cao: MoneoDB có hiệu suất cao, cho phép bạn truy vấn dữ liệu nhanh chóng và hiệu quả

Mã nguồn mở: MongoDB là mã nguồn mở, có nghĩa là bạn có thể sử dụng và

sửa đôi miên phí

- Nhược điểm của MongoDB:

> Không phủ hợp cho các ứng dụng quan hệ: MongoDB khéng phu hop cho các ứng dụng yêu cầu tính nhất quán dữ liệu cao và các mối quan hệ dữ liệu phức tạp