REACT JS

Bài 2: Components
REACT JS – CLASS COMPONENT
Class component được tạo ra bằng cách kế thừa các thuộc tính của
của class cha từ React thông qua việc dùng key extends .
Trong component Welcome 2 ta dùng method render để định nghĩa
phần JSX element được khởi tạo và render ra trong component này.
Sau khi khởi tạo ta có thể chia sẻ component để có thể truy cập vào
nó từ những component/file khác bằng cách sử dụng export .
Tên của component luôn cần viết hoa chữ cái đầu.
REACT JS – FUNCTIONAL COMPONENT
Functional component được khởi tạo bằng cách tạo ra một JS function
và trả ra một JSX element.
Trong component Welcome ta dùng key return để định nghĩa phần
JSX element được khởi tạo và render ra trong component này.
Sau khi khởi tạo ta có thể chia sẻ component để có thể truy cập vào
nó từ những component/file khác bằng cách sử dụng export .
Tên của component luôn cần viết hoa chữ cái đầu.
REACT JS - COMPONENT
Component trong reactJS được xây dựng bao gồm 2 phần là Logic và
View .
Logic: phần khai báo, xử lí các resource để trả ra output đúng với
logic
View: sử dụng JSX để tạo lên 1 template để hiển thị, giao tiếp với
user.
VD:
Trong component ở bên: ta tạo biến name trong phần Logic và hiển
thị ra trong phần View.
REACT JS - COMPONENT
Component trong reactJS được sử dụng bằng cách import vào nơi cần
như 1 module.
Import: câu lệnh dùng để gọi đến component mà người dùng muốn sử
dụng. Trong đó có Welcome là tên component và
'./components/Welcome' là địa chỉ của file chứa component Welcome
<Welcome />: sử dụng JSX để dùng component như một custom-
element.
REACT JS - HOC
HOC – Higher Order Component là một component đặc biệt
 Nhận vào 1 component và trả ra một component mới
 Thường được sử dụng để đóng vai trò như 1 template để custom
lại component đầu vào
REACT JS - STATE
State trong mỗi component được định nghĩa thông qua hook
useEffect của React
useEffect: là một hook được cung cấp sẵn của react cho FC có cấu
trúc const [data, setData] = useState(initData)
data: đây là biến được tạo ra để lưu trữ state, React dựa vào việc so
sánh sự thay đổi của biến này để re-render component.
setData: Hàm được dùng để thay đổi giá trị của data khi cần update.
initData: Giá trị khởi tạo của data.
 Khi cần update giá trị của một state thì ta cần dùng chính hàm
setState được khởi tạo cùng với state đó.
REACT JS - PROPS
Properties là các dữ liệu được truyền vào component như tham trị,
tại các component thì props có tính chất read-only. Khi props thay
đổi sẽ khiến cho các component con re-render
Properties: được truyền vào các component thông qua cấu trúc khai
báo properties của JSX.
counterProps: tên của prop chứa giá trị counter, trong component
con sẽ sử dụng tên này để truy cập đến prop.
counter: Giá trị được gán cho counterProps, React dựa vào giá trị
này để re-render component.
 Khi cần update giá trị của một props thì ta cần update từ
component tạo ra props đó (component cha).
REACT JS - JSX
JSX – Javascript XML
 Là một cấu trúc JS gần giống với HTML
 JSX được convert thành JS thông qua Webpack và Babel
 Cho phép viết logic chung với view
Rules
 Chỉ trả ra duy nhất 1 element
 Luôn phải đóng thẻ
 Các properties, attributes được viết dưới dạng CamelCase thay vì
dashed
REACT JS - JSX
Expressions
 Các biến được truyền vào JSX element bằng cách sử dụng cấu
trúc name={value}.
 Luôn phải đóng thẻ.
 Có thể sử dụng Fragment <></> như 1 element ảo để thay root
element
REACT JS - JSX
List
 Ta có thể dùng method map() để render list elements trong JS
từ 1 mảng data.
 Mỗi element trong list bắt buộc phải có key, key được dùng để
xác định phần tử trên Virtual DOM và trigger việc re-render
khi có thay đổi.
REACT JS – CORE CONCEPT

Virtual DOM

Components

Properties and States

JSX

Lifecycle Methods