Cài Đặt, tính năng nổi bật, giấy phép phần mềm mã nguồn mở Được áp dụng trong reactjs, so sánh với các framework khác tạo một website cơ bản với reactjs

Thành viên Công việcMai Thị Dinh Cài đặt ReactJS và cách tạo project Phạm Duy Đạt Một số tính năng nổi bật của ReactJS Nguyễn Thị Phương Tổng quan về ReactJS, các loại giấy phép áp dụng,

TRƯỜNG ĐẠI HỌC MỞ HÀ NỘI

KHOA CÔNG NGHỆ THÔNG TIN

-BÁO CÁO BÀI TẬP LỚN

PHẦN MỀM TỰ DO MÃ NGUỒN MỞ

ĐỀ TÀI: TÌM HIỂU VỀ REACTJS CÀI ĐẶT, TÍNH NĂNG NỔI BẬT, GIẤY PHÉP PHẦN MỀM MÃ NGUỒN MỞ ĐƯỢC ÁP DỤNG TRONG REACTJS, SO SÁNH VỚI CÁC FRAMEWORK KHÁC TẠO MỘT WEBSITE

CƠ BẢN VỚI REACTJS

Giảng viên hướng dẫn: Trần Tiến Dũng Nhóm/ Sinh viên thực hiện:

Mai Thị Dinh - 2010A03 Phạm Duy Đạt - 2010A04 Nguyễn Thị Phương - 2010A04 Nguyễn Thị Tình - 2010A04

Hà Nội – 2023

Phân chia công việc

Thành viên Công việc

Mai Thị Dinh Cài đặt ReactJS và cách tạo project

Phạm Duy Đạt Một số tính năng nổi bật của ReactJS Nguyễn Thị Phương Tổng quan về ReactJS, các loại giấy phép áp

dụng, demo website Nguyễn Thị Tình So sánh ReactJS với các framework khác

Mục lục

I Giới thiệu tổng quan về ReactJS và các loại giấy phép mã nguồn mở được áp

dụng 1

1 Tổng quan về ReactJS 1

2 Các loại giấy phép mã nguồn mở được áp dụng 2

II Một số tính năng nổi bật của ReactJS 3

1 JSX(JavaScript XML) 3

2 Components 3

3 State và Props 3

4 One-way data binding 3

5 Virtual DOM 3

6 Ecosystem 3

7 Công cụ phát triển 4

8 Khả năng tối ưu hiệu suất 4

III So sánh ReactJS với các framework khác 4

1 Sự giống và khác nhau giữa ReactJS với AngularJS và VueJS 4

2 Ưu điểm và nhược điểm so với các framework khác 7

IV Cài đặt ReactJS và cách tạo project 9

1 Cài đặt Node.js trên Ubuntu bằng Node Version Manager 9

2 Cách cài đặt React.js 11

3 Tạo ứng dụng React đầu tiên 12

V Demo website cơ bản với ReactJS 15

VI Tài liệu tham khảo 17

I Giới thiệu tổng quan về ReactJS và các loại giấy phép mã nguồn mở được áp dụng

1 Tổng quan về ReactJS

ReactJS là một thư viện JavaScript mã nguồn mở Phát triển bởi Jordan Walke nhân viên của Facebook vào năm 2013 Sau đó React được phát triển

và maintain bởi Meta (Facebook lúc bấy giờ)

Sử dụng để xây dựng giao diện người dùng (UI) tương tác trong ứng dụng web, giúp xây dựng các thành phần giao diện độc lập và tái sử dụng được trong các ứng dụng phức tạp

Quy trình để sử dụng ReactJS trong việc phát triển ứng dụng bao gồm:

 Thiết kế giao diện: (để thiết kế được giao diện ta cần xác định các

thành phần và cấu trúc của chúng) ReactJS sử dụng cú pháp JSX (JavaScript XML) để định nghĩa các thành phần UI

 Tạo các thành phần UI: (ta cần tạo các thành phần UI độc lập và tái sử

dụng được) Với mỗi thành phần sẽ có logic riêng và có thể nhận dữ liệu đầu vào để hiển thị tương tác với người dùng

 Quản lý trạng thái: ReactJS cung cấp một cách để quản lý trạng thái

của ứng dụng thông qua các đối tượng state Người dùng có thể sử dụng state để lưu giữ và theo dõi dữ liệu thay đổi trong thành phần và cập nhật giao diện người dùng tương ứng

 Xử lý sự kiện và tương tác người dùng: Người dùng có thể xử lý các

sự kiện và tương tác người dùng trong ReactJS bằng cách gắn các hàm

xử lý sự kiện vào các thành phần Khi người dùng tương tác với các thành phần, các hàm xử lý sự kiện sẽ được gọi và có thể cập nhật trạng thái và giao diện người dùng

 Render giao diện: Sử dụng ReactJS, giao diện người dùng sẽ được

render bằng cách sử dụng ReactDOM.render() để đưa các thành phần vào trong cây DOM thực tế

 Tương tác với dữ liệu và API: ReactJS không cung cấp một cơ chế

tương tác với cơ sở dữ liệu hoặc API mặc định Người dùng có thể sử dụng các thư viện như Axios hoặc Fetch để gửi yêu cầu HTTP và lấy dữ liệu từ API hoặc cơ sở dữ liệu

 Cấu trúc và quản lý dự án: Trong quá trình phát triển ứng dụng

ReactJS, cần tổ chức mã nguồn và quản lý dự án một cách cẩn thận

Người dùng có thể sử dụng các công cụ như Create React App hoặc webpack để cấu trúc dự án và xây dựng môi trường phát triển tốt hơn

2 Các loại giấy phép mã nguồn mở được áp dụng

Tháng 5 năm 2013 bản phát hành công khai đầu tiên của React đã sử dụng giấy phép Apache 2.0

Tháng 10 năm 2014, React 0.12.00 đã thay thế giấy phép Apache bằng giấy phép BSD 3 điều khoản (the 3-clause BSD License) và thêm tệp PATERNS riêng cho phép sử dụng bất kì bằng sáng chế nào của Facebook liên quan đến phần mềm

Điều khoản này đã gây ra một số tranh cãi trong cộng đồng người dùng React bởi vì nó có thể được hiểu là trao quyền cho Facebook thu hồi giấy phép trong nhiều tình huống

Dựa trên phản hồi của cộng đồng, Facebook đã cập nhật việc cấp bằng sáng chế vào tháng 4 năm 2015 để ít mơ hồ hơn và dễ dãi hơn

Tổ chức Phần mềm Apache coi thỏa thuận cấp phép này không tương thích

với các chính sách cấp phép của nó, vì nó: “gây rủi ro cho người dùng cuối

về phần mềm”, “mất cân bằng có lợi cho người cấp phép chứ không phải người được cấp phép”.

Vào tháng 8 năm 2017, Facebook đã bác bỏ những lo ngại về hạ nguồn của Apache và từ chối xem xét lại giấy phép

Vào ngày 23 tháng 9 năm 2017, Facebook thông báo rằng họ sẽ cấp lại giấy phép cho React theo Giấy phép MIT tiêu chuẩn

Vào ngày 26 tháng 9 năm 2017, React 16.0.0 được phát hành với giấy phép MIT Thay đổi giấy phép MIT cũng đã được chuyển sang dòng phát hành 15.x với React 15.6.2

Mở rộng:

Một số gói trong hệ sinh thái React sử dụng Giấy phép ISC (Internet Systems Consortium) tương tự như Giấy phép MIT cho phép người dùng tự

do sử dụng, sửa đổi và phân phối phần mềm

Một số gói sử dụng giấy phép ISC là: scripts, prop-types, react-router, react-helmet, react-modal

II Một số tính năng nổi bật của ReactJS

1 JSX(JavaScript XML)

Là sự kết hợp giữa HTML và JavaScript, viết mã HTML bên trong mã JavaScript làm cho mã trở nên dễ dàng và dễ hiểu

JSX tối ưu hóa code khi biên soạn, vì vậy nó chạy nhanh hơn so với code JavaScript tương đương

Ví dụ: const name = ‘Dat’

const text = <h1>Hello {name}</h1>

2 Components

React được xây dựng xung quanh các component, chúng có thể sử dụng ở nhiều nơi với các trạng thái, thuộc tính khác nhau Trong một component lại

có thể chứa các component

3 State và Props

ReactJS cho phép quản lý trạng thái của các thành phần UI thông qua State

và Props State là trạng thái của một thành phần được quản lý bởi nó chính, trong khi Props là các giá trị được truyền vào từ bên ngoài để tùy chỉnh hoặc điều khiển hành vi của một thành phần

4 One-way data binding

Luồng dữ liệu một chiều từ component cha xuống component con thông qua props giúp dễ dàng theo dõi và dự đoán dữ liệu của ứng dụng

5 Virtual DOM

Virtual DOM là phiên bản nhẹ của Real DOM Khi có sửa đổi trong ứng dụng web, Virtual DOM sẽ cập nhật và tìm ra sự khác biệt Virtual DOM và Real DOM Real DOM chỉ cập nhật phần đã thay đổi đó thay vì thay đổi tất

cả Điều này giúp tăng tốc độ và hiệu suất ứng dụng

6 Ecosystem

Được phát triển bởi ông lớn Facebook do đó có hệ sinh thái phong phú với nhiều thư viện và công cụ hỗ trợ như: React Native cho việc phát triển ứng dụng di động, Redux cho quản lý trạng thái và nhiều thư viện UI khác nhau

7 Công cụ phát triển

ReactJS được hỗ trợ bởi nhiều công cụ phát triển mạnh mẽ như React Developer Tools, Redux DevTools và nhiều công cụ kiểm thử và gỡ lỗi khác Điều này giúp dễ dàng theo dõi và gỡ lỗi ứng dụng

8 Khả năng tối ưu hiệu suất

React cung cấp nhiều cách để tối ưu hiệu suất ứng dụng, bao gồm sử dụng Virtual DOM, PureComponent, memoization, lazy loading,

III So sánh ReactJS với các framework khác

1 Sự giống và khác nhau giữa ReactJS với AngularJS và VueJS

Giống nhau:

 Có khả năng tương thích với các công cụ và thư viện bên thứ ba

 Hỗ trợ phát triển ứng dụng đơn trang (SinglePage Applications -SPAs), cho phép tạo ra các trang web có trải nghiệm người dùng mượt

mà và tương tác tốt

 Hỗ trợ việc phân chia ứng dụng thành các thành phần độc lập, giúp tăng tính tổ chức và khả năng tái sử dụng mã nguồn

 Có cộng đồng phát triển mạnh mẽ và tài liệu phong phú

Khác nhau:

Đội ngũ phát

triển

Phát triển bởi

Angular Team của

Google ra mắt vào

2010

Phát triển bởi Jordan Walke nhân viên của Facebook ra mắt vào năm 2013

Phát triển bởi Evan You (đã từng làm việc tại Google và từng làm việc trên AngularJS) Ra mắt vào năm 2014 Kích thước Kích thước lớn hơn

ReactJS do tích hợp

nhiều tính năng và

thư viện

Kích thước nhẹ

và tập trung vào việc xây dựng giao diện người dùng

Kích thước nhỏ hơn ReactJS

Cấu trúc ứng Theo mô hình MVC Sử dụng mô hình Thường sử dụng

dụng

(Model-View-Controller), yêu cầu

tuân thủ một cấu trúc

cụ thể với các khái

niệm như Modules,

Services, Controllers

và Templates

cấu trúc

"Component-Based Architecture"

(Kiến trúc dựa trên thành phần - component)

mô hình cấu trúc Single File Component (SFC)

Kiến trúc Cũng tập trung vào

việc xây dựng các

thành phần tái sử

dụng

Tập trung vào việc xây dựng các thành phần tái sử dụng

Đặt nặng vào sự kết hợp giữa thành phần và trạng thái (state) Cách tiếp cận Một framework

JavaScript toàn diện

cung cấp nhiều tính

năng như quản lý

trạng thái, định tuyến

(routing) và giao tiếp

với API

Một thư viện JavaScript tập trung vào việc xây dựng giao diện người dùng

Một framework JavaScript tập trung vào việc kết hợp thành phần

và trạng thái (component-based và reactive)

Quản lý trạng

thái

Cung cấp một hệ

thống quản lý trạng

thái tích hợp sẵn

thông qua việc sử

dụng Scope và các

tính năng khác như

two-way data

binding

Được thực hiện bằng cách sử dụng các đối tượng state và props ReactJS không cung cấp một hệ thống quản lý trạng thái được tích hợp sẵn, nhưng có thể

sử dụng các thư viện bên thứ ba như Redux hoặc MobX để quản lý trạng thái một cách mạnh mẽ

Cung cấp một cơ chế quản lý trạng thái đơn giản và hiệu quả thông qua thư viện Vuex

Cú pháp Sử dụng cú pháp

riêng gọi là directives

và template để quy

định cấu trúc giao

Sử dụng JSX (JavaScript XML), một cú pháp mở rộng của

Sử dụng cú pháp Template dựa trên HTML Template của

diện Cú pháp của

AngularJS thường

dựa trên các thuộc

tính và các thẻ

HTML được mở rộng

JavaScript để mô

tả giao diện người dùng JSX kết hợp mã JavaScript và mã HTML trong một tệp tin duy nhất

Vue.js tách biệt giữa mã JavaScript và HTML

Hiệu suất và

tốc độ: Tuy cả

3 đều có hiệu

suất tốt nhưng

do cách tiếp

cận khác nhau

trong việc cập

nhật giao diện

có thể ảnh

hưởng đến

hiệu suất

Hiệu suất tốt và tốc

độ render ổn định sử

dụng một cơ chế gọi

là two-way data

binding để theo dõi

và cập nhật giao diện

tự động, điều này có

thể ảnh hưởng đến

hiệu suất khi có

nhiều dữ liệu và trạng

thái phức tạp

Hiệu suất tốt và tốc độ render nhanh nhờ sử dụng Virtual DOM, một bản sao ảo của DOM,

để so sánh và cập nhật chỉ những phần của giao diện thực sự thay đổi

sử dụng Virtual DOM để cải thiện hiệu suất bằng cách cập nhật chỉ những phần thay đổi của giao diện người dùng

Hiệu suất tương đối cao và tốc độ render nhanh, sử dụng cả Virtual DOM và phương pháp cập nhật dựa trên trạng thái (state) của các thành phần Vue.js có khả năng theo dõi và cập nhật trạng thái tự động, giúp đơn giản hóa quản lý trạng thái của ứng dụng

Hệ sinh thái Hệ sinh thái mạnh

mẽ với nhiều thư

viện và công cụ được

cung cấp bởi cộng

đồng Angularjs Các

thư viện và công cụ

phổ biến bao gồm

RxJS (xử lý bất đồng

bộ), Angular Material

(thư viện UI), ngRx

(quản lý trạng thái),

Angular Router (định

tuyến), và nhiều thư

viện khác

Hệ sinh thái phát triển rất phong phú, với nhiều thư viện và công

cụ bên thứ ba như Redux (quản lý trạng thái), React Router (định tuyến), Axios (gọi API), Styled Components (CSS trong JS),

và nhiều thư viện khác

Hệ sinh thái đáng

kể, nhưng thường nhỏ gọn hơn và tập trung vào các giải pháp tích hợp sẵn như Vuex (quản lý trạng thái), Vue Router (định tuyến), Axios (gọi API), Vuetify (thư viện UI), và nhiều thư viện khác

Khả năng hỗ Không cung cấp một Có thể được sử Không cung cấp

trợ di động giải pháp tương tự

cho phát triển di

động

dụng để phát triển ứng dụng di động thông qua React Native, một framework phát triển ứng dụng di động đa nền tảng

một giải pháp tương tự cho phát triển di động

Quy mô ứng

dụng

Được thiết kế cho

việc xây dựng các

ứng dụng lớn và

phức tạp Nó có một

cấu trúc mạnh mẽ,

đặt nhiều quy ước và

giúp đảm bảo tính

nhất quán và dễ bảo

trì cho các ứng dụng

lớn

Thích hợp cho cả ứng dụng nhỏ và lớn Nó không có nhiều quy ước cấu trúc mạnh

mẽ, cho phép phát triển theo phong cách cá nhân hoặc sử dụng các thư viện

và công cụ phụ trợ bên thứ ba để xây dựng các ứng dụng lớn và phức tạp

Rất linh hoạt và thích hợp cho các ứng dụng từ nhỏ đến trung bình

Nó có cấu trúc rõ ràng và dễ hiểu, giúp dễ dàng mở rộng và bảo trì các ứng dụng lớn hơn

2 Ưu điểm và nhược điểm so với các framework khác

Ưu điểm:

 Hiệu suất cao: ReactJS sử dụng cơ chế Virtual DOM, giúp cải thiện hiệu

suất bằng cách cập nhật chỉ những phần thay đổi trong DOM Điều này giúp tăng tốc độ hiển thị và giảm tải cho trình duyệt

 Tích hợp dễ dàng: ReactJS có khả năng tích hợp tốt với các thư viện và

framework khác Ta có thể sử dụng ReactJS trong các dự án có sẵn hoặc kết hợp nó với các công nghệ khác như Redux để quản lý trạng thái ứng dụng Điều này giúp tái sử dụng mã nguồn và tăng tính mở rộng của dự án

 Cú pháp linh hoạt: ReactJS sử dụng JSX, một cú pháp kết hợp giữa

JavaScript và HTML JSX giúp tạo ra mã nguồn dễ đọc, dễ hiểu và dễ bảo trì Nó cung cấp khả năng viết mã gọn gàng và linh hoạt hơn so với

việc tạo ra giao diện bằng cách kết hợp JavaScript và HTML thông thường

 Cộng đồng lớn: ReactJS có một cộng đồng phát triển rất lớn và tích cực

Điều này đồng nghĩa với việc có nhiều tài liệu, ví dụ, thư viện hỗ trợ và giải pháp được chia sẻ từ các thành viên trong cộng đồng Ta có thể tìm thấy rất nhiều tài nguyên và hỗ trợ trong quá trình phát triển ứng dụng

 Hỗ trợ SEO tốt: ReactJS cung cấp khả năng xử lý trước phía máy chủ

(Server-side Rendering - SSR) và phía máy khách (Client-side Rendering

- CSR) Điều này giúp tăng khả năng tìm kiếm và tối ưu hóa công cụ tìm kiếm (SEO) cho ứng dụng web

 Công cụ phát triển mạnh mẽ: ReactJS được hỗ trợ bởi nhiều công cụ

phát triển mạnh mẽ như React Developer Tools, Redux DevTools và nhiều công cụ kiểm thử và gỡ lỗi khác Điều này giúp dễ dàng theo dõi và

gỡ lỗi ứng dụng

Nhược điểm:

 Khả năng quản lý trạng thái phức tạp: ReactJS không cung cấp giải

pháp quản lý trạng thái nội bộ mặc định Điều này có nghĩa là khi ứng dụng phát triển và trở nên phức tạp, ta cần sử dụng thư viện bên ngoài như Redux hoặc MobX để quản lý trạng thái Việc này có thể làm cho quá trình phát triển và bảo trì ứng dụng phức tạp hơn

 Quá trình phát triển tốn kém: Mặc dù ReactJS có một cộng đồng phát

triển lớn và nhiều tài liệu hỗ trợ nhưng việc phát triển ứng dụng ReactJS

có thể tốn kém hơn so với một số framework khác Điều này có thể do việc phải xây dựng và cấu hình các thư viện bổ sung, thiết lập môi trường phát triển và tìm hiểu các quy ước và mẫu thiết kế của ReactJS

 Tương thích ngược: ReactJS có một số phiên bản và cập nhật mới, đôi

khi có thể gây ra xung đột và vấn đề tương thích ngược khi nâng cấp từ phiên bản cũ lên phiên bản mới Điều này đòi hỏi sự quan tâm đặc biệt khi thực hiện các bản cập nhật trong dự án ReactJS

 Hạn chế trong ứng dụng di động: Mặc dù React Native, một phiên bản

của ReactJS, được sử dụng để phát triển ứng dụng di động, nhưng so với các framework khác như Flutter hoặc NativeScript, React Native có thể

có một số hạn chế về hiệu suất và khả năng truy cập vào các tính năng di động nâng cao