1.

Component
K/n: Một ứng dụng bao gồm các thành phần mà chúng ta có thể đặt vào 1 khối chung, các
khối này được gọi là components. Các components này hoạt động một cách độc lập và khi
kết hợp chúng lại thì sẽ được một ứng dụng hoàn chỉnh. Trong một components có thể
chứa nhiều components khác.
Ví dụ về một trang web hoàn chỉnh:

Khi đó chúng ta có thể chia trang web thành các components:

Đặc điểm:
- Tách biệt Logic và Giao Diện: Components được thiết kế để tách biệt logic và giao diện
của ứng dụng tức là có thể phát triển và duy trì logic ứng dụng riêng rẽ khỏi giao
diện người dùng và ngược lại. Điều này giúp quản lý mã nguồn của ứng dụng
- Tái Sử Dụng: Do là các component riêng lẻ nên các components này có thể tái sử
dụng ở những phần khác nhau của ứng dụng hoặc thậm chí trong các ứng dụng
khác.
- Thiết Kế Modularity: Components thường được thiết kế theo cách modularity, tức là
chúng thực hiện một chức năng cụ thể và độc lập. Điều này giúp tạo ra mã nguồn dễ
đọc và dễ bảo trì, phát triển hơn.
- Kết Hợp: Các components có thể kết hợp lại với nhau để tạo thành ứng dụng hoặc
trang web hoàn chỉnh. Chúng có thể gửi và nhận dữ liệu qua giao diện, tạo sự tương
tác và hoạt động của ứng dụng.
 - Các Loại Components: Có nhiều loại components khác nhau tùy thuộc vào ngôn ngữ
lập trình và framework sử dụng.

Trong React có một số tiêu chí để có thể chia một ứng dụng thành các components:
- Dựa vào chức năng: Chia components dựa trên chức năng cụ thể mà chúng thực hiện
trong ứng dụng. VD: có thể có các components cho đăng nhập, hiển thị danh sách
sản phẩm, quản lý giỏ hàng, và thanh toán trong một ứng dụng mua sắm trực tuyến.
- Dựa vào giao diện người dùng: Chia components dựa trên các phần giao diện người
dùng cụ thể. VD: có thể có components cho các nút bấm, ô văn bản, hộp thoại,
thanh trượt, và các component giao diện khác.
- Phạm vi (Scope): Tùy thuộc vào phạm vi của components trong ứng dụng, có thể chia
thành các components cho trang chính, các trang con, phần tiêu đề, chân trang,
hoặc các khu vực chức năng cụ thể.
- Tái sử dụng: Chia components dựa trên khả năng tái sử dụng của chúng. Có các
components tổng quát có thể được sử dụng lại trong nhiều phần khác nhau của ứng
dụng và các components cụ thể cho một mục đích cụ thể.
- Layout và Container: Một cách phổ biến để chia components trong React là sử dụng
mô hình "Layout và Container." Components layout quản lý cách giao diện được sắp
xếp, trong khi các components container quản lý trạng thái và logic.

=> Cách chia components trong React phụ thuộc vào cấu trúc tổ chức của ứng dụng và
mục tiêu thiết kế. Quan trọng là làm cho mã nguồn dễ hiểu, bảo trì và mở rộng.

Trong React, có hai loại components chính là functional components (components dựa
trên hàm) và class components (components dựa trên lớp).
- Functional components: đơn giản là các hàm javascript. Các hàm này có thể nhận
hoặc không nhận dữ liệu dưới dạng tham số. Chúng ta có thể tạo một hàm lấy
props(properties) làm đầu vào và trả về những gì sẽ được hiển thị. Một component
chức năng hợp lệ có thể được hiển thị trong ví dụ dưới đây. VD:

Component này nhận các props làm đối số và sử dụng chúng để hiển thị thông tin
trên giao diện người dùng.Ưu điểm của functional components bao gồm:cú pháp
ngắn gọn hơn so với class components, hiệu suất tốt hơn so với class components
vì không cần quản lý trạng thái và không có overhead từ các phương thức như
render và componentDidUpdate.
 - Class components: là một loại component được định nghĩa bằng cách sử dụng lớp
(class) JavaScript. Class components có thể duy trì trạng thái (state) và có thể chứa
các phương thức (methods) khác nhau để xử lý logic của component. Điểm quan
trọng của class components là chúng phải kế thừa từ lớp React.Component hoặc
React.PureComponent. VD:

Class component MyClassComponent kế thừa từ lớp React.Component, trạng thái

(state) được duy trì bên trong component sử dụng this.state. Phương thức
incrementCount để tăng giá trị của count.Ưu điểm của class components bao gồm:
cho phép quản lý trạng thái của component, điều này làm cho chúng phù hợp cho
các ứng dụng có trạng thái phức tạp, có thể sử dụng các phương thức sống
(lifecycle methods) như componentDidMount, componentDidUpdate, và
componentWillUnmount để xử lý các sự kiện trong quá trình một component được
tạo, cập nhật và huỷ bỏ. Class components thường được sử dụng khi cần xử lý logic
phức tạp như gọi API, xử lý sự kiện, hoặc quản lý trạng thái toàn bộ ứng dụng.

Rendering Components in ReactJS: là quá trình tạo ra và hiển thị giao diện người dùng dựa
trên cấu trúc cây thành phần đã định nghĩa trong ứng dụng. Để hiển thị (render) các
components trong ReactJS, cần thực hiện một số bước cơ bản:
- Tạo components: Đầu tiên, cần định nghĩa các components muốn hiển thị.
Có thể khởi tạo 1 components bằng câu lệnh:

- Import các thư viện cần thiết vào têp JS. VD:

- Sử dụng JSX để định nghĩa giao diện người dùng trong các components.
- Render components trong ứng dụng: Sử dụng ReactDOM.render() để import
component gốc vào DOM. Component gốc thường là một functional hoặc
 class component bao gồm tất cả các components muốn hiển thị trong ứng
dụng.VD:

Gọi ReactDOM.render() làm tham số đầu tiên, sau đó gọi components Welcome, trả về
<h1>Hello World!</h1>; như kết quả. Sau đó, ReactDOM cập nhật DOM một cách hiệu quả
để khớp với phần tử được trả về và hiển thị phần tử đó thành phần tử DOM có id là “root”.

2. State
K/n: State là một đối tượng JavaScript dùng để lưu trữ và quản lý dữ liệu và thông tin của
một component. Nó cho phép cập nhật và theo dõi sự thay đổi của dữ liệu trong ứng dụng
và tự động cập nhật giao diện người dùng khi dữ liệu thay đổi. Sự thay đổi trong trạng thái
có thể xảy ra do các action mà người dùng thực hiện hoặc các sự kiện do hệ thống tạo ra,
và những thay đổi này xác định cách hoạt động của components và cách nó sẽ hiển thị. Một
State có thể chứa nhiều thuộc tính của Object.
Trạng thái có thể được truyền dưới dạng props từ component cha xuống các component
con.
Cách sử dụng:
- Khởi tạo:
+ Functional component: State được khởi tạo thông qua hook useState trong
functional component:

+ class component : State được khởi tạo bên trong constructor của class
component

- Tham chiếu:
 + Functional component: Tham chiếu đến State Object sử dụng biến được trả
về bởi hook useState trong functional component

+ Class component: Tham chiếu đến state Object ở bất kỳ đâu trong
component bằng cách sử dụng cú pháp this.state.xxx trong class component

- Thay đổi State Object:

+ Function component: Để cập nhật giá trị của State cần gọi hàm setXXX được
tạo bởi hook useState trong functional component

+ Class component: Để cập nhật giá trị của State cần sử dụng phương thức
setState trong class component

3. Props
K/n: Props (viết tắt của "properties") trong React là một cách để truyền dữ liệu từ
component cha (parent component) đến component con (child component) giúp tái sử dụng
components và làm cho các component của ứng dụng trở nên độc lập và có thể tương tác
với nhau.. Props là một trong những cơ chế quan trọng giúp truyền thông tin giữa các
component.

Đặc điểm:
- Props là không thể thay đổi (immutable), nghĩa là một khi đã truyền giá trị vào props
của một component con thì không thể thay đổi giá trị đó từ component con. Điều này
giúp duy trì tính nguyên vẹn của dữ liệu và làm cho ứng dụng dễ dàng để debug.
- Props có thể là các giá trị động được tính toán hoặc thay đổi theo thời gian, chẳng
hạn như trạng thái của component cha.
- Props được truyền vào các component thông qua các thuộc tính HTML.

Sử dụng:
- Dùng Props Trong Component Con: Để sử dụng props trong một component con
cần tham chiếu đến props bằng cách sử dụng ‘this.props’ trong class component
hoặc tham số của hàm trong functional component.
 - Truyền Props: Để truyền props từ component cha đến component con cần bao gồm
tên prop và giá trị của nó trong cú pháp JSX của component cha.

- Default Props: Định nghĩa giá trị mặc định cho props trong trường hợp không có giá
trị props nào được truyền từ component cha.

- Children Props: Có thể truyền component con (children components) vào component
cha và truy cập chúng bằng props đặc biệt là ‘children’.

4. Phân biệt giữa state với props:

- Prop:
+ Được chuyển đến các component và từ component này sang component
khác.
+ Props là bất biến, có nghĩa là chúng không thể sửa đổi được. Khi một props
được truyền cho một component, component đó không thể thay đổi giá trị của
props
- State:
+ Không được truyền từ component này sang component khác, nó chỉ được
truyền trong component đó. State là dữ liệu cục bộ chỉ được sử dụng và duy
trì bởi một component. Hai component không thể sử dụng hoặc duy trì một
state.
+ Các State có thể được thay đổi theo ý muốn trong component.
=> Vì vậy, prop chỉ đọc trong khi các state là đọc và ghi. Prop được sử dụng để giao tiếp
một chiều hoặc hai chiều, trofng khi state được sử dụng để hiển thị dữ liệu động trong
component.
5. Lifecycle
K/n: Lifecycle (vòng đời) của một component là chu kỳ các sự kiện và
phương thức xảy ra từ khi component được tạo ra cho đến khi nó bị hủy bỏ.
React đã có một số phiên bản khác nhau của vòng đời, nhưng từ phiên bản
React 16.3 trở đi, chúng đã được cải thiện và thay thế bằng các phương thức
"lifecycle" mới. Dưới đây là một số phương thức chính trong vòng đời React: