Nghiên cứu reactjs, nodejs và ứng dụng phát triển website học lập trình online (learn it)

HỌC VIỆN KỸ THUẬT MẬT MÃ

KHOA CÔNG NGHỆ THÔNG TIN

ĐỒ ÁN MÔN HỌC

THỰC TẬP CƠ SỞ

Đề tài:
NGHIÊN CỨU REACTJS, NODEJS VÀ

ỨNG DỤNG PHÁT TRIỂN WEBSITE HỌC LẬP
TRÌNH ONLINE (LEARN IT)

Giảng viên hướng dẫn : ThS. LÊ BÁ CƯỜNG
Sinh viên thực hiện : Nguyễn Văn Duy - CT030211

Đặng Thị Mai Lam - CT030130
Lê Thị Bích Hồng - CT030125
Nhóm 9

Hà Nội, 1-2022

LỜI CAM ĐOAN

Tôi là Nguyễn Văn Duy, mã số sinh viên CT030211, lớp CT3B. Người hướng dẫn
là ThS. Lê Bá Cường. Tơi xin cam đoan tồn bộ nội dung được trình bày trong đồ án
“Nghiên cứu ReactJS, NodeJS ứng dụng phát triển website học lập trình online” là kết
quả quá trình tìm hiểu và nghiên cứu của nhóm tơi. Các dữ liệu được nêu trong đồ án
là hoàn toàn trung thực, phản ánh đúng kết quả đo đạc thực tế. Mọi thơng tin trích dẫn
đều tn thủ các quy định về sở hữu trí tuệ; các tài liệu tham khảo được liệt kê rõ ràng.

Chúng tơi xin chịu hồn tồn trách nhiệm với những nội dung được viết trong đồ án
này.

Hà Nội, ngày 30 tháng 1 năm 2022
Người cam đoan

Nhóm thực hiện đề tài

MỤC LỤC

DANH MỤC HÌNH VẼ...........................................................................................................iii

DANH MỤC BẢNG BIỂU.......................................................................................................v

LỜI MỞ ĐẦU.........................................................................................................................vii

CHƯƠNG 1. CƠ SỞ LÝ THUYẾT.........................................................................................1

1.1 Tổng quan về Elearning.................................................................................................1
1.1.1 Sự phát triển của Elearning......................................................................................1
1.1.2 Đánh giá ưu nhược điểm của E-learning..................................................................2
1.1.3 Một số website học lập trình thịnh hành..................................................................4

1.2 Nghiên cứu về React JS..................................................................................................5
1.2.1 Giới thiệu về React JS..............................................................................................5
1.2.2 Một số khái niệm, kiến thức khi nghiên cứu React..................................................6
1.2.3 Cài đặt môi trường xây dựng website bằng React JS.............................................12
1.2.4 Kết luận..................................................................................................................14

1.3 Nghiên cứu về Node Js.................................................................................................15

1.3.1 Giới thiệu về Node Js.............................................................................................15
1.3.2 Các tính năng của Node Js.....................................................................................16
1.3.3 Ứng dụng của Node JS...........................................................................................17
1.3.4 Một số ưu, nhược điểm của NodeJS......................................................................17
1.3.5 Kết luận..................................................................................................................18

1.4 Giới thiệu MongoDb.....................................................................................................18
1.4.1 MongoDb là gì.......................................................................................................18
1.4.2 Ưu nhược điểm của MongoDb...............................................................................20
1.4.3 Lí do sử dụng MongoDb........................................................................................20

CHƯƠNG 2. KHẢO SÁT, PHÂN TÍCH THIẾT KẾ HỆ THỐNG...................................22

2.1 Khảo sát, phân tích bài tốn.........................................................................................22
2.1.1 Giới thiệu chung về hệ thống.................................................................................22
2.1.2 Khảo sát về một số website học lập trình...............................................................23
2.1.3 Tổng quan về hệ thống...........................................................................................26
2.1.4 Nguyên lý hoạt động của hệ thống.........................................................................26

2.2 Thiết kế các chức năng.................................................................................................27
2.2.1 Chức năng website học lập trình online – LEARN IT...........................................27

i

2.2.2 Chức năng trang quản trị viên................................................................................27
2.2.3 Phân quyền cho User..............................................................................................27

2.3 Sơ đồ khối chức năng...................................................................................................28

2.4 Biểu đồ phân rã chức năng ( WBS).............................................................................29

2.5 Biểu đồ UseCase và đặc tả............................................................................................31
2.5.1 Xác định Actor và UseCase....................................................................................31
2.5.2 Biểu đồ Usecase tổng quát.....................................................................................33
2.5.3 Biểu đồ UseCase chi tiết........................................................................................34
2.5.4 Đặc tả UseCase.......................................................................................................39

2.6 Thiết kế database...........................................................................................................55
2.6.1 Thiết kế cơ sở dữ liệu tổng quát.............................................................................55
2.6.2 Thiết kế cơ sở dữ liệu chi tiết.................................................................................56

2.7 Thiết kế giao diện..........................................................................................................59

CHƯƠNG 3. THỰC NGHIỆM.............................................................................................60

3.1 Lập trình xử lý chức năng............................................................................................60
3.1.1 Xử lý chức năng Đăng nhập...................................................................................60
3.1.2 Xử lý chức năng Thêm...........................................................................................60
3.1.3 Xử lý chức năng Sửa..............................................................................................61
3.1.4 Xử lý chức năng Xóa..............................................................................................62
3.1.5 Xử lý chức năng Thay đổi trạng thái người dùng..................................................62
3.1.6 Xử lý chức năng Bình luận.....................................................................................63

3.2 Lập trình xử lý Validate dữ liệu....................................................................................65

3.3 Triển khai......................................................................................................................66
3.3.1 Hệ thống giao diện cho người sử dụng..................................................................66
3.3.2 Đánh giá giao diện..................................................................................................72

3.4 Kiểm thử........................................................................................................................72

3.4.1 Công cụ dùng kiểm thử Jmeter...............................................................................72
3.4.2 Kết quả kiểm thử....................................................................................................73
3.4.3 Kết luận..................................................................................................................76

KẾT LUẬN..............................................................................................................................77

TÀI LIỆU THAM KHẢO......................................................................................................79

ii

DANH MỤC HÌNH VẼ

Hình 1. 1. React JS..........................................................................................................5
Hình 1. 2 . Ví dụ về một Component...............................................................................6
Hình 1. 3 Ví dụ Component lồng nhau............................................................................7
Hình 1. 4 Phương thức Props..........................................................................................8
Hình 1. 5 Pure Function..................................................................................................8
Hình 1. 6 Not-Pure Function...........................................................................................9
Hình 1. 7 Phương thức State...........................................................................................9
Hình 1. 8 Khởi tạo ReactJS App....................................................................................13
Hình 1. 9 Khởi chạy dự án ReactJS..............................................................................14
Hình 1. 10 Node JS........................................................................................................15
Hình 1. 11 MongoDB.....................................................................................................19

Hình 2. 1 Khảo sát website Codecademy......................................................................23
Hình 2. 2 Khảo sát website Udemy...............................................................................24
Hình 2. 3 Khảo sát website FreeCodeCamp.................................................................25
Hình 2. 4 Khảo sát website Github...............................................................................26
Hình 2. 5 Sơ đồ khối chức năng....................................................................................28
Hình 2. 6 Biểu đồ phân rã chức năng (WBS)................................................................30

Hình 2. 7 Biểu đồ Usecase tổng quát............................................................................33
Hình 2. 8 Biểu đồ UseCase quản lý khóa học của Admin và Mod................................34
Hình 2. 9 Biểu đồ UseCase quản lý khóa học của User và Khách...............................35
Hình 2. 10 Biểu đồ UseCase quản lý bài viết của Admin, Mod....................................36
Hình 2. 11 Biểu đồ UseCase quản lý bài viết của User, Khách....................................37
Hình 2. 12 Biểu đồ UseCase quản lý người dùng của Admin.......................................38
Hình 2. 13 Biểu đồ UseCase Tài khoản........................................................................38

Hình 3. 1 Code xử lý chức năng đăng nhập..................................................................60
Hình 3. 2 Code Xử lý chức năng Thêm........................................................................61
Hình 3. 3 Code Xử lý chức năng Sửa............................................................................62
Hình 3. 4 Code Xử lý chức năng Xóa............................................................................62
Hình 3. 5 Xử lý chức năng Thay đổi trạng thái người dùng.........................................63
Hình 3. 6 Code Xử lý chức năng Bình luận...................................................................65
Hình 3. 7 Code xử lý Validate dữ liệu...........................................................................65
Hình 3. 8 Giao diện trang chủ.......................................................................................66
Hình 3. 9 Giao diện trang lộ trình................................................................................67
Hình 3. 10 Giao diện trang khóa học............................................................................68
Hình 3. 11 Giao diện trang học tập...............................................................................69

iii

Hình 3. 12 Giao diện trang Blog...................................................................................69
Hình 3. 13 Giao diện trang Admin................................................................................70
Hình 3. 14 Giao diện phần thơng tin và bài giảng của quản lý khóa học...................70
Hình 3. 15 Giao diện thêm khóa học.............................................................................71
Hình 3. 16 Giao diện đăng nhập...................................................................................71
Hình 3. 17 Cơng cụ kiểm thử Jmeter.............................................................................72
Hình 3. 18 Kết quả kiểm thử hiệu năng trang Web.......................................................74

iv

DANH MỤC BẢNG BIỂU

Bảng 1. 1 So sánh Props và State..................................................................................10

Bảng 2. 1 Xác định Actor và UseCase..........................................................................31
Bảng 2. 2 Đặc tả Usecase Đăng Ký..............................................................................39
Bảng 2. 3 Đặc tả Usecase Đăng Nhập..........................................................................39
Bảng 2. 4 Đặc tả Usecase Đăng Xuất...........................................................................40
Bảng 2. 5 Đặc tả Usecase Đổi Mật Khẩu.....................................................................40
Bảng 2. 6 Đặc tả Usecase Lấy Lại Mật Khẩu...............................................................41
Bảng 2. 7 Đặc tả Usecase Xem Thông Tin Cá Nhân.....................................................42
Bảng 2. 8 Đặc tả Usecase Sửa Thông Tin Cá Nhân.....................................................42
Bảng 2. 9 Đặc tả Usecase Xem Khóa học.....................................................................43
Bảng 2. 10 Đặc tả Usecase Tìm Kiếm..........................................................................43
Bảng 2. 11 Đặc tả Usecase Thêm , sửa, xóa khóa học..................................................44
Bảng 2. 12 Đặc tả Usecase Thêm , sửa, xóa khóa học.................................................44
Bảng 2. 13 Đặc tả UseCase Xem danh sách, nội dung bài học....................................45
Bảng 2. 14 Đặc tả UseCase Thêm, Sửa , Xóa bài tập...................................................45
Bảng 2. 15 Đặc tả UseCAse Xem danh sách và giải bài tập........................................46
Bảng 2. 16 Đặc tả UseCase Đăng ký khóa học............................................................46
Bảng 2. 17 Đặc tả UseCase Active/inactive..................................................................47
Bảng 2. 18 Đặc tả UseCase Ủy quyền người dùng.......................................................47
Bảng 2. 19 Đặc tả UseCase Set quyền với khóa học....................................................48
Bảng 2. 20 Đặc tả UseCase Xem thông tin tất cả người dùng......................................48
Bảng 2. 21 Đặc tả Usecase Xem danh sách bài viết.....................................................48
Bảng 2. 22 Đặc tả Usecase Xem bài viết theo chủ đề...................................................49
Bảng 2. 23 Đặc tả Usecase tạo bài viết........................................................................49
Bảng 2. 24 Đặc tả Usecase xóa bài viết........................................................................50

Bảng 2. 25 Đặc tả Usecase chỉnh sửa bài viết..............................................................51
Bảng 2. 26 Đặc tả Usecase Lưu bài viết.......................................................................51
Bảng 2. 27 Đặc tả Usecase Xử lí bài viết bị báo cáo....................................................52
Bảng 2. 28 Đặc tả Usecase Xử lí bài viết bị báo cáo....................................................52
Bảng 2. 29 Đặc tả Usecase Duyệt bài viết....................................................................52
Bảng 2. 30 Đặc tả Usecase báo cáo bài viết.................................................................53
Bảng 2. 31 Đặc tả Usecase đọc bình luận....................................................................53
Bảng 2. 32 Đặc tả Usecase bình luận bài viết..............................................................54
Bảng 2. 33 Đặc tả Usecase xóa bình luận....................................................................54

v

Bảng 2. 34 Các bảng dữ liệu.........................................................................................55
Bảng 2. 35 Bảng User...................................................................................................55
Bảng 2. 36 Bảng Token..................................................................................................56
Bảng 2. 37 Bảng Báo Cáo (Report)..............................................................................56
Bảng 2. 38 Bảng Lộ Trình Học (Process Learning)......................................................56
Bảng 2. 39 Bảng bài học (Lesson)................................................................................57
Bảng 2. 40 Bảng Comment............................................................................................57
Bảng 2. 41 Bảng khóa học............................................................................................58
Bảng 2. 42 Bảng bài tập...............................................................................................58
Bảng 2. 43 Bảng Blog...................................................................................................58
Bảng 3. 1 Phân tích các thơng số thu được của trang web LEAN -IT..........................75

vi

LỜI MỞ ĐẦU

Ngày này, song song với sự phát triển của khoa học kĩ thuật, công nghệ thông
tin cũng phát triển và giữ vai trò quan trọng trong cuộc sống của chúng ta, ngành công

nghệ thông tin đã đạt được những kết quả cao, việc phát triển và ứng dụng cơng nghệ
đã có bước chuyển biến đáng kể. Tin học đã thâm nhập xâu trong tất cả các lĩnh vực
của xã hội và đặc biệt với nhiều ứng dụng to lớn trong các hệ thống quản lý của các
cơng ty, nhà trường, ngân hàng,… bởi tính năng nhanh gọn và chính xác.

Đặc biệt trong thời buổi dịch bệnh Covid -19 như hiện nay , các trường học
phải tạm dừng thay bằng đó chuyển sang hình thức học online. Sở dĩ nó được thịnh
hành hơn là do khả năng thích ứng nhanh cũng như thời gian , chi phí được tiết kiệm
một cách đáng kể.

Trong các Website học online thì website học lập trình đang được quan tâm
nhất hiện nay, rất nhiều những website học online nổi tiếng hồn tồn miễn phí cho tất
cả mọi người làm quen, tiếp thu và học hỏi những kiến thức quý báu của ngành lập
trình. Đồng thời tạo nên một cộng động giúp đỡ nhau trong học tập , làm việc của
ngành lập trình nói riêng và tồn thể các ngành nghề nói chung.

Từ những khảo sát và hiểu biết ban đầu, chúng em đã quyết định tìm hiểu đề tài
tìm hiểu Reac Js và Node Js nghiên cứu phát triển website học lập trình online . Với sự
hướng dẫn và chỉ bảo tận tình của thầy giáo ThS. Lê Bá Cường cùng với sự cố gắng
của cả nhóm, chúng em đã cố gắng hoàn thiện đề tài.

Chúng em xin chân thành cảm ơn thầy giáo đã giúp chúng em hoàn thiện đề tài
này.

vii

CHƯƠNG 1. CƠ SỞ LÝ THUYẾT

1.1 Tổng quan về Elearning

1.1.1 Sự phát triển của Elearning

Ngày nay, với sự bùng nổ thông tin, con người càng phải học tập nhiều môn khoa
học mới, với khối lượng thơng tin khổng lồ. Vai trị của người thầy cần phải thay đổi;
Thầy làm nhiệm vụ hướng dẫn, người học tự đi tìm và lĩnh hội tri thức. Như vậy người
dạy và người học phải biết sử dụng một số phương tiện khác để hỗ trợ. Trong đó sử
dụng cơng nghệ thông tin để thực hiện tất cả các nội dung, các thao tác của quá trình
dạy và học, sẽ giúp người thầy nâng cao khả năng sử dụng phương pháp mới, học trị
chủ động tìm tịi, phát huy sáng kiến trong học tập.

Trong những năm gần đây, cụm từ “e-learning” đã và đang trở nên gần gũi với tất
cả mọi người. E-learning là một phương thức học tập bằng truyền thông thông qua
mạng internet theo cách tương tác với nội dung học tập và được thiết kế trên nền tảng
phương pháp dạy học và được quản lý bởi các hệ thống quản lý học tập nhằm đảm bảo
sự tương tác, hợp tác đáp ứng nhu cầu học mọi lúc, mọi nơi của người học. Phương
pháp học tập này đáp ứng cho nhu cầu học tập, tích lũy kiến thức cho tất cả mọi người,
đồng thời sẽ đem lại nhưng lợi ích to lớn, tiết kiệm thời gian, công sức và tiền bạc,
đồng thời cũng nâng cao chất lượng truyền đạt và tiếp thu kiến thức cho các học viên.

Trong thời đại bùng nổ thông tin hiện nay, phương thức đào tạo theo phương pháp
đào tạo e-learning tạo ra rất nhiều ưu thế để phát triển: giảm chi phí, thời gian và công
sức học tập, giúp nâng cao hiệu quả tiếp thu kiến thức cho sinh viên trên cơ sở sử dụng
nền Web và các công cụ đa phương tiện truyền thông như hình ảnh, âm thanh, video,
…

Trong thời đại bùng nổ thông tin hiện nay, phương thức đào tạo theo phương pháp
đào tạo e-learning tạo ra rất nhiều ưu thế để phát triển: giảm chi phí, thời gian và công
sức học tập, giúp nâng cao hiệu quả tiếp thu kiến thức cho sinh viên trên cơ sở sử dụng
nền Web và các công cụ đa phương tiện truyền thơng như hình ảnh, âm thanh, video,
…

1

Có hai hình thức đào tạo e-learning là đào tạo trực tuyến (online learning) và đào
tạo hỗn hợp (blended learning). Trong đó đào tạo trực tuyến là hình thức đào tạo được
thực hiện tồn bộ trên mơi trường mạng thơng qua hệ thống quản lý đào tạo. Còn đào
tạo hỗn hợp là hình thức triển khai một khóa học với sự kết hợp của hai hình thức học
tập trực tuyến và học tập truyền thống. Theo cách này e-learning được thiết kế nhằm
mục đích hỗ trợ q trình dạy học. Với hệ thống bài giảng được thiết kế rõ ràng, có
tính định hướng để sinh viên dễ dàng xác định được các nội dung cần học, cộng với
việc tăng cường tính tương tác giữa giáo viên và sinh viên và giữa sinh viên với nhau.
Với đặc điểm này tạo cho phương pháp đào tạo hỗn hợp được sử dụng phổ biến trên
thế giới, kể cả tại các nước có nền giáo dục phát triển.

Phần lớn các hệ thống e-learning hiện nay đều xây dựng dưới dạng một ứng dụng
web hệ thống quản trị học tập (LMS – Learning Management System) bao gồm tập
hợp của rất nhiều các môđun chức năng khác nhau cho phép quản lý toàn bộ từ nội
dung giảng dạy đến quá trình đăng ký học, quá trình học tập hay quá trình đánh giá kết
quả học tập của từng sinh viên trong mỗi khóa học. Ngồi ra hệ thống cịn tích hợp các
dịch vụ cộng tác hỗ trợ q trình trao đổi thơng tin giữa giáo viên với sinh viên và các
sinh viên với nhau bao gồm các dịch vụ: giao nhiệm vụ tới người học, thảo luận, trao
đổi, gửi thư điện tử, lịch học,….

Một số LMS phổ biến hiện nay trên thế giới phải kể đến là: IBM, BlackBoard,
WebCT, Atutor, Itias, LRN, Moodle,…. Trong đó hệ thống quản lý học tập mã nguồn
mở Moodle đang được đánh giá rất cao và chiếm số lượng lớn người dùng trên thế
giới.

1.1.2 Đánh giá ưu nhược điểm của E-learning
Các ưu nhược điểm của hệ thống E-learning

 Ưu điểm:

E-learning có một số ưu điểm vượt trội so với loại hình thức đào tạo truyền
thống . Kết hợp cả ưu điểm tương tác giữa giáo viên với sinh viên của hình thức học
trên lớp lẫn sự linh hoạt trong việc tự xác định thời gian, khả năng tiếp thu kiến thức
của sinh viên.

Đối với nội dung học tập:

2

Hỗ trợ các “đối tượng học” theo yêu cầu, cá nhân hóa việc học. Nội dung học
tập được phân chia thành các đối tượng tri thức riêng biệt theo từng lĩnh vực, ngành
nghề rõ ràng. Điều này tạo ra tính mềm dẻo cao hơn, giúp cho sinh viên có thể chọn
lựa những khóa học phù hợp với nhu cầu học tập của mình. Sinh viên có thể truy cập
những đối tượng này qua các đường dẫn xác định trước, sau đó sẽ tự tạo cho mình
những kế hoạch học tập, thực hành, hay sử dụng các phương tiện tìm kiếm để tìm ra
các chủ đề theo yêu cầu.

Nội dung môn học được cập nhật, phân phối dễ dàng, nhanh chóng. Với nhịp
độ phát triển nhanh chóng của trình độ khoa học cơng nghệ, các chương trình đào tạo
cần được thay đổi, cập nhật thường xuyên để phù hợp với thông tin, kiến thức của từng
giai đoạn phát triển của thời đại. Với phương thức đào tạo truyền thống, muốn thay đổi
nội dung bài học thì các tài liệu phải được sao chép lại và phân bố lại cho tất cả sinh
viên, công việc này phải tốn rất nhiều thời gian, tiền bạc và công sức. Tuy nhiên đối
với E-learning, việc đó hồn tồn đơn giản vì để cập nhật nơi dung mơn học chỉ cần
sao chép các tập tin được cập nhật từ một máy tính cá nhân tới máy chủ. Tất cả sinh
viên sẽ có được phiên bản mới nhất trên máy tính trong lần truy cập sau. Hiệu quả tiếp
thu bài học của sinh viên sẽ được nâng lên vượt bậc vì sinh viên có thể học với những

giáo viên tốt nhất, tài liệu mới nhất cùng với giao diện web học tập đẹp mắt.

Đối với sinh viên:

Hệ thống E-learning hộ trợ học theo cá nhân, theo thời gian biểu tự lập nên sinh
viên có thể chọn phương pháp học thích hợp cho chính mình. Sinh viên có thể chủ
động thay đổi tốc độ học cho phù hợp với bản thân, giảm căng thẳng và tăng hiệu quả
học tập.

Đối với giáo viên:

Giáo viên có thể theo dõi sinh viên dễ dàng. E-learning cho phép dữ liệu được
tự động lưu lại trên máy chủ, thông tin này có thể được thay đổi về phía người truy cập
vào khóa học. Giáo viên có thể đánh giá sinh viên thông qua cách trả lời các câu hỏi
kiểm tra và thời gian trả lời các câu hỏi đó. Điều này giúp cho giáo viên đánh giá công
bằng lực học của mỗi sinh viên.

Đối với việc đào tạo chung:

3

E-learning giúp giảm chi phí học tập: Bằng việc sử dụng các giải pháp học tập
qua mạng, nhà trường có thể giảm được các chi phí học tập như tiền lương phải trả cho
giáo viên, tiền th phịng học, chi phí đi lại, ăn ở của sinh viên. Đối với những người
học theo hình thức này, giúp họ khơng mất nhiều thời gian, tiền bạc và công sức khi di
chuyển, đi lại và tổ chức lớp học,… góp phần tăng hiệu quả học tập.

Giáo viên và sinh viên có thể truy cập vào khóa học ở bất cứ chỗ nào, trong bất
kỳ thời điểm nào mà không nhất thiết phải trùng nhau. Điều này rất hữu ích cho nhà
trường trong việc đào tạo tại 3 cơ sở cách xa nhau như hiện nay.

Nhược điểm:

E-learning đang là một xu hướng phát triển ở rất nhiều nơi trên thế giới. Việc triển
khai hệ thống E-learning cần có những nỗ lực và chi phí lớn, mặt khác nó cũng có
những rủi ro nhất định. Bên cạnh những ưu điểm nổi bật như trên, E-learning cịn có
một số khuyết điểm mà ta không thể bỏ qua cần phải khắc phục sau đây:

Sinh viên cần phải có gắng nỗ lực hết mình khi tham gia khóa học để có kết quả
học tập tốt do việc môi trường học tập phân tán.

Giáo viên phải mất nhiều thời gian và công sức để soạn bài giảng, tài liệu giảng
dạy, tham khảo cho phù hợp với phương pháp học tập E-learning.

Các vấn đề khác về mặt công nghệ: cần phải được xem xét cơng nghệ hiện thời
có đáp ứng được các mục đích đào tạo hay khơng, chi phí đầu tư cho cơng nghệ đó có
hợp lý khơng. Ngồi ra, khả năng làm việc tương thích giữa các hệ thống phần cứng và
phần mềm cũng cần được xem xét.

1.1.3 Một số website học lập trình thịnh hành
Hiện nay khơng khó để ta tìm thấy những website học lập trình hồn tồn miễn phí

như:

 CODECADEMY
 UDEMY
 EDX
 COURSERA
 CODEWARS

4

 FREECODECAMP
 GITHUB…
Các website đều có những tính năng rất bổ ích cho việc học lập trình .
1.2 Nghiên cứu về React JS
1.2.1 Giới thiệu về React JS

React JS là 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. Trong khi những framework khác cố gắng
hướng đến một mơ hình MVC hồ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 javasscript trong code html thông qua các attribute như ng-
model, ng-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 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.

 Đặc tính của React JS Hình 1. 1. React JS
Tư tưởng React JS là xây dựng lên các components có tính tái sử dụng, dễ dàng
cho việc chia nhỏ vấn đề, testing. Nó giúp chúng ta dễ dàng quản lý, mở rộng hệ
thống, điều này nếu là Angular thì địi hỏi là cấu trúc, cách viết code phải thật tối ưu.
React JS luôn giữ các components ở trạng thái stateless (nhiều nhất có thể) khiến ta
dễ dàng quản lý bởi nó chẳng khác gì một trang static HTML. Bản than các
components này khơng có trạng thái (state) nó nhận đầu vào từ bên ngoài và chỉ hiển

5

thị ra dựa vào các đầu vào đó, điều này lý giải tại sao nó lại mang tính tái sử dụng
(reuse) và dễ dàng cho việc test.

 Thế mạnh của React JS
React JS là một framework hiển thị view chú ý đến hiệu năng (performance-
minded). Rất nhiều đối thủ nặng ký về framework MVVM mất một thời gian lớn để
hiển thị những lượng data lớn, như trong trường hợp những danh sách và tương tự.
Nhưng React thì khơng cịn vấn đề này, vì nó hiển thị những gì thay đổi.
Một trong những điểm mạnh nữa cảu React Js là vitual DOM – thứ nằm ẩn ben
trong mỗi view và là lý do khiến cho React đạt được hiệu năng tốt. Khi một view yêu
cầu gọi, tất cả mọi thứ sẽ được đưa vào trong một bản sao ảo của DOM ảo và DOM
thật, và thực hiện những thay đổi đơợc chỉ ra trong phép so sánh trên.
Ví dụ: nếu chúng ta đang xem một danh sách có 20 products được hiển thị bởi
React và chúng ta thay đổi product thứ 2, thì chỉ product đó được hiển thị lại , và 19
products cịn lại vẫn giữ nguyên ( không cần hiển thị lại hay reload trang). React đã
dùng cái gọi là “DOM ảo” – virtual DOM để tăng hiệu năng bằng cách xuất ra một
hiển thị ảo, sau đó kiểm tra sự khác biệt giữa hiển thị ảo, sau đó kiểm tra sự khác biệt
giữa hiển thị ảo và những gì có trên DOM và tạo a patch.
1.2.2 Một số khái niệm, kiến thức khi nghiên cứu React
1.2.2.1 Khái niệm
 Component
React xây dựng xung quanh các component, chứ không dùng template như các
framework khác. Ta có thể tạo ra một component bằng cách extend Component như
sau:

6

Hình 1. 2 . Ví dụ về một Component
Phương thức quan trọng nhất là render, phương thức này được trigger khi component
đã sẵn sàng để được render lên trên page.
Trong hàm đó, bạn sẽ trả về một mơ tả cho việc bạn muốn React render cái gì lên trên
page. Như ví dụ ở trên, đơn giản chúng ta muốn render 1 thẻ h1 chứa lời chào và tên.
Hàm render chính là mô tả cụ thể của UI tại bất cứ thời điểm nịa. Vì thế nếu dữ liệu

thay đổi , React sẽ take care việc update UI với dữ liệu tương ứng. Chúng ta có thể
hiểu đơn giản là khi dữ liệu thay đổi React sẽ tự động gọi hàm render để update lại UI.

 Multiple Components
Nếu muốn lồng nhiều component vào nhau, ta sẽ làm điều này trong lệnh return của
phương thức render.

Hình 1. 3 Ví dụ Component lồng nhau

7

 Props
Props ở đây chính là properties của một components, chúng ta có thể thay đổi props
của component bằng cách truyền dữ liệu từ bên ngoài vào. Props có thể là 1 object,
function, string, number,…

Hình 1. 4 Phương thức Props
Chú ý: Khi một props được truyền vào components thì nó là bất biến tức là dữ liệu cảu
nó khơng được thay đổi kiểu như một “pure” function.
Sau đây là một ví dụ về “pure” function và “not pure” function
Ta xét function như dưới:

8

Hình 1. 5 Pure Function
Function được gọi là “pure” vì nó khơng làm thay đổi giá trì đầu vào cảu nó và ln
trả về một kết quả tương tự cho cacs đầu vào như nhau.
Ta xét function thứ 2 như dưới:

Hình 1. 6 Not-Pure Function

Ở đây function trên đã thay đổi chính giá trị sum đầu vào cảu nó và điều này khiến nó
khơng là “pure” function

 Tất cả các component của react phải hoạt động như “pure” function
 State
Một component trong React có 2 cách để lấy thơng tin props và state. Không như
props, state của 1 component không được truyền từ bên ngoài vào. Một component sẽ
tự quyết định state của chính nó. Để tạo ra state cho component, ta sẽ phải khai báo nó
trong hàm constructor.

9

Hình 1. 7 Phương thức State
Sự giống và khác nhau giữa Props và State

Bảng 1. 1 So sánh Props và State

Props Sate

Có thể nhận giá trị ban đầu từ component cha Yes Yes
Có thể thay đổi component cha
Có thể set giá trị mặc định bên trong component Yes No
Có thể thay đổi bên trong component
Có thể set giá trị ban đầu cho các component con Yes Yes
Có thể thay đổi trong các component con
No Yes

Yes Yes

Yes No

1.2.2.2 Kiến thức
React JS là một framework đơn nhất nhưng để xây dựng được ứng dụng hoàn

chỉnh, chúng ta cần nhiều thứ hơn nữa. Đây là một số kiến thức cơ bản khi nghiên cứu
React:

10

 Javascript:

Ngôn ngữ xây dựng nên React, yêu cầu mức độ hiểu biết ở mức trung bình – khá
về các khái niệm như :object, prototype, callback.

 Npm:

Công cụ quản lý package của Node Js và là phương pháp phổ biến nhất để các lập
trình viên front-end cà các nhà thiết kế chia sẻ mã nguồn Javascript. Nó bao gồm một
hệ thống quản lý module gọi là CommonJS và cho phép chúng ta cài đặt bất cứ công
cụ command-line nào được viết bằng Javascript.

Hầu hết các components, thư viện và công cụ tái sử dụng trong hệ sinh thái React
đều được triển khai như là thành module CommonJs và có thể cài đặt thông qua npm.

 JavaScript “bundlers”

Hay còn được gọi là các cơng cụ đóng gói JavaScript. Vì một vài lí do kĩ thuật mà
module CommonJs không thể sử dụng native trên trình duyệt thì chúng ta cần một “
cơng cụ đóng gói” JavaScript để “đóng gói” các modules này thành các file.js mà có
thể include trê trang web thơng qua thẻ<script>.

 Routing

Các ứng dụng single – page trở nên khá rầm rộ ngày nay. Đây là những trang web
mà chỉ thực hiện khởi tạo một lần và khi người dùng ấn vào một đường dẫn hay nút ấn
thì JavaScipt trên trang web sẽ thực thi mà trang web không cần phải reload lại. Việc
quản lý địa chỉ trên thanh địa chỉ được thực hiện bởi router.

Router được sử dụng phổ biến nhất trong hệ sinh thái React là react-router. Nếu
như ta đang xây dựng một ứng dụng single-page thì hãy sử dụng nó trừ lý do khơng
thể sử dụng.

 Server Rendering

Sever rendering thường được gọi là “toàn bộ” hay “đồng bộ” JS. Điều đó có nghĩa
là chúng ta có thể lấy bất cứ React components nào và render chúng thành HTMl tĩnh
trên server. Điều này cải thiện được tốc độ ban đầu vì người dùng khơng cần phải chờ

11