- Frond End Framework -

REACT
START
Trình bày bởi Nhóm 1 lớp
64CNTT.NB & 64TTNT2
 Thành viên nhóm
Nguyễn Lê Trung Thành
Đoàn Minh Hiếu
Hãy cùng vượt qua Nguyễn Quang Minh
các màn chơi nào! Phạm Quý Vũ
Trần Hùng Anh
Nguyễn Thị Phương Anh
Trần Tuấn Anh
Đỗ Việt Cường
 - Levels -
Cấp độ Dễ: Tổng quan về
1. ReactJS là gì? Cấp độ Khó: Nội dung chính
React
2. Lịch sử phát triển và hình thành cộng 1. Virtual DOM
đồng ReactJS ReactJS
2. Cách viết React, sự khác biệt giữa JS và
3. Ưu điểm và nhược điểm của ReactJS JSX?

4. Các đặc trưng của ReactJS 3. Import, export thư viện, CSS trong React

4. Components và Properties binding

Cấp độ Trung bình: Cài đặt 5. Router và State
1. Cài đặt môi trường
6. List và Keys
React
2. Create-React-App
7. Form và Xử lý Events
3. Cấu trúc một project ReactJS
 Cấp độ 1. ReactJS là gì?

Dễ là một thư viện Javascript Giao diện người dùng bằng ReactJS
ReactJS
được xây dựng từ các đơn vị nhỏ
(opensource) được tạo ra và phát triển bởi
như nút, văn bản và hình ảnh. React
Meta nhằm cải thiện quá trình phát triển
cho phép bạn kết hợp chúng thành
UI, giải quyết các vấn đề hiệu xuất và khả
các thành phần có thể lồng vào nhau
năng tương thích cho các ứng dụng web.
và có thể tái sử dụng.
 Cấp độ 1. ReactJS là gì?
Dễ web đến ứng dụng điện thoại,
Từ trang
mọi thứ trên màn hình đều có thể được
chia thành các thành phần.
Trước khi có ReactJS, lập trình viên gặp
nhiều khó khăn trong việc sử dụng
“vanilla JavaScript”(JavaScript thuần) và
JQuery để xây dựng UI, quá trình phát
triển ứng dụng lâu và xuất hiện nhiều rủi
ro.
 Cấp độ 2. Lịch sử phát triển và hình thành
cộng đồng ReactJS
Dễ
Năm 2011, Jordan Walke đã xây dựng
một nguyên mẫu - đánh dấu sự ra đời của Ra mắt ban đầu (2013)
React.js Mở mã nguồn (2013) GraphQL và Relay
(2015)
React Native (2015) React Fiber (2017)
Redux (2015) Hooks (2018)
Suspense (2019)
React 18 và Cộng đồng
(2022)
Cấp độ 3. Ưu và nhược điểm của ReactJS

Dễ Ưu điểm Nhược điểm

• Hiệu suất cao
• Tái sử dụng các thành phần
• Dễ dàng quảng lý trạng thái
• Hỗ trợ tốt cho SEO (Search Engine
Optimization – tối ưu hoá công cụ
tìm kiếm)
• Hỗ trợ đa nền tảng
• ReactJS chỉ phục vụ cho tầng View
• Tích hợp ReactJS vào các framework
MVC truyền thống yêu cầu cần phải
cấu hình lại
• React khá nặng nếu so với các
framework khác
• Tài liệu dễ bị lỗi thời do ReactJS phát
triển khá nhanh.
• JSX khó học với những người mới bắt
đầu.
Cấp độ 4. Các đặc trưng của ReactJS:

Dễ Virtual DOM

Components

Hooks

State

Props

Lists và Keys

Table

Form và xử lí Event
Cấp độ 1. Cài đặt môi trường

TBNodeJS
Trước khi cài đặt ReactJS thì cần đảm bảo máy tính của bạn đã có NodeJS để lập trình ở
local
Tại sao cần cài NodeJS?
NodeJS là một runtime environment cho JavaScript: React.js là một thư viện JavaScript,
và Node.js cung cấp môi trường chạy JavaScript không chỉ cho phía máy chủ mà còn cho
phía máy khách.
Để kiểm tra máy tính của bạn đã có sẵn NodeJS hay chưa bạn có thể mở Terminal và gõ:
node --version
Cấp độ 1. Cài đặt môi trường

TBNodeJS

Nếu máy bạn đã cài đặt NodeJS thì CLI sẽ trả về kết quả là version hiện tại của NodeJS. Ví
dụ:

Trong trường hợp máy bạn chưa cài NodeJS, ở đây tôi recommend việc cài bản LTS.
Link cài: https://nodejs.org/en/

Nên chọn phiên bản này, không nên chọn phiên bản mới nhất. Vì có thể xảy ra lỗi.
Cấp độ 1. Cài đặt môi trường

TB Manager
Package
Sau khi cài đặt Node bạn cần thêm 1 package manager để quản lý các package tại local
Chúng ta có thể dùng 2 loại package manager phổ biến là NPM hoặc YARN
• YARN cài nhanh nhưng có thể bị
lỗi.
• NPM cài lâu nhưng không bị lỗi.
== Chọn hướng dẫn NPM thôi 😊==
Kiểm tra local đã cài đặt NPM hay chưa bạn có thể mở Terminal và gõ:

Nếu máy bạn đã cài đặt NPM thì CLI sẽ trả về kết quả là version hiện tại của NPM. Ví dụ:
Cấp độ 2. Create-React-App

TB
Create-React-App được dùng để khởi tạo nhanh một React SPA.
Note: Required NodeJS >= 14 on local
• Bước 1: Init
Trước khi tạo 1 project, khuyên rằng bạn nên tạo 1 folder trống trong máy để làm
WorkSpace với ReactJS
BạnSau đó chọn
có thể chuột1phải vào
trong folder
các cáchđấy
cài để mở terminal và gõ lệnh tạo:
sau:
NPX NPM YARN

Note: npx chỉ dùng được Note: npm init <initializer> Note: yarn create chỉ dùng
với phiên bản npm 5.2 trở chỉ dùng được với phiên bản được với phiên bản Yarn
lên. npm 6 trở lên. 0.25 trở lên.
Trong đó my-app là tên dự án của bạn.
Cấp độ 2. Create-React-App

TB
• Bước 2: Run
All done !
Project của bạn đã được khởi tạo thành công. Để chạy project tại local, bạn run
command:

Web app của bạn sẽ được serve

tại: http://localhost:3000
 Cấp độ 2. Create-React-App

TB

Video demo Create-React-App

Cấp độ 3. Cấu trúc 1 project ReactJS

TB
Cấp độ 3. Cấu trúc 1 project ReactJS

TB
Src->
index.js
Cấp độ 3. Cấu trúc 1 project ReactJS

TB
Src->
app.js
Cấp độ 3. Cấu trúc 1 project ReactJS

TB
Cấp độ 1. Virtual DOM

Khó

• DOM (Document Object

Model) - mô hình các đối
tượng trong tài liệu HTML.
• Thông qua mô hình DOM ta
có thể truy xuất đến các thẻ
HTML một cách dễ dàng.
• DOM gồm 3 thành phần:
Element, Attribute, Text.
Cấp độ 1. Virtual DOM

Khó
• DOM biểu diễn trang web như 1 cây,
trong đó mỗi phần tử, thuộc tính, văn
bản, và các thành phần khác đều là
các nút trong cây. DOM cho phép các
ứng dụng web tương tác và thay đổi
trạng thái của web mà không cần tải
lại trang. Điều này tạo ra trải nghiệm
người dùng động và tương tác hơn.
Cấp độ 1. Virtual DOM

Khó
• Nhiệm vụ của DOM JS:
• Cho phép truy xuất đến các thẻ
HTML
• Thay đổi các thuộc tính của thẻ
HTML
• Thay đổi CSS của các thẻ HTML
• Tạo, xóa, thêm các thẻ HTML
Đây là 1 đoạn code Demo DOM. Nó sẽ thông qua id
là container để truyền nội dung vào trong thẻ div.
Qua đó ta có thể thấy DOM sẽ giúp chúng ta thông
qua JS để tương tác và thay đổi nội dung, cấu trúc,
kiểu dáng của 1 trang web động
Cấp độ 1. Virtual DOM

Khó
Virtual DOM và Real DOM

• Virtual DOM là một biểu diễn ảo của

cấu trúc HTML của trang web được duy trì
bởi các framework và thư viện như React.
• Virtual DOM thường được sử dụng
để tối ưu hóa hiệu suất trong quá trình cập
nhật DOM.
• Thay vì cập nhật Real DOM trực
tiếp, các thay đổi được thực hiện trên Virtual
DOM, sau đó Virtual DOM sẽ so sánh với
Real DOM và chỉ cập nhật những phần tử
thực sự cần thay đổi trong DOM.
• Quá trình so sánh và cập nhật trên
Virtual DOM thường nhanh hơn so với cập
nhật trên Real DOM vì Virtual DOM là một
biểu diễn nội bộ và không yêu cầu trình
duyệt tham gia.
Cấp độ 1. Virtual DOM
Khó
Virtual DOM và Real DOM
• Real DOM là biểu diễn thực sự của cấu trúc
HTML của trang web, được tạo ra và duy trì bởi trình
duyệt web.
• Mỗi lần có sự thay đổi trong cấu trúc của trang
web, Real DOM cần được cập nhật lại hoàn toàn.
• Cập nhật Real DOM có thể làm cho ứng dụng
trở nên chậm chạp nếu có nhiều thay đổi, vì quá trình
render lại DOM có thể tốn nhiều thời gian.
1 số điểm khác biệt chính
• Real DOM là cấu trúc thực sự của trang
web, trong khi Virtual DOM là một biểu diễn ảo
của nó.
• Real DOM được duy trì bởi trình duyệt,
trong khi Virtual DOM thường được sử dụng và
duy trì bởi các framework và thư viện JavaScript.
• Thay đổi trên Real DOM có thể gây ra
hiệu suất kém, trong khi Virtual DOM giúp tối ưu
hóa việc cập nhật DOM để làm giảm thời gian và
tăng hiệu suất.
Cấp độ 2. Cách viết React, Sự khác biệt giữa JS và JSX?

Khó
• React có thể được viết bằng JSX hoặc JS (nhưng khuyến khích học JSX!)
Vậy JSX là gi?
• JSX là một phần mở rộng của JavaScript và về cơ bản trông giống như HTML pha trộn
với JavaScript. => Giúp dễ đọc và dễ hình dung hơn DOM của chúng ta như thế nào

• JSX chỉ có thể trả về một phần tử tại một thời điểm; để giải quyết vấn đề này, bạn có thể
lồng các phần tử con dưới một phần tử cha.
Cấp độ 2. Cách viết React, Sự khác biệt giữa JS và JSX?

Khó
• Đây là JSX
Cấp độ 2. Cách viết React, Sự khác biệt giữa JS và JSX?

Khó
• JSX phải có thẻ đóng, ngay cả
khi đó là thẻ tự đóng.

• Để đánh giá các biểu thức JSX, bạn phải đặt

nó trong dấu ngoặc nhọn.
Cấp độ 3. Import, Export thư viện, CSS trong React
Khó Export
• Khi sử dụng export, bạn có thể xuất nhiều
thành phần từ một module. Điều này cho
phép bạn xuất nhiều hàm, lớp, hoặc biến từ
cùng một module.
• Sau đó import những thứ chúng ta cần sử
dụng bằng cách bao quanh chúng cặp dấu
ngoặc nhọn { }. Tên của module đã nhập phải
giống với tên của module đã xuất.
Export Default
• Khi sử dụng export default, bạn chỉ có thể
xuất duy nhất một thành phần mặc định từ
một module. Thành phần mặc định này có
thể là một lớp, hàm, hoặc biến.
• Việc đặt tên import hoàn toàn độc lập trong
export default và chúng ta có thể sử dụng bất
kỳ tên nào mà mình muốn.
Cấp độ 3. Import, Export thư viện, CSS trong React

Khó
Cấp độ 3. Import, Export thư viện, CSS trong React

Khó
CSS trong React

i. Inline Style
• Cũng giống như `Inline style` trong HTML 5, ta có thể viết CSS trực tiếp vào trong các thẻ ở
phần view của component thông qua attribute style.
Cấp độ 3. Import, Export thư viện, CSS trong React

Khó
CSS trong React

i. Inline Style
• Cần lưu ý là phần view của component được viết
bằng JSX nên style cần được viết dưới dạng
object.

• Các property name phải chuyển từ dạng 'dash'

sang 'carmelCase'.
Eg: font-size => fontSize;
background-color => backgroundColor;

• Giữa các cặp giá trị property: value sẽ ngăn cách

nhau bởi dấu "," thay vì ";" do được viết dưới
dạng object.
Eg: {fontSize:'40px', color:'#ffffff'}
Cấp độ 3. Import, Export thư viện, CSS trong React

Khó
CSS trong React

ii. External Stylesheets

• Ta có thể viết css vào các file `.css ` riêng biệt sau đó
import vào trong component.
• Note: Nên ưu tiên tạo file `styles.css ` tại thư mục
assets/styles hoặc cùng cấp với component để dễ quản
File Component
lý
File CSS
Cấp độ 3. Import, Export thư viện, CSS trong React

Khó
CSS trong React

iii. Styled Components

• Gần như tương tự với `Inline Style` Ta có thể viết css vào một biến ngay tại component.
Cách này cần bạn sử dụng lib `styled-components`
Cấp độ 3. Import, Export thư viện, CSS trong React

Khó
CSS trong React File CSS

iv. CSS Module (Recommend)

• Gần như tương tự với External Stylesheets. Ta
có thể viết css vào các file riêng biệt, những file
này sẽ có đuôi là .module.css. Bằng cách viết
này, mỗi file sẽ export cho ta một object và ta sẽ File Component
sử dụng object này để style cho component.
Cách viết này sẽ giúp ta tách biệt css thành các
module cụ thể, đây là cách được sử dụng rất
rộng rãi trong React.

• Note: Nên ưu tiên tạo file `styles.module.css ` tại

thư mục assets/styles hoặc cùng cấp với
component để dễ quản lý
 Cấp độ 4. Components và Properties binding

Khó
Component • Component là khối xây dựng cơ bản của một ứng dụng React, cho phép phân chia giao
diện thành các phần nhỏ, hoạt động độc lập và có thể tái sử dụng chúng nhiều lần.

• Ở hình trên, thanh Menu, phần hiển thị thông tin bên trái và bên phải đều là các thành phần riêng
lẻ (component). Khi hợp nhất tất cả các component này lại chúng ta sẽ có được một giao diện
hoàn chỉnh.
Cấp độ 4. Components và Properties binding

Khó
Component
Cấp độ 4. Components và Properties binding

Khó
Class Component
• Class Component được viết bằng cú pháp của ES6 class, yêu cầu phải kế thừa từ class
React.Component. Class components thường được sử dụng khi cần theo dõi trạng thái (state) của
component và sử dụng các lifecycle methods để quản lý vòng đời của component
Cấp độ 4. Components và Properties binding

Khó Component
Function
• Function Component được viết theo cú pháp hàm thông thường của JavaScript, nhận một đối số là
props (nếu cần) và trả về một phần tử React để hiển thị nội dung trên giao diện người dùng.
Function Component không có state và không sử dụng lifecycle methods

Props
• Trong ReactJS, `props` là một từ viết tắt của `properties` - (thuộc tính) và được sử dụng để truyền
dữ liệu từ một component cha xuống một component con trong cây component. Khi truyền dữ liệu
qua props, component con chỉ được đọc, không thể thay đổi dữ liệu đó. Props là một cách để
truyền thông tin giữa các component và giúp tạo ra sự tương tác linh hoạt giữa chúng.
Cấp độ 4. Components và Properties binding

Khó
Props
Cấp độ 5. Router và State

Khó
Router

• React-Router là một thư viện định tuyến (routing) tiêu chuẩn trong React,
• được sử dụng để quản lý việc điều hướng (routing) giữa các trang hoặc các phần khác nhau của
ứng dụng.
• Cài đặt react-router bằng lệnh: npm
install react-router-dom --save
• Nó cung cấp BrowserRouter và
HashRouter, hai thành phần này khác
nhau ở kiểu URL mà chúng sẽ tạo ra và
đồng bộ.
Cấp độ 5. Router và State

Khó
State

• Trong ReactJS, `state` là một

trong những khái niệm quan
trọng nhất và được sử dụng để
theo dõi trạng thái của một
component. State hoạt động
khác với Props. Khi dữ liệu
trong một component cần thay
đổi dựa trên tác động của
người dùng hoặc các sự kiện
khác, chúng ta sẽ sử dụng state
để cập nhật và render lại giao
diện của component đó
Cấp độ 6. List và Keys

Khó
List

• List trong React là một thành phần UI cho phép hiển thị dữ liệu danh sách theo cấu
trúc và giao diện người dùng tương tự như danh sách HTML. List trong React cũng
hỗ trợ các phương thức và thuộc tính quan trọng để xử lý dữ liệu trong danh sách
như map(), filter(), reduce() để thao tác và biến đổi dữ liệu

Keys
• Keys là một định danh duy nhất, được sử dụng để xác định một phần tử duy nhất
trong danh sách. Key giúp React xác định các phần tử đã thay đổi, được thêm mới
hoặc bị xoá. Key nên là một giá trị duy nhất trong phạm vi danh sách và được gắn
cho mỗi phần tử trong List.
Cấp độ 6. List và Keys

Khó
Cấp độ 6. List và Keys

Khó
Cấp độ 7. Form và xử lý Events

Khó
Form
• Là một biểu mẫu cho phép người dùng nhập thông tin và gửi lên server. Trong
HTML các form element như <input>, <textarea>, hay <select> thông thường sẽ tự
quản lý trạng thái của chúng và tự động cập nhật dựa trên dữ liệu người dùng nhập
vào. Còn trong React, các trạng thái thay đổi thì sẽ được giữ trong state của
component, và chỉ được cập nhật khi sử dụng hàm setState()

Xử lý Events
• onChange được sử dụng để xử lý các sự kiện thay đổi, như khi người dùng nhập
văn bản vào một ô nhập hoặc chọn một tùy chọn từ một danh sách thả xuống.
Thường được sử dụng với các thành phần như <input>, <textarea>, và <select>.
Hàm event.target.value có thể truy cập giá trị mới của thành phần.
Cấp độ 7. Form và xử lý Events

Khó
Xử lý Events

• onClick được sử dụng để xử lý các sự kiện click từ người dùng.

Thường được sử dụng với các thành phần như các nút hoặc liên kết <button>,
<a>.
Khi người dùng click vào thành phần, hàm được chỉ định trong onClick sẽ được
• onSubmit thường được sử dụng trong các biểu mẫu (forms) để xử lý sự kiện khi
gọi
biểu mẫu được gửi đi.
Thường được sử dụng với các thành phần như các nút hoặc liên kết <button>,
<a>.
Khi người dùng click vào thành phần, hàm được chỉ định trong onClick sẽ được
gọi
Cấp độ 7. Form và xử lý Events

Khó
YOU WON!
Cùng theo dõi code minh hoạ nhé!