(Đồ án hcmute) website chia sẻ kiến thức học tập sử dụng reactjs và asp net core

TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Trong thời đại công nghệ hiện nay, giáo dục ngày càng bị chi phối bởi các nền tảng trực tuyến, nơi sinh viên và mọi người có thể dễ dàng trao đổi và chia sẻ kiến thức Dự án phát triển website chia sẻ kiến thức học tập ra đời nhằm tạo ra một môi trường thuận lợi cho sinh viên tìm kiếm và thảo luận về kiến thức, từ đó giúp họ tìm ra giải pháp tối ưu Ngoài ra, website cũng cung cấp tài liệu học tập và đề thi cho các môn học, đáp ứng nhu cầu ôn tập của sinh viên một cách hiệu quả.

MỤC TIÊU CỦA ĐỀ TÀI

Người dùng có thể xây dựng một website chia sẻ kiến thức học tập, với các tính năng cơ bản như đặt câu hỏi, tham gia thảo luận, tìm kiếm tài liệu, đề thi và các hỗ trợ khác, nhằm nâng cao trải nghiệm học tập.

Quản trị xây dựng đóng vai trò quan trọng trong việc theo dõi và quản lý tài nguyên cũng như dữ liệu của hệ thống, bao gồm thống kê, quản lý tài khoản, xử lý vi phạm, quản lý môn học và quản lý tài liệu đề thi.

Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN

Mục đích của đề tài là tạo ra một môi trường thuận lợi cho sinh viên trong việc trao đổi và tìm kiếm thông tin, tài liệu, từ đó nâng cao kiến thức và khả năng tự học Đồng thời, đây cũng là công cụ giúp nhà trường quản lý và đánh giá chất lượng học tập của sinh viên, góp phần cải thiện chất lượng đầu ra cho nhà trường.

CƠ SỞ LÝ THUYẾT

SQL SERVER

2 Chương 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU

2.3 Mô hình hóa yêu cầu

3 Chương 3: THIẾT KẾ PHẦN MỀM

3.3 Thiết kế cơ sở dữ liệu

4 Chương 4: CÀI ĐẶT VÀ KIỂM THỬ

4.1 Công cụ dùng trong dự án

STT Thời gian Công việc Ghi chú

- Thiết kế usecase và mô hình hóa yêu cầu

- Thiết kế cơ sở dữ liệu

- Tìm hiểu về thư viện ReactJS

- Tìm hiểu về ASP.NET Core

- Tìm hiểu về JSON Web Token để ứng dụng vào xác thực và phân quyền API của hệ thống

- Tìm hiểu về SQL Server để áp dụng vào lưu trữ dữ liệu

- Tiến hành phát triển API dựa trên các kiến thức đã tìm hiểu được và các tài liệu

- Tiến hành xây dựng giao diện người dùng cho hệ thống

5 09/05/2022 – 09/06/2022 Kết hợp các phần đã xây dựng lại với nhau

(giao diện, API, cơ sở dữ liệu)

6 09/06/2022 – 20/06/2022 Kiểm thử chương trình và tiến hành sửa lỗi

7 21/06/2022 – 05/07/2022 Viết và hoàn thiện báo cáo Ý kiến của giảng viên hướng dẫn

(Ký và ghi rõ họ tên)

Người viết đề cương (Ký và ghi rõ họ tên)

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1

4 MỤC TIÊU CỦA ĐỀ TÀI 2

5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 3

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

1.1.2 Một số khái niệm liên quan đến React JS 4

1.2.1 Sơ lược về ngôn ngữ C# 7

1.2.2 Đặc trưng của ngôn ngữ C# 7

1.3.2 ASP.NET Core là gì? 9

1.3.3 Sơ lược về lịch sử ASP.NET Core 10

1.3.4 Ưu điểm của ASP.NET Core 10

1.3.5 Nhược điểm của ASP.NET Core 11

1.4.2 Mục đích sử dụng SQL Server 12

1.4.3 Ưu điểm của SQL Server 12

1.4.4 Nhược điểm của SQL Server 12

CHƯƠNG 2 KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 13

2.1.5 Forum chia sẻ tài liệu hóa học 16

2.2.2 Yêu cầu phi chức năng 20

2.3 MÔ HÌNH HÓA YÊU CẦU 20

2.3.2 Mô hình hóa yêu cầu 22

CHƯƠNG 3 THIẾT KẾ PHẦN MỀM 52

3.3 THIẾT KẾ CƠ SỞ DỮ LIỆU 78

3.3.1 Lược đồ cơ sở dữ liệu 78

3.3.2 Chi tiết bảng dữ liệu 79

3.4.1 Giao diện chính phía khách và thành viên 82

3.4.2 Giao diện chính phía quản trị viên 89

CHƯƠNG 4 CÀI ĐẶT VÀ KIỂM THỬ 98

4.1 CÔNG CỤ DÙNG TRONG DỰ ÁN 98

4.3.2 Quy trình thiết kế kiểm thử 100

4.3.3 Quy trình thực hiện kiểm thử 100

1.1 Kiến thức tìm hiểu được 104

1.2 Dự án đã làm được 104

Hình 1.1: Component trong React JS 5

Hình 1.2: Cú pháp props trong Class Component và Function Component 6

Hình 2.1: Khảo sát hiện trạng trang StackOverFlow (1) 13

Hình 2.3: Khảo sát hiện trạng trang QA Stack 14

Hình 2.4: Khảo sát hiện trạng trang Chân trời tin học 15

Hình 2.5: Khảo sát hiện trạng trang Php BB 16

Hình 2.6: Khảo sát hiện trạng trang Forum chia sẻ tài liệu hóa 16

Hình 2.7: Khảo sát hiện trạng trang Forum học mãi 17

Hình 2.8: Khảo sát hiện trạng trang Forum đề thi Việt 18

Hình 2.9: Lược đồ Usecase phía khách và thành viên 21

Hình 2.10: Lược đồ Usecase phía quản trị viên 22

Hình 3.2: Lược đồ tuần tự chức năng “Đăng nhập” 53

Hình 3.3: Lược đồ tuần tự chức năng “Đăng ký” 54

Hình 3.4: Lược đồ tuần tự chức năng “Xem tài liệu” 54

Hình 3.5: Lược đồ tuần tự chức năng “Xem đề thi” 55

Hình 3.6: Lược đồ tuần tự chức năng “Xem thảo luận” 55

Hình 3.7: Lược đồ tuần tự chức năng “Lấy lại tài khoản” 56

Hình 3.8: Lược đồ tuần tự chức năng “Xem trang cá nhân thành viên” 56

Hình 3.9: Lược đồ tuần tự chức năng “Chỉnh sửa thông tin cá nhân” 57

Hình 3.10: Lược đồ tuần tự chức năng “Tìm kiếm thành viên” 57

Hình 3.11: Lược đồ tuần tự chức năng “Tìm kiếm câu hỏi thảo luận” 58

Hình 3.12: Lược đồ tuần tự chức năng “Đổi mật khẩu” 58

Hình 3.13: Lược đồ tuần tự chức năng “Thêm câu hỏi thảo luận” 59

Hình 3.14: Lược đồ tuần tự chức năng “Chỉnh sửa câu hỏi thảo luận” 59

Hình 3.15: Lược đồ tuần tự chức năng “Xóa câu hỏi thảo luận” 60

Hình 3.16: Lược đồ tuần tự chức năng “Xác nhận câu trả lời chính xác nhất” 60

Hình 3.17: Lược đồ tuần tự chức năng “Theo dõi câu hỏi thảo luận” 61

Hình 3.18: Lược đồ tuần tự chức năng “Hủy theo dõi câu hỏi thảo luận” 61

Hình 3.19: Lược đồ tuần tự chức năng “Thêm câu trả lời thảo luận” 62

Hình 3.20: Lược đồ tuần tự chức năng “Chỉnh sửa câu trả lời” 62

Hình 3.21: Lược đồ tuần tự chức năng “Xóa câu trả lời” 63

Hình 3.22: Lược đồ tuần tự chức năng “Báo cáo câu hỏi vi phạm” 64

Hình 3.23: Lược đồ tuần tự chức năng “Báo cáo câu trả lời vi phạm” 64

Hình 3.24: Lược đồ tuần tự chức năng “Thêm môn học” 64

Hình 3.25: Lược đồ tuần tự chức năng “Sửa môn học” 65

Hình 3.26: Lược đồ tuần tự chức năng “Xóa môn học” 65

Hình 3.27: Lược đồ tuần tự chức năng “Thêm tài liệu” 66

Hình 3.28: Lược đồ tuần tự chức năng “Sửa tài liệu” 67

Hình 3.29: Lược đồ tuần tự chức năng “Xóa tài liệu” 67

Hình 3.30: Lược đồ tuần tự chức năng “Thêm đề thi” 68

Hình 3.31: Lược đồ tuần tự chức năng “Sửa đề thi” 68

Hình 3.32: Lược đồ tuần tự chức năng “Xóa đề thi” 69

Hình 3.33: Lược đồ tuần tự chức năng “Thêm tài khoản” 69

Hình 3.34: Lược đồ tuần tự chức năng “Sửa thông tin tài khoản” 70

Hình 3.35: Lược đồ tuần tự chức năng “Xử lý tài khoản” 70

Hình 3.37: Lược đồ tuần tự chức năng “Sửa câu hỏi thảo luận” 71

Hình 3.39: Lược đồ tuần tự chức năng “Thêm loại vi phạm câu trả lời” 72

Hình 3.40: Lược đồ tuần tự chức năng “Sửa loại vi phạm câu trả lời” 73

Hình 3.41: Lược đồ tuần tự chức năng “Xóa loại vi phạm câu trả lời” 73

Hình 3.42: Lược đồ tuần tự chức năng “Thêm loại vi phạm câu hỏi” 74

Hình 3.43: Lược đồ tuần tự chức năng “Sửa loại vi phạm câu hỏi” 74

Hình 3.44: Lược đồ tuần tự chức năng “Xóa loại vi phạm câu hỏi” 75

Hình 3.45: Lược đồ tuần tự chức năng “Xử lý câu hỏi vi phạm” 75

Hình 3.46: Lược đồ tuần tự chức năng “Xử lý câu trả lời vi phạm” 76

Hình 3.47: Lược đồ tuần tự chức năng “Thống kê danh sách môn học” 76

Hình 3.48: Lược đồ tuần tự chức năng “Thống kê tài khoản đăng ký mới” 77

Hình 3.49: Lược đồ tuần tự chức năng “Bình chọn câu trả lời” 77

Hình 3.50: Lược đồ tuần tự chức năng “Phản hồi câu trả lời” 78

Hình 3.51: Lược đồ cơ sở dữ liệu 79

Hình 3.52: Giao diện Trang đăng ký 82

Hình 3.53: Giao diện Trang đăng nhập 83

Hình 3.54: Giao diện Trang khôi phục tài khoản 84

Hình 3.55: Giao diện Trang chủ 84

Hình 3.56: Giao diện Trang thảo luận 85

Hình 3.57: Giao diện Trang chi tiết thảo luận 86

Hình 3.58: Giao diện Trang danh sách môn học 87

Hình 3.59: Giao diện Trang tài liệu, đề thi 88

Hình 3.60: Giao diện Trang tạo câu hỏi thảo luận 88

Hình 3.61: Giao diện Trang cá nhân 89

Hình 3.62: Giao diện Trang dashboard 90

Hình 3.63: Giao diện Trang quản lý tài khoản 91

Hình 3.64: Giao diện Trang quản lý môn học 92

Hình 3.65: Giao diện Trang quản lý tài liệu 93

Hình 3.66: Giao diện Trang quản lý đề thi 94

Hình 3.67: Giao diện Trang quản lý câu hỏi 95

Hình 3.68: Giao diện Trang quản lý loại vi phạm 96

Hình 3.69: Giao diện Trang quản lý vi phạm 97

Hình 4.1: Đăng nhập tài khoản trong SQL Server 99

Bảng 1.1: Bảng so sánh giữa Props và State 7

Bảng 1.2: Sự khác nhau quan trọng giữa ASP.NET với ASP.NET Core 11

Bảng 2.1: Mô hình hóa Usecase “Đăng nhập” 22

Bảng 2.2: Mô hình hóa Usecase “Đăng ký” 23

Bảng 2.3: Mô hình hóa Usecase “Xem tài liệu” 24

Bảng 2.4: Mô hình hóa Usecase “Xem đề thi” 24

Bảng 2.5: Mô hình hóa Usecase “Xem thảo luận” 25

Bảng 2.6: Mô hình hóa Usecase “Lấy lại tài khoản” 25

Bảng 2.7: Mô hình hóa Usecase “Xem trang cá nhân thành viên” 26

Bảng 2.8: Mô hình hóa Usecase “Chỉnh sửa thông tin cá nhân” 26

Bảng 2.9: Mô hình hóa Usecase “Tìm kiếm thành viên” 27

Bảng 2.10: Mô hình hóa Usecase “Tìm kiếm câu hỏi thảo luận” 27

Bảng 2.11: Mô hình hóa Usecase “Đổi mật khẩu” 28

Bảng 2.12: Mô hình hóa Usecase “Thêm câu hỏi thảo luận” 28

Bảng 2.13: Mô hình hóa Usecase “Chỉnh sửa câu hỏi thảo luận” 29

Bảng 2.14: Mô hình hóa Usecase “Xóa câu hỏi thảo luận” 29

Bảng 2.15: Mô hình hóa Usecase “Xác nhận câu trả lời chính xác nhất” 30

Bảng 2.16: Mô hình hóa Usecase “Theo dõi câu hỏi thảo luận” 31

Bảng 2.17: Mô hình hóa Usecase “Hủy theo dõi câu hỏi thảo luận” 31

Bảng 2.18: Mô hình hóa Usecase “Thêm câu trả lời thảo luận” 32

Bảng 2.19: Mô hình hóa Usecase “Chỉnh sửa câu trả lời” 32

Bảng 2.20: Mô hình hóa Usecase “Xóa câu trả lời” 33

Bảng 2.21: Mô hình hóa Usecase “Báo cáo câu hỏi vi phạm” 34

Bảng 2.22: Mô hình hóa Usecase “Báo cáo câu trả lời vi phạm” 34

Bảng 2.23: Mô hình hóa Usecase “Bình chọn câu trả lời” 35

Bảng 2.24: Mô hình hóa Usecase “Phản hồi câu trả lời” 36

Bảng 2.25: Mô hình hóa Usecase “Thêm môn học” 36

Bảng 2.26: Mô hình hóa Usecase “Sửa môn học” 37

Bảng 2.27: Mô hình hóa Usecase “Xóa môn học” 38

Bảng 2.28: Mô hình hóa Usecase “Thêm tài liệu” 38

Bảng 2.29: Mô hình hóa Usecase “Sửa tài liệu” 39

Bảng 2.30: Mô hình hóa Usecase “Xóa tài liệu” 39

Bảng 2.31: Mô hình hóa Usecase “Thêm đề thi” 40

Bảng 2.32: Mô hình hóa Usecase “Sửa đề thi” 41

Bảng 2.33: Mô hình hóa Usecase “Xóa đề thi” 41

Bảng 2.34: Mô hình hóa Usecase “Thêm tài khoản” 42

Bảng 2.35: Mô hình hóa Usecase “Sửa thông tin tài khoản” 43

Bảng 2.36: Mô hình hóa Usecase “Xử lý tài khoản” 43

Bảng 2.38: Mô hình hóa Usecase “Sửa câu hỏi thảo luận” 45

Bảng 2.40: Mô hình hóa Usecase “Thêm loại vi phạm câu trả lời” 46

Bảng 2.41: Mô hình hóa Usecase “Sửa loại vi phạm câu trả lời” 46

Bảng 2.42: Mô hình hóa Usecase “Xóa loại vi phạm câu trả lời 47

Bảng 2.43: Mô hình hóa Usecase “Thêm loại vi phạm câu hỏi” 48

Bảng 2.44: Mô hình hóa Usecase “Sửa loại vi phạm câu hỏi” 49

Bảng 2.45: Mô hình hóa Usecase “Xóa loại vi phạm câu hỏi” 49

Bảng 2.46: Mô hình hóa Usecase “Xử lý câu hỏi vi phạm” 50

Bảng 2.47: Mô hình hóa Usecase “Xử lý câu trả lời vi phạm” 51

Bảng 2.48: Mô hình hóa Usecase “Thống kê danh sách môn học” 51

Bảng 2.49: Mô hình hóa Usecase “Thống kê tài khoản đăng ký mới” 52

Bảng 3.1: Chi tiết dữ liệu bảng Question 79

Bảng 3.2: Chi tiết dữ liệu bảng Subject 79

Bảng 3.3: Chi tiết dữ liệu bảng ReferenceDoc 80

Bảng 3.4: Chi tiết dữ liệu bảng FollowQuestion 80

Bảng 3.5: Chi tiết dữ liệu bảng Answer 80

Bảng 3.6: Chi tiết dữ liệu bảng File 80

Bảng 3.7: Chi tiết dữ liệu bảng Status 80

Bảng 3.8: Chi tiết dữ liệu bảng AnswerReport 80

Bảng 3.9: Chi tiết dữ liệu bảng User 81

Bảng 3.10: Chi tiết dữ liệu bảng QuestionReport 81

Bảng 3.11: Chi tiết dữ liệu bảng QuestionReportType 81

Bảng 3.12: Chi tiết dữ liệu bảng Account 81

Bảng 3.13: Chi tiết dữ liệu bảng Role 81

Bảng 3.14: Chi tiết dữ liệu bảng AnswerReportType 82

Bảng 3.15: Chi tiết dữ liệu bảng AnswerVote 82

Bảng 3.16: Mô tả giao diện Trang đăng ký 82

Bảng 3.17: Mô tả giao diện Trang đăng nhập 83

Bảng 3.18: Mô tả giao diện Trang khôi phục tài khoản 84

Bảng 3.19: Mô tả giao diện Trang chủ 85

Bảng 3.20: Mô tả giao diện Trang thảo luận 85

Bảng 3.21: Mô tả giao diện Trang chi tiết thảo luận 86

Bảng 3.22: Mô tả giao diện Trang danh sách môn học 87

Bảng 3.23: Mô tả giao diện Trang tài liệu, đề thi 88

Bảng 3.24: Mô tả giao diện Trang tạo câu hỏi thảo luận 88

Bảng 3.25: Mô tả giao diện Trang cá nhân 89

Bảng 3.26: Mô tả giao diện Trang dashboard 90

Bảng 3.27: Mô tả giao diện Trang quản lý tài khoản 91

Bảng 3.28: Mô tả giao diện Trang quản lý môn học 92

Bảng 3.29: Mô tả giao diện Trang quản lý tài liệu 93

Bảng 3.30: Mô tả giao diện Trang quản lý đề thi 94

Bảng 3.31: Mô tả giao diện Trang quản lý câu hỏi 95

Bảng 3.32: Mô tả giao diện Trang quản lý loại vi phạm 96

Bảng 3.33: Mô tả giao diện Trang quản lý vi phạm 97

Bảng 4.1: Kết quả kiểm thử các chức năng chính 101

DANH MỤC TỪ VIẾT TẮT

STT Ký hiệu chữ viết tắt Chữ viết đầy đủ

2 HTML Hyper Text Markup Language

4 HTTP Hyper Text Transfer Protocol

14 SSAS SQL Server Analysis Services

15 SSRS SQL Server Reporting Services

17 SSIS SQL Server Integration Services

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Trong thời đại công nghệ hiện nay, giáo dục cũng bị ảnh hưởng mạnh mẽ, với việc trao đổi và chia sẻ kiến thức trực tuyến trở thành nhu cầu thiết yếu của sinh viên và mọi người Để đáp ứng nhu cầu này, dự án phát triển website chia sẻ kiến thức học tập đã ra đời, tạo ra môi trường cho sinh viên tìm kiếm và thảo luận về kiến thức thông qua việc đặt câu hỏi Ngoài ra, website còn cung cấp tài liệu học tập và đề thi, giúp sinh viên dễ dàng ôn tập và nâng cao hiệu quả học tập.

2 ĐỐI TƯỢNG NGHIÊN CỨU Đối với đề tài “Website chia sẻ kiến thức học tập sử dụng React JS và ASP.NET Core”, đối tượng nghiên cứu dựa trên những nhu cầu tìm kiếm của người dùng về hướng giải quyết của một câu hỏi cụ thể trong lúc học tập cũng như các câu hỏi thường gặp của một môn học cụ thể, tạo ra một môi trường lành mạnh để mọi người cùng nhau thảo luận, góp ý, tìm ra câu trả lời, hướng giải quyết cho những câu hỏi mà người dùng gặp phải

Đề tài này không chỉ cung cấp tài liệu và đề thi theo nhu cầu tìm kiếm của sinh viên mà còn giới thiệu các công nghệ áp dụng trong quá trình tạo ra sản phẩm.

- Áp dụng cơ sở dữ liệu SQL Server để lưu trữ dữ liệu, thông tin người dùng

- Nghiên cứu APIs xây dựng nên hệ thống các APIs hỗ trợ lấy dữ liệu một cách chính xác và nhanh chóng

Nghiên cứu và áp dụng React JS cùng với các thư viện hỗ trợ giúp xây dựng và quản lý giao diện người dùng hiệu quả cho hệ thống quản trị.

- Về bảo mật hệ thống, sử dụng Json Web Token để xác thực tài khoản đăng nhập

3 PHẠM VI NGHIÊN CỨU Đề tài “Website chia sẻ kiến thức học tập sử dụng React JS và ASP.NET Core” chủ yếu tập trung khai thác vào việc đặt câu hỏi, tham gia thảo luận những vấn đề thắc mắc về các môn học và là nơi để tìm kiếm các tài liệu, đề thi cho bạn sinh viên trong trường Website được chia thành 2 phần là phần Quản trị và phần Người dùng Trong phần Quản trị bao gồm các nghiệp vụ chính như:

- Quản lý câu hỏi, câu trả lời

- Quản lý loại vi phạm

Trong phần Người dùng bao gồm các nghiệp vụ chính như:

- Đăng ký/ Đăng nhập/ Quên mật khẩu/ Đổi mật khẩu

- Tạo / Chỉnh sửa / Xóa câu hỏi thảo luận

- Tham gia thảo luận, theo dõi câu hỏi, bình chọn câu trả lời, phản hồi câu trả lời

- Tìm kiếm người dùng, câu hỏi, tài liệu, đề thi

Về phần cốt lõi xử lý, xây dựng đầy đủ các APIs phục vụ cho phần hiển thị cuối cùng

4 MỤC TIÊU CỦA ĐỀ TÀI

Người dùng có thể xây dựng một website chia sẻ kiến thức học tập, tích hợp các tính năng như đặt câu hỏi, tham gia thảo luận, tìm kiếm tài liệu và đề thi, cùng với nhiều hỗ trợ khác nhằm nâng cao trải nghiệm học tập.

Quản trị xây dựng đóng vai trò quan trọng trong việc quản lý và theo dõi các tài nguyên cũng như dữ liệu của hệ thống, bao gồm thống kê, quản lý tài khoản, xử lý vi phạm, quản lý môn học và quản lý tài liệu đề thi.

5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN

Mục tiêu của đề tài là xây dựng một môi trường thuận lợi cho sinh viên trong việc trao đổi và tìm kiếm thông tin, tài liệu, từ đó nâng cao kiến thức và khả năng tự học Đồng thời, đây cũng là công cụ giúp nhà trường quản lý và đánh giá chất lượng học tập của sinh viên, góp phần cải thiện chất lượng đầu ra của trường.

PHẦN NỘI DUNG CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 1.1 REACT JS

React JS là một thư viện JavaScript mã nguồn mở do Facebook phát triển, ra mắt vào năm 2013, cho phép xây dựng giao diện người dùng (UI) từ các thành phần nhỏ gọi là “components” Thư viện này hiện đang rất phổ biến, giúp lập trình viên xây dựng UI một cách hiệu quả và linh hoạt.

Trong React, việc tạo ra các component độc lập giúp tái sử dụng chúng trong dự án, từ đó kết hợp các component lại với nhau để xây dựng giao diện người dùng một cách nhanh chóng và hiệu quả.

React JS nâng cao hiệu suất thông qua việc sử dụng Virtual DOM, cho phép xác định và cập nhật chỉ những thay đổi cần thiết Bằng cách áp dụng thuật toán thông minh, React JS so sánh sự khác biệt giữa cây DOM mới và cũ, giúp tối ưu hóa quy trình tái tạo các thành phần Việc lưu trữ cả hai cây HTML trong bộ nhớ giúp React JS giảm thiểu các thao tác không cần thiết trên DOM, từ đó cải thiện hiệu suất ứng dụng.

Việc phân công nhiệm vụ trở nên dễ dàng hơn với ứng dụng chia màn hình đơn giản, cho phép mỗi thành viên đảm nhận một component riêng biệt mà không ảnh hưởng đến mã nguồn của các lập trình viên khác.

Khi các thành phần hoàn thiện và kết nối chặt chẽ, việc phát hiện sai sót hoặc thực hiện nâng cấp, bảo trì sẽ trở nên dễ dàng hơn, giúp tách biệt từng component để sửa chữa và phát triển hiệu quả.

1.1.2 Một số khái niệm liên quan đến React JS

Components giúp phân chia các UI (giao diện người dùng) thành các phần nhỏ để dễ dàng quản lý và tái sử dụng

Các components thực hiện công việc giống như các functions trong JavaScript nhưng chúng độc lập và nhiệm vụ là trả về HTML thông qua hàm render

Các thành phần trong React được sử dụng để xác định nội dung hiển thị trên màn hình Khi dữ liệu thay đổi, React sẽ cập nhật và render lại các thành phần một cách hiệu quả.

Components trong React thường được viết theo 2 loại chính đó là Function component và Class component

Hình 1.1: Component trong React JS Function Component:

Function Component là một hàm thuần (pure function) được sử dụng để khai báo một component Ban đầu, nó chỉ phục vụ mục đích render các đoạn HTML và không can thiệp vào lifecycle của component, nên thường được gọi là Stateless Component.

KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU

MÔ HÌNH HÓA YÊU CẦU