đồ án 2 tìm hiểu react js và xây dựng ứng dụng tư vấn chứng khoán

Định nghĩa - Frontend framework là một tập hợp các công cụ và thư viện được sắp xếp theo cấutrúc để giúp nhà phát triển xây dựng và quản lý ứng dụng web hiệu quả.. Các framework frontend

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

-BÁO CÁO ĐỒ ÁN 2 TÌM HIỂU REACT JS VÀ XÂY DỰNG ỨNG DỤNG TƯ VẤN CHỨNG KHOÁN

Giáo viên hướng dẫn: Nguyễn Công Hoan

Lớp: Đồ án 2 – SE122.O11

<Võ Văn Đăng Khoa> - <20521476>

<Lê Đoàn Đại Lợi> - <20521556>

TP Hồ Chí Minh, <2023>

LỜI CẢM ƠN

- Đầu tiên, nhóm chúng em xin gửi lời cảm ơn chân thành đến tập thể quý Thầy CôTrường Đại học Công nghệ thông tin – Đại học Quốc gia TP.HCM và quý Thầy Cô củakhoa Công nghệ phần mềm đã tạo điều kiện để nhóm chúng em hoàn thành đồ án 2 –Chủ đề TÌM HIỂU REACT JS VÀ XÂY DỰNG ỨNG DỤNG TƯ VẤN CHỨNG KHOÁN

- Đặc biệt, nhóm chúng em xin gửi lời cảm ơn và lòng biết ơn sâu sắc nhất tới thầyNguyễn Công Hoan là giảng viên hướng dẫn Đã giúp nhóm chúng em hoàn thành tốtbáo cáo môn học của mình

- Trong thời gian một học kỳ thực hiện đề tài, nhóm chúng em đã vận dụng nhữngkiến thức nền tảng đã tích lũy đồng thời kết hợp với việc học hỏi và nghiên cứu nhữngkiến thức mới Từ đó, nhóm chúng em vận dụng tối đa những gì đã thu thập được đểhoàn thành một báo cáo đồ án tốt nhất Tuy nhiên, trong quá trình thực hiện, nhómchúng em không tránh khỏi những thiếu sót Chính vì vậy, nhóm chúng em rất mongnhận được những sự góp ý từ phía các Thầy Cô nhằm hoàn thiện những kiến thức mànhóm chúng em đã học tập và là hành trang để nhóm chúng em thực hiện tiếp các đềtài khác trong tương lai

- Nhóm em xin chân thành cảm ơn Thầy!

1.5.1 Artificial Intelligence và Machine Learning 9

1.5.6 Low Code Development 10

2.1.5 Các ngôn ngữ và framework sử dụng mô hình MVC 13

2.3.6 Các ngôn ngữ và framework sử dụng mô hình MVVM 16

3.3 Form Validation 26

5.6 Hỗ trợ Testing 54

TÓM TẮT ĐỒ ÁN

- Đồ án “TÌM HIỂU REACT JS VÀ XÂY DỰNG ỨNG DỤNG TƯ VẤN CHỨNG KHOÁN” tậptrung vào việc tìm hiểu công nghệ, tin năng mới của ReactJS Tìm hiểu về khái niệmtổng quát của Frontend, các công nghệ và kiến trúc phổ biến ngày nay Từ đó, có thểứng dụng các kiến thức tìm hiểu được để xấy dựng một Website tư vấn chứng khoánmột cách dễ dàng và trực quan cho người dùng dễ sử dụng

- Đề tài được bắt đầu từ việc tìm hiểu các công nghệ và thực trạng ngày nay, đưa racác vần đề tồn đọng và cần cải thiện Nhằm mục đích hỗ trợ cho người dùng có thểtìm hiểu rõ hơn về chứng khoán Bên cạnh đó, nhóm em cũng muốn thực tập nhiềuhơn về ReactJS về các dự án thực tế, giúp cải thiện kỹ năng có thể đáp ứng được cácWebsite đòi khỏi kỹ năng lập trình cao Việc làm dự án thực tế còn giúp nhóm em hiểu

rõ hơn về nghiệp vụ, và có khả năng giải quyết khó khăn, tìm hiểu và sử dụng các côngnghệ mới để phù hợp và giúp trải nghiệm người dùng được tốt hơn, ít tốn chi phí vàbảo trì hệ thống dễ dàng hơn

- Vì ứng dụng yêu cầu cần cập nhật, thay đổi thường xuyên và đảm bảo ít xảy ra lỗinhất có thể nên quy trình phát triển sản phẩm đã vận dụng mô hình Agile làm phươngpháp luận chính cho quy trình phần mềm Kết quả của giai đoạn tìm hiểu và phân tíchđược mô hình hóa bằng UML thông qua công cụ StarUML Ở giai đoạn thực hiện,chương trình sẽ được cập nhật trên Github để có thể dễ dàng tổng hợp và kiểm soátlỗi Phần cuối cùng của đồ án là trình bày kết quả đã thực hiện lên báo cáo, đưa ra kếtluận và hướng phát triển của ứng dụng trong tương lai

- Nội dung đồ án được trình bày trong các chương như sau:

● Chương 1: Giới thiệu tổng quan về Frontend

● Chương 2: Tìm hiểu về cách kiến trúc phổ biến

● Chương 3: Tìm hiểu về các vấn đề cơ bản trong Frontend (ReactJS)

● Chương 4: Tìm hiểu sau về ReactJS

● Chương 5: So sánh ReacJS và Angular (Để tìm ra công nghệ phù hợp với từng

dự án)

● Chương 6: Kết luận (Những kết quả đặt được, hạn chế và hướng phát triển trongtương lai)

Chương 1 TỔNG QUAN VỀ FRONTEND 1.1 Frontend là gì?

- Frontend là một khái niệm quan trọng trong phát triển ứng dụng, đặc biệt là tronglĩnh vực công nghệ thông tin Đơn giản, frontend là phần giao diện người dùng củaứng dụng, nơi mà người dùng tương tác trực tiếp với hệ thống Điều này bao gồm tất

cả các thành phần mà người dùng nhìn thấy và tương tác, chẳng hạn như trang web,ứng dụng di động hoặc phần mềm máy tính

1.2 Lịch sử phát triển

1.2.1 Thời kỳ desktop applications

- Trong giai đoạn này, ứng dụng chủ yếu được phát triển cho môi trường máy tính cánhân Các ứng dụng desktop chủ yếu dựa vào giao diện đồ họa và tương tác chuột vàbàn phím Điển hình cho thời kỳ này là các ứng dụng chạy trên hệ điều hành nhưWindows, MacOS, và Linux

1.2.2 Thời kỳ web applications

1.2.2.1 Thời kỳ JavaScript

- Sự ra đời của JavaScript đã mở ra khả năng tạo ra các trang web tương tác và động.JavaScript đã trở thành ngôn ngữ lập trình chính cho frontend, cho phép tạo ra cáchiệu ứng và tương tác trực quan mà không cần tải lại trang

yếu tố HTML, xử lý sự kiện, và thực hiện các hiệu ứng động một cách dễ dàng Nó giúpgiảm đi sự phức tạp khi sử dụng JavaScript trực tiếp.

1.2.3 Thời kỳ mobile applications

- Trong giai đoạn này, sự bùng nổ của điện thoại thông minh và máy tính bảng đã đặt

ra thách thức phát triển ứng dụng di động Nhà phát triển cần tập trung vào tối ưuhóa trải nghiệm người dùng trên nhiều nền tảng, với sự xuất hiện của ngôn ngữ vàframework chuyên dụng cho di động như Swift (cho iOS) và Kotlin/Java (cho Android)

1.2.4 Thời kỳ cross platform applications

- Đối mặt với đa dạng nền tảng di động, sự xuất hiện của React Native, Xamarin, vàFlutter mang lại giải pháp viết mã một lần chạy trên nhiều hệ điều hành khác nhau.Điều này giảm chi phí phát triển và thời gian triển khai, hỗ trợ nhà phát triển đáp ứngnhanh chóng với yêu cầu đa dạng của người dùng

1.2.5 Thời kỳ progressive web applications

- Progressive Web Applications (PWAs) kết hợp tính năng của web và ứng dụng diđộng, mang lại trải nghiệm người dùng mượt mà và có tính năng nâng cao mà khôngcần cài đặt từ cửa hàng ứng dụng PWAs hoạt động offline, tương tác như ứng dụng diđộng truyền thống, tạo ra sự linh hoạt và đồng đều trên nhiều thiết bị và nền tảng

1.2.6 Thời kỳ responsive design

- Thời kỳ responsive design đánh dấu sự chuyển đổi quan trọng trong cách chúng tatiếp cận phát triển web Với sự gia tăng đáng kể của các thiết bị và màn hình khácnhau, responsive design xuất hiện như một giải pháp để tối ưu hóa trang web chonhiều kích thước màn hình Các trang web responsive có khả năng thích ứng tự độngvới mọi loại thiết bị, từ máy tính đến điện thoại di động, mang lại trải nghiệm ngườidùng thống nhất và thoải mái

1.2.7 Framework trỗi dậy

- Thời kỳ này chứng kiến sự trỗi dậy mạnh mẽ của các framework frontend, giúp nhàphát triển xây dựng ứng dụng web một cách hiệu quả và nhanh chóng Các frameworknhư Angular, React, và Vue.js đã trở thành những công cụ quan trọng, mang lại cấutrúc tổ chức mã nguồn, tái sử dụng mã, và tối ưu hóa hiệu suất Framework cũngđóng vai trò quan trọng trong việc thúc đẩy xu hướng phát triển web hiện đại vàchuẩn mực hóa quy trình phát triển

1.3 Công nghệ frontend

1.3.1 Các công cụ

- Các công cụ frontend là những phần mềm hỗ trợ quá trình phát triển và kiểm thửứng dụng Một số công cụ quan trọng bao gồm trình duyệt web như ChromeDevTools, Firefox Developer Tools, các trình quản lý gói như npm và Yarn, cũng nhưcác công cụ kiểm thử như Jest hoặc Selenium

1.4 Các frontend framework

1.4.1 Định nghĩa

- Frontend framework là một tập hợp các công cụ và thư viện được sắp xếp theo cấutrúc để giúp nhà phát triển xây dựng và quản lý ứng dụng web hiệu quả

1.4.2 Các framework frontend phổ biến

- React: Phát triển bởi Facebook, React là một thư viện JavaScript mạnh mẽ để xây

dựng giao diện người dùng động

- Angular: Một framework JavaScript do Google phát triển, Angular cung cấp một cách

tiếp cận toàn diện cho việc xây dựng ứng dụng web

- Vue.js: Nhẹ nhàng và linh hoạt, Vue.js là một framework frontend dễ học và sử

dụng

=> Các framework này giúp tăng cường năng suất phát triển, tái sử dụng mã nguồn,

và giảm thiểu công việc lặp lại trong quá trình xây dựng ứng dụng web hiện đại 1.5 Các xu hướng công nghệ phổ biến

1.5.1 Artificial Intelligence và Machine Learning

- Trí tuệ nhân tạo (AI) và Machine Learning (ML) đang trở thành một phần quan trọngcủa frontend, mang lại khả năng tùy chỉnh và dự đoán trong trải nghiệm người dùng

1.5.2 Single-Page Application

- Single-Page Application (SPA) là mô hình phát triển web mà một trang web chỉ cầntải một lần và sau đó không cần phải tải lại trang khi người dùng tương tác

1.5.3 Progressive Web Apps

- Progressive Web Apps (PWAs) kết hợp tính năng của web và ứng dụng di động,mang lại trải nghiệm người dùng mượt mà và có tính năng nâng cao mà không cần cài

đặt từ cửa hàng ứng dụng.

1.5.4 Serverless Architecture

- Serverless Architecture là mô hình phát triển ứng dụng mà các thành phần khôngcần máy chủ cụ thể để chạy Các dịch vụ cloud chịu trách nhiệm cho việc quản lý vàtriển khai các hàm hoặc chức năng

1.5.5 Server-Side Rendering

- Server-Side Rendering (SSR) là quá trình tạo và trả về HTML từ máy chủ đến trìnhduyệt của người dùng khi họ truy cập trang web Điều này giúp cải thiện hiệu suất vàtối ưu hóa trải nghiệm người dùng

1.5.6 Low Code Development

- Low Code Development là mô hình phát triển ứng dụng mà nhà phát triển sử dụngcác công cụ giảm thiểu việc viết mã để tăng tốc quá trình phát triển Điều này giúptăng cường sự linh hoạt và giảm độ phức tạp của quá trình phát triển

1.5.7 Micro Front End Architecture

- Micro Front End Architecture là một kiến trúc phát triển ứng dụng mà frontend đượcchia thành các thành phần độc lập, có thể được phát triển, triển khai và quản lý mộtcách độc lập

1.5.8 GraphQL

- GraphQL là một ngôn ngữ truy vấn và runtime cho API, giúp khả năng truy vấn dữliệu linh hoạt hơn và giảm lượng dữ liệu không cần thiết truyền từ máy chủ đến máykhách

1.5.9 Mobile-First Approach

- Mobile-First Approach là chiến lược phát triển ứng dụng bắt đầu từ việc thiết kế vàphát triển trước cho thiết bị di động, sau đó mở rộng để phù hợp với các thiết bị lớn

1.5.10 Voice User Interface

- Voice User Interface (VUI) là giao diện người dùng mà người dùng tương tác với hệthống thông qua giọng nói VUI đang trở thành một phần quan trọng của các ứngdụng thông minh và thiết bị đa phương tiện

Chương 2 CÁC KIẾN TRÚC PHỔ BIẾN 2.1 MVC

2.1.1 Khái niệm

- MVC là viết tắt của Model-View-Controller, một mô hình kiến trúc phần mềm được

sử dụng để tổ chức mã nguồn trong quá trình phát triển ứng dụng

2.1.3 Hoạt động của mô hình MVC

- Người dùng tương tác với View: Người dùng thực hiện các hành động trên giao diệnngười dùng

- View gửi yêu cầu đến Controller: View thông báo cho Controller về sự kiện ngườidùng

- Controller xử lý yêu cầu: Controller nhận yêu cầu, cập nhật Model, và chuẩn bị dữliệu mới cho View

- Model cập nhật dữ liệu: Model cập nhật trạng thái của dữ liệu

- Controller chọn View phù hợp: Controller chọn View thích hợp để hiển thị dữ liệumới

- View hiển thị dữ liệu mới: View nhận dữ liệu mới từ Controller và hiển thị lên giaodiện.

2.1.4 Lợi ích của việc sử dụng mô hình MVC

- Tổ chức mã nguồn: Mô hình MVC giúp tổ chức mã nguồn một cách rõ ràng, giúp dễdàng bảo trì và mở rộng ứng dụng

- Phân chia trách nhiệm: Quá trình phát triển được chia thành các thành phần độc lập,giúp nhóm làm việc hiệu quả hơn

2.1.5 Các ngôn ngữ và framework sử dụng mô hình MVC

- Mô hình MVC được sử dụng rộng rãi trong nhiều ngôn ngữ lập trình và frameworkkhác nhau Dưới đây là một số ngôn ngữ và framework phổ biến mà áp dụng mô hìnhMVC:

+ Ruby on Rails (Ruby): Ruby on Rails là một framework web phổ biến xây dựng trên

ngôn ngữ lập trình Ruby Nó áp dụng mô hình MVC để tổ chức mã nguồn và tạo ra cácứng dụng web hiệu quả

+ Django (Python): Django là một framework web Python mạnh mẽ, sử dụng mô

hình MVC hoặc mô hình MTV (Model-Template-View) Django giúp phát triển ứngdụng web nhanh chóng và hiệu quả

+ Spring (Java): Spring là một framework Java phổ biến cho phát triển ứng dụng

doanh nghiệp Nó cung cấp một cơ sở hạ tầng mạnh mẽ và sử dụng mô hình MVCtrong module Spring MVC

+ Express.js (JavaScript - Node.js): Express.js là một framework Node.js cho phát

triển ứng dụng web Nó sử dụng mô hình MVC để quản lý routes, views, vàcontrollers

+ Laravel (PHP): Laravel là một framework PHP phổ biến và sử dụng mô hình MVC để

phát triển ứng dụng web Nó cung cấp nhiều tính năng và công cụ hỗ trợ

+ ASP.NET MVC (C#): ASP.NET MVC là một framework phát triển ứng dụng web của

Microsoft, xây dựng trên ngôn ngữ lập trình C# Nó sử dụng mô hình MVC để phânchia logic, giao diện và dữ liệu

+ Angular (JavaScript/TypeScript): Angular là một framework JavaScript/TypeScript

phổ biến để xây dựng ứng dụng web đơn trang (SPA) Nó sử dụng mô hình MVVM(Model-View-ViewModel) là một biến thể của MVC

+ Yii Framework (PHP): Yii là một framework PHP khác sử dụng mô hình MVC Nó hỗ

trợ nhanh chóng và dễ dàng để phát triển ứng dụng web

- Các ngôn ngữ và framework này đều tận dụng mô hình MVC để tạo ra mã nguồn dễbảo trì, tái sử dụng, và mở rộng trong quá trình phát triển ứng dụng web

2.1.6 Tổng kết

- Mô hình MVC là một kiến trúc phổ biến trong phát triển phần mềm, giúp tăng tính tổchức và bảo trì của mã nguồn Sự phân chia rõ ràng giữa Model, View, và Controllermang lại hiệu suất và quản lý tốt trong quá trình xây dựng ứng dụng

2.2 MVVM

2.3.1 Khái niệm

- MVVM là viết tắt của Model-View-ViewModel Đây là một mô hình kiến trúc phầnmềm, nơi mà ứng dụng được chia thành ba phần chính để tạo ra một cách tiếp cậnlinh hoạt và dễ bảo trì

2.3.2 Cấu trúc của mô hình MVVM

- Model (M): Đại diện cho dữ liệu và logic xử lý nghiệp vụ Model không có thông tin

về giao diện người dùng.

- View (V): Đại diện cho giao diện người dùng View chịu trách nhiệm hiển thị dữ liệu

và tương tác với người dùng

- ViewModel (VM): Làm trung gian giữa Model và View ViewModel chịu trách nhiệm

xử lý logic và cung cấp dữ liệu cho View Nó không biết đến tồn tại của View

2.3.3 Hoạt động của mô hình MVVM

- View Yêu Cầu Dữ Liệu: View gửi yêu cầu dữ liệu đến ViewModel.

- ViewModel Xử Lý Yêu Cầu: ViewModel xử lý yêu cầu bằng cách truy cập Model và

lấy dữ liệu cần thiết

- ViewModel Cập Nhật Dữ Liệu: Sau khi nhận được dữ liệu, ViewModel cập nhật các

thuộc tính phù hợp

- View Được Cập Nhật: View theo dõi các thay đổi trong ViewModel và tự động cập

nhật giao diện khi có sự thay đổi

Data Binding Cần phải quản lý đồng bộ dữ

liệu thủ công Sử dụng Data Binding tự động.

Quản Lý State Quản lý state thủ công Data Binding giúp quản lý state

tự động

Khả Năng Kiểm Thử Kiểm thử dễ dàng với

Controller

Kiểm thử dễ dàng với ViewModel

framework web

Phổ biến trong ứng dụng di động

và các framework như Angular, Vue.js

Ứng Dụng Tiêu Biểu Rails, Django, Spring Angular, Vue.js, Xamarin

2.3.5 Lợi ích của việc sử dụng mô hình MVVM

- Tách Biệt Logic và Giao Diện: Giúp duy trì mã nguồn dễ dàng hơn bằng cách tách

biệt logic ứng dụng và giao diện người dùng

- Dễ Kiểm Thử: MVVM tạo điều kiện thuận lợi cho việc kiểm thử vì logic nghiệp vụ có

thể được kiểm thử mà không cần đến giao diện người dùng

- Tự Động Đồng Bộ Dữ Liệu: Sử dụng Databinding giúp tự động đồng bộ dữ liệu giữa

Model và View, giảm lượng mã lặp và tăng tính nhất quán

2.3.6 Các ngôn ngữ và framework sử dụng mô hình MVVM

- Mô hình MVC được sử dụng rộng rãi trong nhiều ngôn ngữ lập trình và frameworkkhác nhau Dưới đây là một số ngôn ngữ và framework phổ biến mà áp dụng mô hìnhMVC:

+ Angular (JavaScript/TypeScript): Angular là một framework phổ biến được phát

triển bởi Google Nó sử dụng kiến trúc MVVM để tạo ra ứng dụng web động và linh

hoạt Angular cung cấp các công cụ mạnh mẽ cho việc quản lý state, routing, và tươngtác với API.

+ Vue.js (JavaScript): Vue.js là một framework JavaScript nhẹ và dễ học Nó sử dụng

mô hình MVVM để quản lý giao diện người dùng và dữ liệu Vue.js linh hoạt và có thểtích hợp dễ dàng vào các dự án hiện tại

+ Xamarin (C#): Xamarin là một framework cho phép phát triển ứng dụng di động đa

nền tảng bằng ngôn ngữ lập trình C# Nó sử dụng mô hình MVVM để tách biệt logicứng dụng và giao diện người dùng, giúp chia sẻ mã nguồn giữa các nền tảng khácnhau

+ SwiftUI (Swift): SwiftUI là một framework cho việc xây dựng giao diện người dùng

trên các hệ điều hành của Apple Sử dụng mô hình MVVM để tạo ra các ứng dụng hiệnđại và đồng bộ với các thiết bị Apple khác nhau

+ React (JavaScript/TypeScript): React là một thư viện JavaScript phổ biến, không

phải là một framework, nhưng nó thường được sử dụng để xây dựng ứng dụng web

sử dụng kiến trúc MVVM thông qua các thư viện và công cụ như Redux

2.3.7 Tổng kết

- Các framework được nêu trên đều hỗ trợ mô hình MVVM, giúp phát triển ứng dụng

dễ dàng, hiệu quả, và dễ bảo trì Việc lựa chọn framework thích hợp phụ thuộc vàoyêu cầu cụ thể của dự án, ngôn ngữ lập trình ưa thích, và mức độ phổ biến trong cộngđồng phát triển

Chương 3 CÁC VẤN ĐỀ CƠ BẢN CỦA FRONTEND (REACT)

3.1.3 UI Rendering trong React

- Quy trình UI Rendering trong React:

+ Khởi tạo Component: Khi một component React được khởi tạo, React tạo một cây

Virtual DOM tương ứng với cấu trúc của component (Virtual DOM là một biểu diễncủa DOM thực sự trong bộ nhớ nhằm cải thiện hiệu suất khi cập nhật giao diện ngườidùng)

+ Render(): Component gọi hàm render(), tạo ra các phần tử React (React elements)

đại diện cho UI

+ Reconciliation: React so sánh cây Virtual DOM mới với cây trước đó để xác định sự

thay đổi

+ Diffing Algorithm: React sử dụng thuật toán "diffing" để tìm ra những thay đổi cần

áp dụng trên DOM thực sự

+ Re-rendering: Chỉ những phần thay đổi được cập nhật trên DOM thực sự, không

làm tải lại toàn bộ trang web

- Lợi ích của UI Rendering trong React:

+ Hiệu suất: Sử dụng Virtual DOM giúp giảm tải cho DOM thực sự, tối ưu hóa việc cập

nhật và rendering

+ Tăng tốc độ cập nhật: React cập nhật chỉ những phần thay đổi, giúp tăng tốc độ

hiển thị các thay đổi trên giao diện người dùng

+ Đồng bộ và linh hoạt: Virtual DOM giúp React duy trì một bản sao nhanh chóng của

trạng thái UI, giúp duyệt qua và cập nhật các thay đổi một cách linh hoạt

- Cách sử dụng Virtual DOM trong React:

+ React.createElement(): Dùng để tạo React elements trong hàm render().

+ ReactDOM.render(): Chuyển đổi React elements thành cây Virtual DOM và cập

nhật DOM thực sự dựa trên sự khác biệt giữa cây cũ và mới

+ setState(): Khi state thay đổi, React sử dụng Virtual DOM để xác định sự thay đổi

và cập nhật giao diện người dùng

- Qua quy trình này, React giúp đảm bảo hiệu suất và trải nghiệm người dùng mượt

mà trong quá trình rendering UI

3.2 Tương tác UI

3.2.1 Giải quyết vấn đề

- Trong quá trình phát triển ứng dụng frontend, việc giải quyết vấn đề liên quan đếntương tác người dùng là một yếu tố quan trọng để đảm bảo trải nghiệm người dùngtốt Tương tác UI đòi hỏi sự linh hoạt và khả năng đáp ứng cao để xử lý đa dạng các

hành động từ phía người dùng.

3.2.2 Tương tác trong React

- React, là một thư viện JavaScript phổ biến, cung cấp một cách tiếp cận hiệu quả đểgiải quyết vấn đề tương tác UI Dưới đây là những phương tiện chính trong React để

xử lý tương tác:

+ React Events:

● Trong React, sự kiện (event) là một phần quan trọng của tương tác người dùng.React cung cấp một hệ thống sự kiện mạnh mẽ và dễ sử dụng Dưới đây là một

số khái niệm và cách sử dụng sự kiện trong React:

● Sự Kiện (Event): Là các hành động mà người dùng thực hiện trên giao diện, nhưclick, hover, submit, change, và nhiều hành động khác

● Sự Kiện React (React Event): Là các sự kiện tương tác mà React xử lý và gửithông báo đến các thành phần của ứng dụng

● React events là một phần quan trọng của cách React xử lý tương tác người dùng

và giúp tạo ra ứng dụng linh hoạt và dễ bảo trì

● Ví dụ về cách sử dụng Events trong React

Hình 3.1: Xử lý sự kiện `onClick` trong React

Hình 3.2: Xử lý sự kiện `onChange` trong Form

Hình 3.3: Xử lý sự kiện `onSubmit` trong Form

+ State và Props:

● State: Là nơi lưu trữ và quản lý trạng thái của một thành phần Khi trạng tháithay đổi, React tự động render lại thành phần

Hình 3.4: Ví dụ về cách sử dụng state

● Props: Là cách truyền dữ liệu từ một thành phần cha sang một thành phần con.Props giúp tái sử dụng và tách biệt trách nhiệm giữa các thành phần

Hình 3.5: Ví dụ về cách sử dụng props

+ Effect hook: useEffect: Cho phép bạn thực hiện các hiệu ứng (side effects) trong

thành phần React Sử dụng nó để gọi API, thay đổi trạng thái dựa trên lifecycle củathành phần

Hình 3.6: Ví dụ về cách dùng useEffect

+ Context API: Context API là một phần của React được thiết kế để giải quyết vấn đề

truyền dữ liệu giữa các thành phần mà không cần thông qua props ở mức sâu trongcây component Điều này giúp tránh tình trạng "prop drilling" (truyền props qua nhiềucấp độ) và làm cho việc quản lý trạng thái và dữ liệu toàn cục trở nên dễ dàng hơn

● Các thành phần chính: `createContext`, `<Context.Provider>`, `useContext`

Hình 3.7: Ví dụ về cách sử dụng Context API

● Lợi ích và trường hợp sử dụng:

o Thuận tiện: Context API giúp giảm bớt cần thiết phải truyền props quanhiều cấp độ, làm mã nguồn trở nên sáng sủa hơn

o Toàn cục: Thông qua Context API, bạn có thể quản lý các trạng thái hoặc

dữ liệu toàn cục của ứng dụng một cách thuận tiện

o Truyền dữ liệu Theme, Ngôn Ngữ, Đăng Nhập, vv: Context API thườngđược sử dụng để truyền các thông tin toàn cục như theme, ngôn ngữ,trạng thái đăng nhập, và các dữ liệu toàn cục khác

● Nhược điểm:

o Khó Dùng Cho Trạng Thái Phức Tạp

o Giảm hiệu suất khi sử dụng với data lớn

o Khó theo dõi và cập nhật data

o Tính linh hoạt bị hạn chế, không thể truyền data đến một số component

cụ thể (Chỉ truyền trong toàn cục)

- Quy tắc Validation cơ bản cần được đảm bảo:

● Yêu Cầu Dữ Liệu Bắt Buộc: Đảm bảo rằng các trường quan trọng như email,

mật khẩu, hoặc thông tin quan trọng khác không được bỏ trống

● Định Dạng Hợp Lệ: Kiểm tra xem dữ liệu nhập vào có đúng định dạng hay

không Ví dụ, kiểm tra xem một trường email có đúng định dạng email haykhông

● Chiều Dài Hợp Lệ: Đặt các ràng buộc về chiều dài của dữ liệu, ví dụ như đảm

bảo một mật khẩu có đủ dài

● So Sánh Dữ Liệu: Nếu có nhiều trường, hãy kiểm tra xem chúng có khớp nhau

không Ví dụ, so sánh mật khẩu và xác nhận mật khẩu

- Các cách làm validation trong React: Sử dụng thư viện hoặc hook

- Các thư viện thường được sử dụng:

● Formik: Sử dụng thư viện Formik để quản lý state của form và validation một

cách dễ dàng Formik giúp tổ chức logic validation và xử lý form một cách hiệuquả

● Yup: Kết hợp Yup với Formik để xác thực schema dữ liệu và règles validation.

Yup giúp đơn giản hóa việc kiểm tra định dạng và giá trị của dữ liệu

3.3.3 Form Validation với React

- Trong React, bạn có thể sử dụng các Hooks như `useState` để theo dõi state củaform và `useEffect` để kiểm tra validation khi dữ liệu thay đổi Dưới đây là một ví dụđơn giản:

Hình 3.8: Ví dụ về Form Validation với hook

3.4 Tạo frontend động (dynamic form)

3.4.1 Mô tả

- Các trang web hay ứng dụng ngày này đã phát triển nhiều, và có khả năng thay đổiđộng dựa trên dữ liệu hoặc yêu cầu cụ thể của ứng dụng Dynamic form cho phépchúng ta tạo và quản lý các trường nhập liệu một cách linh hoạt, tùy thuộc vào nhucầu cụ thể của người dùng hoặc hệ thống

3.4.2 Công nghệ BEEKAI

- BEEKAI là một công ty chuyên cung cấp giải pháp và dịch vụ trong lĩnh vực công nghệthông tin và phần mềm Trong lĩnh vực xây dựng dynamic form, BEEKAI sử dụng một

số công nghệ và chiến lược quan trọng

- Các điểm nổi bật trong BEEKAI

● Data-Driven Approach: BEEKAI ưu tiên việc sử dụng hướng tiếp cận dựa trên

dữ liệu Dynamic form được xây dựng dựa trên dữ liệu được đặc tả, giúp dễdàng thay đổi cấu trúc form theo yêu cầu của khách hàng

● API Integration: BEEKAI tích hợp dynamic form với các API để đồng bộ và

lấy dữ liệu từ các nguồn khác nhau Điều này giúp form luôn cập nhật với thôngtin mới nhất

● User-Friendly Interface: Giao diện người dùng của dynamic form được

BEEKAI thiết kế một cách thân thiện và dễ sử dụng Các trường nhập liệu được

tự động tạo ra và điều chỉnh tùy thuộc vào loại dữ liệu

Hình 3.9: Ví dụ về BEEKAI trong React

3.4.3 Công nghệ React-hook

- React-Hook trong Dynamic Form:

● useState và useEffect: React-Hook được sử dụng để theo dõi và quản lý state

của dynamic form useState để lưu trữ thông tin về cấu trúc form, và useEffect

để theo dõi các thay đổi và cập nhật giao diện khi có sự thay đổi

● Dinamic Rendering: React-Hook giúp trong việc tạo các thành phần của form

dựa trên dữ liệu đầu vào Khi dữ liệu thay đổi, form có thể tự động render lạicác trường nhập liệu mới hoặc đã thay đổi

● Event Handling: Sử dụng React-Hook để xử lý sự kiện khi người dùng thay đổi

giá trị trong dynamic form Điều này có thể kích hoạt các hành động như gửi dữliệu lên server hoặc cập nhật state

Hình 3.10: Ví dụ về Form dynamic với hook trong React

Chương 4 KHÁI QUÁT VỀ REACT 4.1 Khái niệm

- React là một thư viện JavaScript mã nguồn mở, được phát triển bởi Facebook, giúpxây dựng giao diện người dùng (UI) linh hoạt và dễ bảo trì cho ứng dụng web Đượcgiới thiệu lần đầu vào năm 2013, React đã nhanh chóng trở thành một công cụ quantrọng trong cộng đồng phát triển web, nhờ vào sự đơn giản, hiệu suất và khả năng tái

sử dụng mã nguồn

4.2 Lịch sử phát triển

- React đã trải qua một hành trình phát triển ấn tượng kể từ khi được giới thiệu Dướiđây là một tóm tắt về lịch sử phát triển của React:

● 2011 - Xuất Hiện Đầu Tiên: React bắt đầu như một dự án nội bộ tại Facebook,

được phát triển bởi Jordan Walke, một kỹ sư phần mềm tại công ty

● 2013 - Giới Thiệu Công Chúng: React được giới thiệu lần đầu tiên tại một hội

nghị F8 của Facebook vào tháng 5 Ban đầu, nó được xây dựng để giải quyếtcác vấn đề về hiệu suất và quản lý trạng thái trong ứng dụng web lớn củaFacebook

● 2015 - React Native và Open Source: Facebook mở mã nguồn React, chuyển

đổi thành dự án mã nguồn mở Cùng năm, React Native - một khung phát triểncho việc xây dựng ứng dụng di động với React - cũng được giới thiệu

● 2016 - React Fiber: Facebook công bố React Fiber, một phiên bản mới của hạt

nhân của React được thiết kế để hỗ trợ hiệu suất và quản lý trạng thái tốt hơn.Fiber đã trở thành cơ sở cho các cải tiến và tính năng mới của React

● 2018 => Nay: React phát triển thêm nhiều tính năng như hooks, một cách mới

để sử dụng trạng thái và vòng đời trong functional components Nó giúp tái sửdụng logic giữa các component mà không cần chuyển đổi thành các classcomponents Concurrent Mode, một tính năng cung cấp hiệu suất cao hơn vàtrải nghiệm người dùng mượt mà hơn, được công bố Ngoài ra, phát triển thêmStable Concurrent Mode giúp cải tiến về API và khả năng tương thích ngược.Concurrent Mode chính thức trở thành một tính năng ổn định, mang lại hiệu suất

và trải nghiệm người dùng tốt hơn Và cùng với nhiều tính năng mới nhưSuspense for Data Fetching, Transition API, và nâng cao về hiệu suất Phiên bảnnày tiếp tục mang lại những cải tiến quan trọng cho trải nghiệm phát triển vàngười dùng

4.3 Kiến trúc hệ thống React

- Kiến trúc của hệ thống React được xây dựng dựa trên mô hình Component-BasedArchitecture, trong đó mọi thứ đều là thành phần (component) Dưới đây là nhữngphần quan trọng của kiến trúc hệ thống React:

4.3.1 Component-Based Architecture:

- Component: Là đơn vị cơ bản xây dựng ứng dụng React Có hai loại chính: Functional

Components (thành phần hàm) và Class Components (thành phần lớp) Mỗi thànhphần có trách nhiệm hiển thị một phần cụ thể của giao diện người dùng

- Tái Sử Dụng: Các thành phần có thể tái sử dụng dễ dàng, giúp giảm lượng mã nguồn

và làm cho mã nguồn dễ bảo trì

- Phân Cấp Component: Các thành phần có thể chứa các thành phần khác, tạo thành

cây component phân cấp, giúp tổ chức và quản lý ứng dụng một cách hiệu quả

- Tính Linh Hoạt:

● Các thành phần có thể được thay thế hoặc nâng cấp mà không ảnh hưởng đếntoàn bộ hệ thống.

● Tính linh hoạt này giúp dễ dàng thích ứng với sự thay đổi yêu cầu

- Quản Lý Dự Án Hiệu Quả:

● Dự án có thể được phát triển một cách đồng thời bởi nhiều nhóm làm việc trêncác thành phần khác nhau

● Điều này giúp tăng tốc quá trình phát triển và giảm thiểu rủi ro

- Tính Năng Chia Nhỏ:

● Kiến trúc dựa trên thành phần thúc đẩy việc chia nhỏ hệ thống thành các phầnnhỏ hơn, dễ quản lý và bảo trì

- Tiêu Chuẩn Hóa Giao Diện:

● Các thành phần thường có giao diện chuẩn, điều này giúp chúng tương tác dễdàng và tích hợp tốt với nhau

- Kiểm Soát Rủi Ro:

● Với sự phân tách rõ ràng giữa các thành phần, rủi ro của việc thay đổi ảnhhưởng chỉ đến các thành phần liên quan, không ảnh hưởng đến toàn bộ hệthống

- Dễ Kiểm Thử:

● Việc kiểm thử có thể tập trung vào từng thành phần một, giúp tăng cường chấtlượng của từng phần của hệ thống.

Hình 4.1: Ví dụ về UI Component