Phát triển phần mềm mã nguồn mở Đề tài reactjs

Khái niệm ReactJS Ngày nay, các framework và thư viện front-end đang trở thành mộtphần thiết yếu trong quá trình phát triển web hiện đại, và React.js là mộtthư viện front-end đã dần trở

TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI

KHOA CÔNG NGHỆ THÔNG TIN

MÔN: PHÁT TRIỂN PHẦN MỀM MÃ NGUỒN MỞ

ĐỀ TÀI: REACTJS

Giảng viên hướng dẫn : TS Nguyễn Trọng Phúc

: Âu Đức Ngà (211204317) : Nguyễn Tiến Hoàng(211201040)

Hà Nội, tháng 9 năm 2024

Mục Lục

PHẦN I: REACTJS LÀ GÌ? 2

1 Khái niệm ReactJS 2

2 Lịch sử ra đời và phát triển của ReactJS Nguyên nhân ra đời 3

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

3 Một số phiên bản của ReactJS 4

PHẦN 2: TẠI SAO NÊN SỬ DỤNG REACTJS? 7

1 Các công nghệ khác 7

a) AngularJS 7

b) Vue.js 7

c) Svelte 8

d) jQuery 8

e) Ember 8

3 Lí do tại sao nên sử dụng ReactJS 12

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

- JSX: 12

- Virtual DOM: 13

- Components and Props: 14

- State Management: 15

- Programmatic Navigation: 15

b Ưu điểm 16

- Tái sử dụng lại code: 16

- Viết component dễ dàng hơn: 16

- Hiệu suất cao: 17

- Thân thiện với SEO (search engine optimization): 17

c Nhược điểm 17

Phần 3: DEMO 18

1 Largest Contentful Paint (LCP) 18

a, Render items 18

b, Tải ảnh 19

2 Hiệu suất và SEO 21

a, Render items 21

b, Load image 22

Kết luận: 22

TÀI LIỆU THAM KHẢO 24

PHẦN I: REACTJS LÀ GÌ?

1. Khái niệm ReactJS

Ngày nay, các framework và thư viện front-end đang trở thành mộtphần thiết yếu trong quá trình phát triển web hiện đại, và React.js là mộtthư viện front-end đã dần trở thành framework phù hợp để phát triển webhiện đại trong cộng đồng JavaScript ReactJS được hiểu nôm na là mộtthư viện mã nguồn mở và người tạo ra ReactJS chính là ông trùm với cáitên quen thuộc Facebook, được ra đời vào năm 2013 Mục đích của việctạo ReactJS là tạo ra các ứng dụng web nhanh, hiệu quả và hấp dẫn với

nỗ lực viết mã tối thiểu Mục tiêu chính của ReactJS là bất kỳ trang webnào sử dụng ReactJS phải mượt mà, nhanh chóng, khả năng mở rộng cao

và dễ thực hiện

Nhìn chung, các tính năng và điểm mạnh của ReactJS thường đến

từ việc tập trung vào các phần riêng lẻ Do đó, khi làm việc với web thay

vì toàn bộ ứng dụng của một trang web bằng ReactJS, các nhà phát triểntính năng có thể tách rời và chuyển đổi giao diện người dùng từ nhữngcách phức tạp và biến nó thành những phần đơn giản hơn Điều này cónghĩa là kết xuất dữ liệu không chỉ ở phía máy chủ Thực hiện với các vị

trí, nhưng bạn cũng có thể thực hiện tại vị trí khách hàng khi sử dụngReactJS.

2. Lịch sử ra đời và phát triển của ReactJS Nguyên nhân

ra đời

ReactJS ra đời nhằm giải quyết các vấn đề về quản lý trạng tháigiao diện người dùng trong ứng dụng web phức tạp Trong quá khứ, việccập nhật DOM (Document Object Model) của trang web có thể trở nênrất chậm và không hiệu quả khi ứng dụng có nhiều thành phần phức tạpcần cập nhật

Lịch sử phát triển

Năm 2011: Ý tưởng ban đầu của React bắt đầu phát triển bởiJordan Walke, một kỹ sư tại Facebook Jordan Walke đã tạo ra FaxJS ,nguyên mẫu ban đầu của React – đưa một phần tử tìm kiếm lênFacebook

Năm 2012:

- Quảng cáo Facebook trở nên khó quản lý nên Facebook cầnđưa ra giải pháp tốt cho vấn đề này Jordan Walke đã làmviệc trên nguyên mẫu và tạo ra React

- Ngày 9 tháng 4: Instagram được Facebook mua lại

- Instagram muốn áp dụng công nghệ mới của Facebook Bằngcách này, Facebook đã gặp áp lực phải tách React khỏiFacebook và biến nó thành nguồn mở Phần lớn việc nàyđược thực hiện bởi Pete Hunt

- 8-12 tháng 9: Mark Zuckerberg: “Sai lầm lớn nhất của chúngtôi là đặt cược quá nhiều vào HTML5” Ông hứa rằngFacebook sẽ sớm mang lại trải nghiệm di động tốt hơn

Năm 2013: React được công bố lần đầu tiên tại một hội nghị F8

của Facebook Điều này đã tạo ra sự quan tâm lớn đối với cộng đồng

phát triển web

Năm 2014: React dần dần nhận được sự chấp nhận và ổn địnhtrong cộng đồng lớn hơn Các tập đoàn lớn bắt đầu chú ý đến ngôn ngữ.Năm nay cũng chứng kiến sự ra mắt của hội nghị Reactjs World Tour

Năm 2015: React Native, một framework cho việc phát triển ứngdụng di động đa nền tảng bằng React, được giới thiệu Điều này chophép nhà phát triển sử dụng kiến thức React để xây dựng cả ứng dụngweb và ứng dụng di động

- 28-29 tháng 1: Hội nghị React.js 2015 chứng kiến Facebookcông bố phiên bản đầu tiên của React Native trong buổi nóichuyện kỹ thuật tại React.js Conf

- Ngày 25 tháng 3: Facebook cho biết React Native dành cho

iOS hiện đã mở và có thể truy cập được trên GitHub

- 14 tháng 9: React Native cho Android được phát hành

Năm 2016: Với sự ra đời của các hội nghị mới (như React Europe),React đã trở nên phổ biến hơn vào năm 2016 Cộng đồng đang phát triểnrất vui mừng khi thấy các thư viện mới như MobX và BlueprintJS đượcphát hành

Năm 2017 - Nay: ReactJS vẫn tiếp tục phát triển với nhiều cải tiến,công cụ và thư viện mở rộng bổ sung từ cộng đồng phát triển

3. Một số phiên bản của ReactJS

Từ năm 2013 đến nay, ReactJS đã trải qua rất nhiều phiên bản đểphát triển và cải tiến, dưới đây là một số phiên bản có sự nổi bật đángchú ý

React 0.3.0 (29 Tháng 5, 2013): Đây là phiên bản ReactJS ban đầu

được giới thiệu công khai Nó còn khá đơn giản và thiếu nhiều tính năng

so với các phiên bản sau này

React 0.13.0 (10 Tháng 3, 2015): Phiên bản này giới thiệu

ReactJS với hệ thống hình thức (Forms) được cải thiện, hỗ trợ choComponent API thứ ba (PropTypes), và khả năng sử dụng React trên cácứng dụng server-side rendering (SSR)

React 15.0.0 (7 Tháng 4, 2016): Phiên bản này bắt đầu sử dụng

React Fiber, một kiến thức mới về cách React xử lý cơ sở vật lý và cáchReact tương tác với trình duyệt

React 16.0.0 (26 Tháng 9, 2017): Đây là một trong những phiên

bản quan trọng nhất với sự ra mắt của React Fiber, cải tiến đáng kể vềhiệu suất và khả năng xử lý của React Nó cũng giới thiệu React Portalscho việc làm việc với DOM ngoài và Fragment để cải thiện hiệu suất

React 16.3.0 (29 Tháng 3, 2018): Phiên bản này giới thiệu Context

API, giúp quản lý trạng thái ứng dụng dễ dàng hơn và làm thay thế chocác phương thức lifecycle componentWillMount vàcomponentWillReceiveProps

React 16.8.0 (6 Tháng 2, 2019): Với phiên bản này, React giới

thiệu Hooks, một cách mới để quản lý trạng thái và các phần khác củalogic trong các thành phần không cần dùng class Điều này đơn giản hóaviệc viết mã và là một bước đột phá trong phát triển ứng dụng React

React 17.0.0 (20 Tháng 10, 2020): Phiên bản này là một phiên bản

trung gian với nhiều cải tiến về hiệu suất và khả năng tương thích Nógiúp cho việc nâng cấp từ các phiên bản React cũ lên các phiên bản mới

dễ dàng hơn

React 18 (29 Tháng 3 năm 2022): Phiên bản chính mới nhất của

bao gồm các cải tiến có thể dùng ngay như automatic batching, các API

mới như startTransition và hiển thị trực tuyến phía máy chủ với sự hỗtrợ cho Suspense, đặc biệt Concurrent React

PHẦN 2: TẠI SAO NÊN SỬ DỤNG

REACTJS?

1 Các công nghệ khác

Các nhà phát triển giao diện người dùng cần sử dụng một bộ ngônngữ kết hợp để xây dựng các ứng dụng web giao diện người dùng của

họ HTML chịu trách nhiệm về bố cục cơ bản trong trang web, CSS quản

lý cấu trúc và định dạng trực quan, còn JavaScript được sử dụng để duytrì tính tương tác và chức năng Cùng với sự phát triển như vũ bão củacộng đồng JavaScript, chúng ta có cảm giác như mỗi tuần lại có thêmcác framework, library JavaScript mới được ra mắt Thật khó có thể đểliệt kê hết ra đây các framework, library, tool hiện có trong cộng đồng.Dưới đây là những framework, library cũng như tool nổi tiếng nhất và cóảnh hưởng nhất trong cộng đồng JavaScript

a) AngularJS

AngularJS là framework phổ biến nhất, được nhiều developer sửdụng để xây dựng phần frontend cho những web application có phầnfrontend phức tạp Nó là một opensource được hỗ trợ bởi Google

AngularJS là một MVC framework Nó cung cấp two-way data bindinggiữa model và view Cách binding dữ liệu như thế này cho phép tựđộng update ở cả hai phía bất kể khi nào dữ liệu bị thay đổi

b) Vue.js

Hơn 40% các developer JS đều sử dụng Vue.js ít nhất một lầntrong sự nghiệp của họ và hơn 700 nghìn trang web đã được xây dựngvới sự trợ giúp của nó Vue lần đầu tiên ra mắt vào năm 2014, nó đượctạo ra bởi Evan You, người đứng sau sự phát triển của một khuôn khổ JSphổ

biến khác - Angular Vue có tính năng virtual DOM, liên kết hai chiều,làm cơ sở cho hiệu suất tốc độ cao

c) Svelte

Svelte không phải là một framework cũng không phải là một thư viện,

mà là một trình biên dịch (compiler) Nó được giới thiệu lần đầu tiên vàonăm 2016 và trở nên phổ biến kể từ đó Svelte đã trở thành một trongnhững frontend framework tốt nhất vào năm 2022, có ít nhất 10-15% cácdeveloper sử dụng nó và có hơn 3K trang web đã được xây dựng cho đếnthời điểm này

d) jQuery

jQuery được phát hành vào năm 2006, là một trong những mãnguồn mở (open-source) JavaScript frontend frameworks lâu đời nhất.Với kinh nghiệm lâu năm, jQuery hỗ trợ JavaScript coding đỡ tốn côngsức, mang lại sự đơn giản cùng với sự hỗ trợ mạnh mẽ của cộng đồngngười dùng lớn mạnh và giàu kinh nghiệm

e) Ember

Ember, JavaScript web framework vơi mã nguồn mở (open-source)MVVM được phát hành vào năm 2011 và đạt được mức độ phổ biếnđáng kể kể từ đó Khoảng 14% các chuyên gia JavaScript đang sử dụnghoặc đã sử dụng nó trong các dự án của họ, với 30 nghìn trang web đượcphát triển Framework này được coi là khá ổn định và hoạt động liên tụccho các nhu cầu khác nhau

Một số công nghệ khác nữa như: Backbone.js, Semantic UI, …

Dựa vào các cuộc khảo sát ta có được bảng xếp hạng tỉ lệ người đã tưngnghe đến các thư viện và frame-work front-end

Tỉ lệ được tính theo công thức : ( tổng cộng - chưa từng nghe đến ) / tổngcộng

Tỷ lệ Nhận thức đo lường mức độ nhận thức của một công nghệ hoặc sảnphẩm trong một cộng đồng hoặc nhóm người dùng cụ thể Tỷ lệ này chobạn biết phần trăm người trong nhóm đã biết về công nghệ hoặc sảnphẩm, sau khi bạn loại bỏ những người chưa bao giờ nghe về nó

- Nếu tỷ lệ nhận thức cao (gần 1), điều này cho thấy rằng hầu hết

mọi người trong nhóm đã biết về công nghệ hoặc sản phẩm

này

- Nếu tỷ lệ nhận thức thấp (gần 0), điều này cho thấy rằng có một sốlượng lớn người trong nhóm chưa bao giờ nghe về công nghệ hoặcsản phẩm này

Qua bảng xếp hạng cho ta thấy được ReactJS luôn đứng đầu bảng xếp

hạng về độ phổ biến của nó

2 Bảng so sánh ReactJS với VueJS

Tiêu chí ReactJS Vue.js

Kiến trúc Component-based Component-based

Virtual DOM Có (tối ưu hóa hiệu suất) Có (tối ưu hóa hiệu suất)

Học tập và làm

quen

Khó hơn (phải học thêm nhiều thư viện phụ như Redux, Router)

Dễ hơn (cú pháp rõ ràng, đơn giản)

Hỗ trợ two-way

binding

Không hỗ trợ sẵn (chỉ có way data flow) Hỗ trợ two-way data binding

one-Tính linh hoạt Cao (không áp đặt cách tổ

Cộng đồng nhỏ hơn nhưng phát triển nhanh chóng

Tài liệu

Phong phú, nhưng cần học thêm từ các thư viện bên ngoài

Rất rõ ràng, dễ học

Công cụ CLI

Không có sẵn (cần dùng Create React App hoặc Next.js)

Có sẵn Vue CLI với nhiều tiện ích

Quản lý trạng thái Dùng Redux, MobX, hoặc

Context API Vuex (tích hợp sẵn, dễ dùng)

Tích hợp ứng

dụng hiện có Cần cấu hình phức tạp hơn

Dễ dàng tích hợp vào các ứng dụng có sẵn

Hỗ trợ từ tổ chức

lớn

Facebook (bảo đảm sự ổn định và phát triển dài hạn)

Độc lập nhưng được cộng đồng mạnh mẽ ủng hộ

Sự lựa chọn giữa ReactJS, VueJS và Angular thường phụ thuộcvào yêu cầu cụ thể của dự án và sở thích của bạn ReactJS thường đượcchọn cho tính linh hoạt cao và hiệu suất tốt VueJS thích hợp cho các dự

án trung bình và có độ phức tạp trung bình Angular thích hợp cho cácứng dụng lớn và phức tạp có sự hỗ trợ mạnh mẽ từ framework

3 Lí do tại sao nên sử dụng ReactJS

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

React có một số tính năng cốt lõi giúp nó nổi bật so với các thư việnJavaScript khác Các phần sau đây sẽ giới thiệu cho bạn những tính năngnày và giải thích cách chúng đóng góp cho việc phát triển ứng dụng web

và di động

- JSX:

JSX là viết tắt là Javascript XML JSX là một phần mở rộng cúpháp JavaScript được sử dụng trong việc tạo phần tử React Các nhà pháttriển sử dụng nó để nhúng mã HTML vào các đối tượng JavaScript VìJSX chấp nhận các biểu thức JavaScript hợp lệ và nhúng hàm, nên nó cóthể đơn giản hóa các cấu trúc mã phức tạp

- Virtual DOM:

Để hiểu rõ khái niệm về Virtual DOM, chúng ta cùng nhau đi tìmhiểu về DOM trước.DOM (Document Object Model) là thư viện giaodiện người dùng và tồn tại dưới dạng tree nodes dùng để quản lý, truyxuất, chỉnh sửa tới bất kì phần tử nào thông qua đối tượng gốc làdocument

Tại sao có DOM rồi lại cần Virtual DOM (DOM ảo)? Khi chúng ta làmviệc với một DOM, khi một nodes thay đổi thì tất cả các nodes cũng phảithay đổi thay Giả sử, chúng ta có một list danh sách gồm 10 items, nếuchúng ta thay đổi 1 items thì DOM cũng thay đổi 9 items còn lại về trạngthái ban đầu của nó Điều này là không cần thiết, mặc dù tốc độ xử lý củaDOM khá nhanh nhưng đối với các ứng dụng SPA việc thay đổi cácDOM này là liên tục nên nó sẽ xảy ra khá chậm và không khả thi đi xâydựng ứng dụng lớn Lúc này Virtual DOM sẽ được dùng để thay thế Nóđược xây dựng dựa trên DOM thật, có một vài thuộc tính của DOM thật

nhưng khi thay đổi Virtual DOM sẽ không thực hiện thay đổi trên mànhình giống như DOM thật.

Khi chúng ta thực hiện render một JSX element, mỗi Virtual DOMobject sẽ được cập nhật, khi virtual DOM được cập nhật, ReactJS sẽ sosánh virtual DOM với virtual DOM trước đó để kiểm tra trước khi thựchiện cập nhật và sau đó sẽ cập nhật trên một phần của DOM thật Thayđổi của DOM thật sẽ được hiển thị ra màn hình

- Components and Props:

Khi bạn làm việc với một dự án lớn, UI có độ phức tạp cao chiathành các phần khác nhau Việc chia nhỏ các thành phần trong UI là mộtđiều cần thiết, các phần nhỏ này được gọi là các components, cho phéprender các đoạn mã HTML, React components hoạt động tương tự nhưcác hàm JavaScript vì chúng chấp nhận các đầu vào tùy ý được gọi làcác Props

Props là một tham số được chuyển qua lại giữa các React Components,các props này được truyền qua các component với cú pháp giống như làHTML attributes.

- State Management:

State là một obejct mà lưu trữ giá trị của các thuộc tính bên trongcomponents và chỉ tồn tại trong phạm vi của component đó Mỗi khi bạnthay đổi giá trị của một state thì component đó sẽ được render lại

Quản lý trạng thái đề cập đến việc thực hành quản lý trạng thái ứngdụng React Nó bao gồm việc lưu trữ dữ liệu trong thư viện quản lý trạngthái của bên thứ ba và kích hoạt quá trình kết xuất lại mỗi khi dữ liệuđược thay đổi

Thư viện quản lý trạng thái tạo điều kiện giao tiếp và chia sẻ dữliệu giữa các thành phần React Hiện nay có một số thư viện quản lý

trạng thái của bên thứ ba, nhưng Redux và Recoil là hai trong số những

thư viện phổ biến nhất

- Programmatic Navigation:

Điều hướng có lập trình đề cập đến các trường hợp khi dòng mã tạo

ra một hành động chuyển hướng người dùng Ví dụ: hành động đăngnhập và đăng ký sẽ điều hướng người dùng đến các trang mới theochương trình

React Router, thư viện định tuyến tiêu chuẩn của React, cung cấp

nhiều cách điều hướng theo chương trình an toàn giữa các thành phần màkhông yêu cầu người dùng nhấp vào liên kết