Đồ án: Website Chia Sẻ Kiến Thức Học Tập ReactJS & ASP.NET Core - SPKT TPHCM

Website chia sẻ kiến thức học ReactJS và ASP.NET Core. Cung cấp các bài viết chuyên sâu, hướng dẫn chi tiết và ví dụ thực tế cho lập trình viên.

• Tác giả: Lê Tấn Đạt
• Người hướng dẫn: TS. Lê Văn Vinh
• Trường học: Trường Đại học Sư Phạm Kỹ Thuật Thành phố Hồ Chí Minh
• Chuyên ngành: Công nghệ thông tin
• Đề tài: Website chia sẻ kiến thức học tập sử dụng ReactJS và ASP.NET Core
• Loại tài liệu: Đồ án tốt nghiệp
• Năm xuất bản: 2022
• Địa điểm: Tp. Hồ Chí Minh

Mục lục chi tiết

• LỜI CẢM ƠN
• ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP
• MỤC LỤC
• PHẦN MỞ ĐẦU
• 1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI
• 2. ĐỐI TƯỢNG NGHIÊN CỨU
• 3. PHẠM VI NGHIÊN CỨU
• 4. MỤC TIÊU CỦA ĐỀ TÀI
• 5. Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN
• PHẦN NỘI DUNG
• 1. CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
• 1.1. React JS là gì?
• 1.2. Một số khái niệm liên quan đến React JS
• 1.3. Sơ lược về ngôn ngữ C#
• 1.4. Đặc trưng của ngôn ngữ C#
• 1.5. Nhược điểm của C#.NET Core là gì?
• 1.6. Sơ lược về lịch sử ASP
• 1.7. Ưu điểm của ASP
• 1.8. Nhược điểm của ASP
• 1.9. SQL Server là gì?
• 1.10. Mục đích sử dụng SQL Server
• 1.11. Ưu điểm của SQL Server
• 1.12. Nhược điểm của 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.1. KHẢO SÁT HIỆN TRẠNG
• 2.1.1. Chân trời tin hoc
• 2.1.2. Forum chia sẻ tài liệu hóa học
• 2.1.3. Forum đề thi Việt
• 2.2. XÁC ĐỊNH YÊU CẦU
• 2.2.1. Yêu cầu chức năng
• 2.2.2. Yêu cầu phi chức năng
• 2.3. MÔ HÌNH HÓA YÊU CẦU
• 2.3.1. Mô hình hóa yêu cầu
• 3. CHƯƠNG 3: THIẾT KẾ PHẦN MỀM
• 3.1. LƯỢC ĐỒ TUẦN TỰ
• 3.2. THIẾT KẾ CƠ SỞ DỮ LIỆU
• 3.2.1. Lược đồ cơ sở dữ liệu
• 3.2.2. Chi tiết bảng dữ liệu
• 3.3. THIẾT KẾ GIAO DIỆN
• 3.3.1. Giao diện chính phía khách và thành viên
• 3.3.2. Giao diện chính phía quản trị viên
• 4. CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ
• 4.1. CÔNG CỤ DÙNG TRONG DỰ ÁN
• 4.2. CÀI ĐẶT ỨNG DỤNG
• 4.3. Kế hoạch kiểm thử
• 4.4. Quy trình thiết kế kiểm thử
• 4.5. Quy trình thực hiện kiểm thử
• 4.6. Kết quả kiểm thử
• PHẦN KẾT LUẬN
• 1. KẾT QUẢ ĐẠT ĐƯỢC
• 1.1. Kiến thức tìm hiểu được
• 1.2. Dự án đã làm được
• 2. NHƯỢC ĐIỂM
• 3. HƯỚNG PHÁT TRIỂN
• TÀI LIỆU THAM KHẢO
• DANH MỤC HÌNH
• DANH MỤC BẢNG
• DANH MỤC TỪ VIẾT TẮT
• PHẦN MỞ ĐẦU
• 1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI
• 2. ĐỐI TƯỢNG NGHIÊN CỨU
• 3. PHẠM VI NGHIÊN CỨU
• 4. MỤC TIÊU CỦA ĐỀ TÀI
• 5. Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN
• PHẦN NỘI DUNG
• 1. CHƯƠNG 1: REACT JS LÀ GÌ?

Tóm tắt

I. Khám phá website học tập ReactJS và ASP

Trong kỷ nguyên số, việc xây dựng một blog lập trình hay nền tảng chia sẻ kiến thức trực tuyến đã trở thành một nhu cầu thiết yếu. Một website chia sẻ kiến thức học tập ReactJS, ASP.NET Core là giải pháp toàn diện cho cả người học và người dạy, kết hợp sức mạnh của hai công nghệ hàng đầu trong phát triển web hiện đại. ReactJS, một thư viện JavaScript mã nguồn mở do Facebook phát triển, nổi bật với khả năng xây dựng giao diện người dùng (UI) linh hoạt và hiệu suất cao thông qua cơ chế Virtual DOM. Trong khi đó, ASP.NET Core, một framework đa nền tảng từ Microsoft, cung cấp một nền tảng vững chắc cho việc xây dựng Web API mạnh mẽ, bảo mật và dễ dàng mở rộng. Sự kết hợp này tạo ra một hệ thống full-stack hoàn chỉnh, nơi lập trình front-end và lập trình back-end phối hợp nhịp nhàng. Đề tài "Website chia sẻ kiến thức học tập sử dụng ReactJS và ASP.NET Core" của Lê Tấn Đạt và Kiều Xuân Vinh (2022) đã chứng minh tính khả thi và hiệu quả của mô hình này. Nghiên cứu tập trung vào việc tạo ra một môi trường học tập tương tác, nơi sinh viên có thể thảo luận, tìm kiếm tài liệu và đề thi một cách thuận tiện. Nền tảng này không chỉ là một kho lưu trữ thông tin mà còn là một cộng đồng học thuật, thúc đẩy khả năng tự học và giải quyết vấn đề. Việc ứng dụng các công nghệ tiên tiến như React Hooks để quản lý trạng thái, Entity Framework Core để tương tác với cơ sở dữ liệu, và JWT Authentication để bảo mật là những yếu tố cốt lõi tạo nên sự thành công của dự án.

1.1. Tổng quan về lộ trình học full stack React và .NET

Một lộ trình học full-stack hiệu quả với React và .NET bắt đầu từ những nền tảng cơ bản. Đầu tiên, cần nắm vững kiến thức về HTML, CSS và JavaScript, là ba trụ cột của web front-end. Tiếp theo, đi sâu vào hướng dẫn ReactJS, bắt đầu từ các khái niệm cốt lõi như Components, Props, và State. Việc làm chủ React Hooks như useState, useEffect là cực kỳ quan trọng để xây dựng các thành phần giao diện động và hiệu quả. Về phía back-end, tự học ASP.NET Core là bước đi tiếp theo. Bắt đầu với ngôn ngữ lập trình C# .NET, sau đó tìm hiểu cách xây dựng các RESTful API bằng ASP.NET Core. Các khái niệm như Middleware, Dependency Injection, và Routing cần được hiểu rõ. Cuối cùng, kết nối hai phần này lại với nhau là kỹ năng then chốt. Việc học cách kết nối React với API và xử lý dữ liệu thông qua các yêu cầu HTTP (GET, POST, PUT, DELETE) sẽ hoàn thiện bộ kỹ năng của một lập trình viên full-stack.

1.2. Lý do chọn ReactJS và ASP.NET Core cho dự án giáo dục

Việc lựa chọn công nghệ là một quyết định chiến lược. ReactJS được chọn cho lập trình front-end vì hệ sinh thái rộng lớn, cộng đồng hỗ trợ mạnh mẽ và hiệu năng vượt trội nhờ Virtual DOM. Khả năng tái sử dụng component giúp đẩy nhanh quá trình phát triển và bảo trì. Các thư viện bổ trợ như React Router cho việc điều hướng và Redux Toolkit cho State Management phức tạp làm cho React trở thành lựa chọn lý tưởng. Đối với lập trình back-end, ASP.NET Core mang lại hiệu suất cao, tính bảo mật và khả năng chạy đa nền tảng (Windows, macOS, Linux). Theo nghiên cứu của Đại học Sư phạm Kỹ thuật TP.HCM, framework này cung cấp các công cụ mạnh mẽ như Entity Framework Core để làm việc với cơ sở dữ liệu SQL Server một cách trực quan và hiệu quả. Hơn nữa, việc tích hợp sẵn các cơ chế xác thực như JWT Authentication giúp đơn giản hóa việc bảo mật hệ thống. Sự kết hợp này tạo nên một dự án React và .NET Core vững chắc, đáp ứng tốt các yêu cầu của một nền tảng giáo dục hiện đại.

II. Top thách thức khi tự học ReactJS và ASP

Quá trình tự học ASP.NET Core và ReactJS đặt ra nhiều thách thức không nhỏ cho người mới bắt đầu. Thách thức lớn nhất là sự thiếu hụt một lộ trình học tập có cấu trúc. Internet có vô số tài liệu ASP.NET Core và khóa học ReactJS, nhưng chúng thường rời rạc và không đồng bộ, khiến người học dễ bị choáng ngợp và mất phương hướng. Một vấn đề khác là khó khăn trong việc cài đặt môi trường .NET và Node.js một cách chính xác. Các lỗi tương thích phiên bản, cấu hình biến môi trường, hay các vấn đề với package manager (NPM/Yarn) có thể làm nản lòng ngay từ những bước đầu tiên. Bên cạnh đó, việc hiểu sâu các khái niệm trừu tượng như State Management trong React hay Dependency Injection trong ASP.NET Core đòi hỏi thời gian và thực hành liên tục. Nếu không có người hướng dẫn, người học dễ rơi vào tình trạng học vẹt mà không nắm được bản chất. Cuối cùng, việc thiếu một môi trường thực hành và nhận phản hồi là một rào cản lớn. Xây dựng một dự án React và .NET Core hoàn chỉnh từ đầu đến cuối là cách tốt nhất để củng cố kiến thức, nhưng nhiều người không biết bắt đầu từ đâu hoặc làm thế nào để kết nối các thành phần lại với nhau. Những khó khăn này nhấn mạnh sự cần thiết của một nền tảng chia sẻ kiến thức tập trung, nơi cung cấp cả lý thuyết và thực hành.

2.1. Khó khăn trong việc tìm kiếm tài liệu ASP.NET Core uy tín

Nguồn tài liệu ASP.NET Core trên mạng rất phong phú nhưng chất lượng lại không đồng đều. Người mới học thường khó phân biệt được đâu là tài liệu chính thống, cập nhật và đâu là kiến thức lỗi thời. Nhiều hướng dẫn chỉ tập trung vào các ví dụ đơn giản, không đề cập đến các vấn đề phức tạp trong thực tế như xử lý lỗi, tối ưu hóa hiệu năng hay triển khai ứng dụng. Hơn nữa, sự thay đổi nhanh chóng của công nghệ khiến nhiều tài liệu trở nên lạc hậu chỉ sau một thời gian ngắn. Việc tìm kiếm các bài viết chuyên sâu về các chủ đề như kiến trúc Microservices, bảo mật với IdentityServer, hay sử dụng Entity Framework Core một cách hiệu quả đòi hỏi kỹ năng sàng lọc thông tin tốt. Đây chính là lý do các blog lập trình và website học tập có quản lý nội dung chặt chẽ trở nên giá trị.

2.2. Rào cản khi tự học ReactJS từ React Hooks đến Redux

ReactJS có một đường cong học tập khá dốc. Ban đầu, các khái niệm cơ bản có thể dễ tiếp cận, nhưng để làm chủ nó lại là một câu chuyện khác. React Hooks là một cuộc cách mạng trong việc viết component, nhưng việc hiểu rõ cách hoạt động của useEffect với dependency array hay khi nào nên dùng useCallback, useMemo là một thách thức. Quản lý trạng thái là một rào cản lớn khác. Với các ứng dụng nhỏ, useState và useContext có thể đủ dùng, nhưng khi ứng dụng lớn dần, việc quản lý trạng thái toàn cục (global state) trở nên phức tạp. Đây là lúc các thư viện như Redux Toolkit phát huy tác dụng. Tuy nhiên, việc học Redux với các khái niệm như actions, reducers, store, và middleware lại thêm một tầng phức tạp nữa vào quá trình học. Việc thiếu các khóa học ReactJS có cấu trúc rõ ràng từ cơ bản đến nâng cao khiến người học dễ bị lạc lối trong hệ sinh thái rộng lớn của React.

III. Hướng dẫn xây dựng Web API với ASP

Việc xây dựng Web API là xương sống của mọi ứng dụng web hiện đại, đóng vai trò là cầu nối giữa giao diện người dùng và cơ sở dữ liệu. ASP.NET Core là một lựa chọn tuyệt vời cho nhiệm vụ này nhờ hiệu năng cao, kiến trúc module và sự hỗ trợ mạnh mẽ từ Microsoft. Sử dụng ngôn ngữ lập trình C# .NET, một ngôn ngữ lập trình hướng đối tượng mạnh mẽ và an toàn, các nhà phát triển có thể tạo ra các RESTful API tuân thủ các tiêu chuẩn quốc tế. Quy trình bắt đầu bằng việc thiết lập dự án, định nghĩa các model dữ liệu (entities) và tạo DbContext để làm việc với cơ sở dữ liệu thông qua Entity Framework Core. EF Core là một ORM (Object-Relational Mapper) giúp đơn giản hóa các thao tác CRUD (Create, Read, Update, Delete) mà không cần viết các câu lệnh SQL phức tạp. Tiếp theo, các Controllers được tạo ra để xử lý các yêu cầu HTTP đến. Mỗi action trong controller sẽ tương ứng với một endpoint của API. Việc áp dụng các nguyên tắc thiết kế như Dependency Injection giúp mã nguồn trở nên sạch sẽ, dễ bảo trì và kiểm thử. Cuối cùng, bảo mật là yếu tố không thể bỏ qua. Việc tích hợp JWT Authentication cho phép xác thực người dùng một cách an toàn và phân quyền truy cập vào các tài nguyên khác nhau của API, đảm bảo chỉ những người dùng hợp lệ mới có thể thực hiện các hành động được phép.

3.1. Các bước cài đặt môi trường .NET và tạo dự án API

Để bắt đầu, việc cài đặt môi trường .NET và Node.js là bước tiên quyết. Cần tải và cài đặt .NET SDK từ trang chủ của Microsoft và Node.js từ trang nodejs.org. Sau khi cài đặt, có thể kiểm tra phiên bản bằng các lệnh dotnet --version và node -v trong terminal. Để tạo một dự án Web API mới, sử dụng lệnh dotnet new webapi -o MyApiProject. Lệnh này sẽ tạo ra một cấu trúc dự án cơ bản với một controller ví dụ (WeatherForecastController). Mở dự án bằng một IDE như Visual Studio hoặc VS Code, cấu trúc dự án bao gồm các tệp quan trọng như Program.cs (nơi cấu hình và khởi chạy ứng dụng), appsettings.json (chứa các chuỗi kết nối và cấu hình khác), và thư mục Controllers. Đây là nền tảng để bắt đầu phát triển các tính năng cho lập trình back-end.

3.2. Triển khai Entity Framework Core và SQL Server

Tích hợp cơ sở dữ liệu là một phần cốt lõi. Entity Framework Core được sử dụng để ánh xạ các đối tượng C# (models) sang các bảng trong cơ sở dữ liệu SQL Server. Đầu tiên, cần cài đặt các NuGet packages cần thiết: Microsoft.EntityFrameworkCore.SqlServer, Microsoft.EntityFrameworkCore.Tools. Sau đó, tạo các lớp model đại diện cho các thực thể dữ liệu (ví dụ: User, Post, Comment). Tiếp theo, tạo một lớp DbContext kế thừa từ Microsoft.EntityFrameworkCore.DbContext, định nghĩa các DbSet cho mỗi model. Chuỗi kết nối đến SQL Server được cấu hình trong appsettings.json và được đăng ký trong Program.cs thông qua Dependency Injection. Cuối cùng, sử dụng các lệnh dotnet ef migrations add InitialCreate và dotnet ef database update để tự động tạo cơ sở dữ liệu và các bảng tương ứng từ code. Cách tiếp cận "Code-First" này giúp quản lý lược đồ cơ sở dữ liệu một cách nhất quán và hiệu quả.

IV. Bí quyết lập trình front end với ReactJS và React Hooks

Phát triển giao diện người dùng hiện đại đòi hỏi một công cụ mạnh mẽ và linh hoạt, và ReactJS đáp ứng hoàn hảo yêu cầu này. Triết lý của React xoay quanh việc xây dựng UI từ các khối độc lập và có thể tái sử dụng được gọi là Components. Cách tiếp cận này giúp việc quản lý và mở rộng ứng dụng trở nên đơn giản hơn rất nhiều. React Hooks, được giới thiệu từ phiên bản 16.8, đã thay đổi hoàn toàn cách viết component trong React, cho phép sử dụng state và các tính năng khác của React mà không cần viết class. useState là hook cơ bản nhất để thêm state vào function component, trong khi useEffect cho phép thực hiện các side effect như fetch dữ liệu từ API. Việc nắm vững cách sử dụng các hook này là chìa khóa cho việc lập trình front-end hiệu quả. Ngoài ra, hệ sinh thái của React cung cấp nhiều thư viện hỗ trợ mạnh mẽ. React Router là thư viện tiêu chuẩn để xử lý việc định tuyến (routing) trong các ứng dụng đơn trang (SPA), cho phép người dùng điều hướng giữa các trang khác nhau mà không cần tải lại toàn bộ trang web. Đối với các ứng dụng có luồng dữ liệu phức tạp, việc áp dụng một giải pháp State Management như Redux Toolkit là cần thiết để quản lý trạng thái ứng dụng một cách nhất quán và dễ dự đoán.

4.1. Quản lý trạng thái hiệu quả với Redux Toolkit

Khi ứng dụng phát triển, việc truyền props qua nhiều cấp component (prop-drilling) trở nên cồng kềnh và khó bảo trì. Đây là lúc cần đến một giải pháp State Management toàn cục. Redux Toolkit là cách tiếp cận được đề xuất chính thức để viết logic Redux. Nó đơn giản hóa nhiều khía cạnh của Redux, giảm thiểu code soạn sẵn (boilerplate) và tích hợp các phương pháp thực hành tốt nhất. Với createSlice, có thể định nghĩa một phần của state, các reducers tương ứng và tự động tạo ra các action creators. configureStore giúp thiết lập store một cách nhanh chóng với các middleware mặc định hữu ích. Việc sử dụng Redux Toolkit giúp logic quản lý trạng thái trở nên tập trung, dễ kiểm thử và gỡ lỗi, đặc biệt khi kết hợp với công cụ Redux DevTools.

4.2. Kỹ thuật kết nối React với API của ASP.NET Core

Việc kết nối React với API là tác vụ không thể thiếu trong mọi dự án React và .NET Core. Phía front-end ReactJS sẽ gửi các yêu cầu HTTP đến các endpoint do back-end ASP.NET Core cung cấp để lấy hoặc gửi dữ liệu. Có thể sử dụng fetch API có sẵn trong trình duyệt hoặc các thư viện phổ biến như Axios để thực hiện việc này. Một quy trình phổ biến là sử dụng hook useEffect để gửi yêu cầu lấy dữ liệu khi một component được render lần đầu. Dữ liệu trả về từ API (thường ở định dạng JSON) sẽ được lưu vào state của component bằng useState, sau đó được hiển thị trên giao diện. Đối với các thao tác như đăng nhập hoặc gửi dữ liệu, các yêu cầu POST sẽ được gửi đi, thường kèm theo dữ liệu trong phần body và các header cần thiết, chẳng hạn như header Authorization chứa JWT Authentication token. Việc xử lý trạng thái loading và lỗi trong quá trình gọi API cũng rất quan trọng để cải thiện trải nghiệm người dùng.

V. Case Study Dự án React và

Đồ án tốt nghiệp "Website chia sẻ kiến thức học tập sử dụng ReactJS và ASP.NET Core" là một minh chứng thực tiễn xuất sắc về việc ứng dụng hai công nghệ này vào xây dựng một sản phẩm hoàn chỉnh. Dự án đã thành công trong việc tạo ra một nền tảng cho phép sinh viên đặt câu hỏi, tham gia thảo luận, tìm kiếm tài liệu ASP.NET Core, đề thi và các tài liệu học tập khác. Phía lập trình front-end, ứng dụng ReactJS được xây dựng với các component chức năng, sử dụng React Hooks để quản lý trạng thái cục bộ và React Router để điều hướng. Giao diện được thiết kế trực quan, dễ sử dụng, tập trung vào trải nghiệm người dùng. Phía lập trình back-end, hệ thống RESTful API được xây dựng bằng ASP.NET Core và lập trình C# .NET. Entity Framework Core được dùng để tương tác với cơ sở dữ liệu SQL Server, quản lý thông tin người dùng, bài đăng, tài liệu. Chức năng bảo mật được đảm bảo thông qua cơ chế JWT Authentication, mỗi yêu cầu đến API đều được xác thực để bảo vệ tài nguyên hệ thống. Dự án này không chỉ thể hiện kỹ năng kỹ thuật mà còn cho thấy khả năng phân tích và giải quyết một vấn đề thực tế trong môi trường giáo dục, tạo ra một công cụ hữu ích cho cộng đồng sinh viên.

5.1. Phân tích các chức năng chính của website học tập

Website cung cấp hai vai trò chính: người dùng (thành viên) và quản trị viên. Đối với thành viên, các chức năng bao gồm đăng ký, đăng nhập, quản lý thông tin cá nhân, tạo và thảo luận câu hỏi. Một tính năng quan trọng là khả năng theo dõi câu hỏi và xác nhận câu trả lời chính xác nhất. Chức năng tìm kiếm cho phép người dùng dễ dàng truy cập vào các hướng dẫn ReactJS hoặc tài liệu môn học cụ thể. Đối với quản trị viên, hệ thống cung cấp một trang dashboard để quản lý toàn bộ nội dung: quản lý tài khoản, môn học, tài liệu, đề thi, và xử lý các báo cáo vi phạm. Các chức năng thống kê giúp quản trị viên theo dõi hoạt động của website. Lược đồ use-case và thiết kế cơ sở dữ liệu chi tiết trong đồ án cho thấy sự phân tích yêu cầu kỹ lưỡng, đảm bảo hệ thống hoạt động một cách logic và hiệu quả.

5.2. Đánh giá kết quả và ý nghĩa thực tiễn của dự án

Kết quả của dự án là một blog lập trình và chia sẻ kiến thức hoạt động đầy đủ chức năng, đáp ứng được các mục tiêu đề ra. Việc xây dựng thành công dự án React và .NET Core này mang lại ý nghĩa thực tiễn to lớn. Nó cung cấp một môi trường học tập cộng tác, giúp nâng cao khả năng tự học của sinh viên. Sinh viên có thể dễ dàng tìm kiếm tài liệu ASP.NET Core, đặt câu hỏi và nhận được sự giúp đỡ từ cộng đồng. Đối với nhà trường, đây là một công cụ để quản lý tài nguyên học tập và đánh giá chất lượng học tập của sinh viên. Về mặt kỹ thuật, dự án là một tài liệu tham khảo quý giá cho những ai muốn theo đuổi lộ trình học full-stack, cung cấp một ví dụ thực tế về cách tích hợp ReactJS và ASP.NET Core.

Trích đoạn nội dung tài liệu

CHƯƠNG 1. React JS là gì? React JS là một thư viện JavaScript với mã nguồn mở được phát triển bởi Facebook, ra mắt vào năm 2013, nó cho phép xây dựng giao diện người dùng (UI) từ những đoạn code nhỏ và độc lập gọi là “components”. Đây là một thư viện rất phổ biến hiện nay giúp cho các lập trình viên xây dựng UI một cách hiệu quả và linh hoạt [3]. Ưu điểm của React JS: - Tạo ra các component độc lập và có thể được gọi để tái sử dụng trong project đó.

Trong React việc xây dựng giao diện người dùng dựa trên việc kết hợp các components lại với nhau giúp việc lập trình trở nên nhanh chóng. - React JS giúp cải thiện hiệu suất rất nhiều bằng cách sử dụng Virtual DOM. Reactjs cũng tính toán những thay đổi nào cần cập nhật lên DOM và chỉ thực hiện chúng bằng việc sử dụng một thuật toán thông minh để tạo lại các thành phần khác biệt giữa cây mới và cây cũ. Bởi vì cả hai cây HTML cũ và mới đều được lưu trong bộ nhớ, Điều này giúp Reactjs tránh những thao tác không cần thiết trên DOM [1].

- Dễ dàng trong việc chia phân công chia các task, chia màn hình ứng dụng đơn giản. Mỗi người sẽ được đảm nhiệm làm một component riêng biệt sẽ không làm ả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 này hoàn thiện và được kết nối hoàn chỉnh nếu có xảy ra những sai sót hoặc hoặc cần nâng cấp, bảo trì sẽ dễ dàng biết cách tách nhỏ từng component để sửa chữa và phát triển. Một số khái niệm liên quan đến React JS 1.

Components 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. 4 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. Components được sử dụng để nói cho React biết ta muốn hiển thị gì trên màn hình. Khi thay đổi dữ liệu, React sẽ cập nhật và render lại cho các component 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.1: Component trong React JS Function Component: Function Component là một pure function để được dùng để khai báo một component. Ban đầu function component chỉ được sử dụng để viết các component với mục đích render các đoạn HTML. Nhưng với các component theo hướng này thì sẽ không can thiệp vào lifecycle của component. Do đó nó thường được biết đến với tên gọi là Stateless Component [1].

Class Component: Để tạo một class component ta phải khai báo một class javascript và cho extends React. Trong class component đó phải dùng hàm render và lệnh return () là phải có để xuất dữ liệu. Sau đó sử dụng export để có thể dễ dàng gọi và tái sử dụng component [1]. Một component nhận vào các đối số truyền vào gọi là props, và trả về một hệ thống cấp bậc các view để hiển thị thông qua phương thức render.

Phương thức render sẽ trả về những gì chúng ta muốn thấy trên màn hình. React sẽ nhận mô tả và hiển thị kết quả. Props Props là từ viết tắt của properties là một object được truyền vào trong một components, mỗi components sẽ nhận vào props và trả về react element. Props là cách để các component có thể nhận được các giá trị của thuộc tính truyền vào từ bên ngoài vào và giao tiếp giữa các components với nhau bằng cách truyền tham số qua lại giữa các components.

Khi một components cha truyền cho components con một props thì components con chỉ có thể đọc và sử dụng chứ không thể chỉnh sửa nó bên phía components cha. Cách truyền props cũng giống như cách thêm một attributes cho một element HTML [1]. Cú pháp như sau: Hình 1.2: Cú pháp props trong Class Component và Function Component Truyền dữ liệu thông qua Props: Ví dụ khi truyền dữ liệu từ Component cha xuống Component con. Trong phương thức renderName của Component cha ta truyền vào props value xuống Component con.

Trong phương thức render của Component con ta sử dụng props đã truyền ở trên để hiển thị giá trị được truyền vào bằng {this. State State là thành phần của component, nó là một object được sử dụng để chứa dữ liệu hoặc thông tin về components. Khác với props chúng ta có thể truyền props từ component này sang các components khác nhau thì state chỉ tồn tại trong phạm vi của components chứa nó. State có thể được cập nhật thay đổi bất cứ khi nào bằng setState.

Mỗi khi state được cập nhật thì components đó sẽ được re-render lại. Trong một dự án React JS, state được dùng để phản hồi các yêu cầu từ người dùng, cập nhật trạng thái giao diện hay lưu trữ một dữ liệu nào đó trong components. 6 Sự khác nhau giữa Props và State: Bảng 1.1: Bảng so sánh giữa Props và State Props State Có thể nhận giá trị ban đầu từ component cha Có Có Có thể thay đổi bởi component cha Có Không Có thể set giá trị mặc định bên trong component Có Có Có thể thay đổi, cập nhật bên trong component Không Có Có thể set giá trị ban đầu cho các component con Có Có Có thể thay đổi trong các component con Có Không 1. Sơ lược về ngôn ngữ C# C# (hay C sharp) là một ngôn ngữ lập trình thuần hướng đối tượng được phát triển bởi Microsoft.

C# được ra đời vào năm 2000, được thiết kế chủ yếu bởi Anders Hejlsberg – một kiến trúc sư phần mềm nổi tiếng với các sản phẩm như Turbo Pascal, Delphi [4]. Được xây dựng và phát triển dựa trên nền tảng của 2 ngôn ngữ lập trình là C++ và Java. Do đó C# được xem tả là ngôn ngữ có sự cân bằng giữa C++, Visual Basic, Delphi và Java [5]. C# với sự hỗ trợ mạnh mẽ của .NET Framework giúp cho việc tạo một ứng dụng Windows Forms hay WPS (Windows Presentation Foundation) trở nên rất dễ dàng.

Đặc trưng của ngôn ngữ C# C# là một ngôn ngữ rất đơn giản, với khoảng 80 từ khóa và hơn 10 kiểu dữ liệu dựng sẵn, nhưng C# có tính diễn đạt cao. C# hỗ trợ lập trình có cấu trúc, hướng đối tượng, hướng thành phần. Trọng tâm của ngôn ngữ hướng đối tượng là lớp. Lớp định nghĩa kiểu dữ liệu mới, cho phép mở rộng ngôn ngữ theo hướng cần giải quyết.

C# có những từ khóa dành cho việc khai báo lớp, phương thức, thuộc tính mới. C# hỗ trợ đầy đủ khái niệm trụ cột trong lập trình hướng đối tượng như đóng gói, thừa kế, đa hình, trừu tượng. 7 C# hỗ trợ khái niệm giao diện interfaces (tương tự Java). Một lớp chỉ có thể kế thừa duy nhất một lớp cha nhưng có thể cài đặt nhiều giao diện.

C# cũng cho truy cập trực tiếp bộ nhớ dùng con trỏ kiểu C++, nhưng vùng mã đó được xem như không an toàn. CLR sẽ không thực thi việc thu dọn rác tự động các đối tượng được tham chiếu bởi con trỏ cho đến khi lập trình viên tự giải phóng. Định nghĩa lớp trong C# không đòi hỏi tách rời tập tin tiêu đề với tập tin cài đặt như C++. Hơn thế C# hỗ trợ kiểu sưu liệu mới, cho phép sưu liệu trực tiếp trong tập tin mã nguồn.

Đến khi biên dịch sẽ tạo tập tin sưu liệu theo định dạng XML. C# là một ngôn ngữ khá mạnh có tính tương tác với cơ sở dữ liệu nên được sử dụng khá rộng rãi trong việc triển khai các ứng dụng phần mềm, chương trình quản lý và nhiều ứng dụng khác [5]. Ưu điểm của C# - Là một trong số những ngôn ngữ thuần hướng đối tượng. - Gần gũi, dễ học với các ngôn ngữ lập trình thông dụng như C++, Java, Pascal.

- Thường được sử dụng để lập trình Windows, thiết kế winform đơn giản và dễ hiểu. - Tương tác với Database dễ dàng.NET nhẹ, miễn phí, hỗ trợ nhiều phương thức, chức năng. - Là ngôn ngữ mã nguồn mở giúp dễ dàng tìm hiểu, trao đổi. - Code/Build trên Visual Studio, một IDE mạnh mẽ, phổ biến của Microsoft giúp build và debug tiện lợi.

- Có thể được dùng để lập trình web thông qua C# thuần hoặc ASP. Nhược điểm của C# - C# là chỉ chạy trên nền Windows và có cài. - Thao tác đối với phần cứng yếu hơn so với ngôn ngữ khác, hầu hết phải dựa vào windows. - Sử dụng Database chỉ tiện lợi nhất với SQL Server [7].NET Khi Microsoft công bố C# vào tháng 7/2000, việc khánh thành nó chỉ là một phần trong số rất nhiều sự kiện nền tảng .NET được công bố.NET là bộ khung phát triển ứng dụng mới, nó cung cấp một giao diện lập trình ứng dụng (Application Programming Interface – API) mới mẽ cho các dịch vụ và hệ điều hành Windows, cụ thể là Windows 2000, nó cũng mang lại nhiều kỹ thuật khác nổi bật của Microsoft suốt từ những năm 90.

Trong số đó có các dịch vụ COM+, công nghệ ASP, XML và thiết kế hướng đối tượng, hỗ trợ các giao thức dịch vụ web mới như SOAP, WSDL và UDDL với trọng tâm là Internet, tất cả được tích hợp trong kiến trúc DNA [8].NET bao gồm 4 nhóm sau: 1. Một là tập các ngôn ngữ bao gồm C# và Visual Basic .NET; một tập các công cụ phát triển bao gồm Visual Studio .NET; một tập đầy đủ các thư viện phục vụ cho việc xây dựng các ứng dụng web, các dịch vụ web và ứng dụng Windows; còn có CLR – Common Language Runtime: (ngôn ngữ thực thi dùng chung) để thực thi các đối tượng được xây dựng trên bộ khung này. Một tập các Server Xí nghiệp .NET như SQL Server 2000, Exchange 2000, BizTalk 2000, chúng cung cấp các chức năng cho việc lưu trữ dữ liệu quan hệ, thư điện tử, thương mại điện tử. Các dịch vụ web thương mại điện tử; nhà phát triển có thể dùng các dịch vụ này để xây dựng các ứng dụng đòi hỏi tri thức về định danh người dùng.NET cho các thiết bị không phải PC như điện thoại, thiết bị game.NET Core là gì? ASP.NET Core là một web framework mã nguồn và được tối ưu hóa cho cloud để phát triển các ứng dụng web chạy trên nhiều nền tảng như Windows, Linux và Mac.

Hiện tại, nó bao gồm MVC framework được kết hợp các tính năng của MVC và Web API thành một web framework duy nhất. Các ứng dụng ASP.NET Core có thể chạy trên .NET Core hoặc trên .NET Framework hoàn chỉnh. 9 Nó đã được thiết kế để cung cấp một framework tối ưu cho các ứng dụng để triển khai tới cloud hoặc chạy on-premises. Nó bao gồm những modular với các thành phần tối thiểu, do đó bạn giữ được tính linh hoạt trong quá trình xây dựng các giải pháp của mình.