Mục Lục

I: ReactJS ..................................................................................................................2
1: Kiến thức căn bản ............................................................................................2
2: Kiến thức nâng cao ..........................................................................................2
3: Các thư viện / Hệ sinh thái có trong React....................................................3
4: Thích Mobile App ? .........................................................................................4
II: NextJS ..................................................................................................................4
1: Kiến thức căn bản ............................................................................................4
2: Kiến thức nâng cao ..........................................................................................5
III: State Management In ReactJS.........................................................................5
1: React Context API ...........................................................................................5
2: Redux ................................................................................................................6
3: Redux Toolkit (Bản nâng cấp của Redux) ....................................................7
4: Zustand .............................................................................................................7
ReactJS / NextJS / State Management

* Màu sắc:
• ****: Bắt buộc
• ****: Nên học

I: ReactJS

1: Kiến thức căn bản

• JSX
• Component:
o Fuctional Components
o Class Components
• Props vs State
• Conditional Rendering
• Stateless Component vs Stateful Component
• Component Life Cycle
• Rendering List and Keys
• Basic Hooks:
o useState
o useEffect
• Virtual DOM (cơ chế render của React)
2: Kiến thức nâng cao
• Hooks:
o useReducer
o useRef
o useCallback
o useMemo
o useLayoutEffect
o useContext
o … đọc docs để tìm hiểu thêm (React JS)
• Custom Hooks
• Context
 • Refs
• Render Props
• React Code Splitting
• HOC (High order components)
• React Memo
• Automatic Batching ( React v18.x)
• Portals
• Error Boundaries

3: Các thư viện / Hệ sinh thái có trong React

• Routing:
o React router (react-router-dom)
o Reach router
• Styling:
o Sass / Scss
o TailwindCss
o Styled Components
o UI Library:
▪ Material UI
▪ ChakaUI
▪ Ant Design
▪ ReactStrap
• API:
o Fetch (Browser)
o Axios
o React query
o Apollo Client
• Forms:
o React Hooks Form (custom hook)
o Formik (render props)
• Form validation:
o Yoi / Yup
• SSR / SSG (Server Side Rendering / Static Side Generation)
o NextJS
• State Management
 o React Context API/ State
o Redux:
▪ Redux Toolkit
▪ Redux Middleware:
• Redux Thunk
• Redux Saga (khó)
• Redux Logger
o Recoil
o Zustand
• Types Checking:
o Props Types
o TypeScript

4: Thích Mobile App ?

• React Native

II: NextJS

1: Kiến thức căn bản

• Pages:
o Dynamic Routes
o Pre-rendering:
▪ Static Generation (build time)
▪ Server Side Rendering
• Routing:
o Dynamic Routes Parameters
o Catch All Routes
o Navigation
• Data Fetching:
o getSaticProps (Static Site Generation)
o getStaticPaths (Dynamic Routes)
o getServerSideProps (Server Side Rendering)
o Incremental Static Regeneration
• Layouts
 • Image Optimization
• Fast Refresh

2: Kiến thức nâng cao

• Automatic Static Optimization
• Authentication
• Dynamic Import
• Deployment:
o Vercel
o Netify
o …
• Static HTML Export
• NextJS Custom:
o Custom Page Error
o App
o Document
o … docs (Advanced Features: Custom `App` | Next.js (nextjs.org))
• Middleware
• Debugging
• Error Handling
• Next Config
• Next Authentication
o Next-Auth
o Auth0
…

III: State Management In ReactJS

1: React Context API

- Ưu điểm:
• Có sẵn trong React
 • Tạo ra cơ chế “Global” cho “state” không cần truyền dữ liệu qua props hay
render props …, bất cứ components nào sử dụng cũng được, miễn là nó nằm
trong “Provider”.

- Nhược điểm:
• Mỗi khi state ở context thay đổi, nó sẽ render lại tất cả các components sử
dụng dữ liệu từ store của context (Kể cả components đó không sử dụng state
bị thay đổi).
• Để khắc phục, cần phải sử dụng thêm các hooks, hay hoc khác như:
useCallback, useMeno và React.memo().

2: Redux
- Ưu điểm:
• Cộng đồng sử dụng lớn
• Giống như react context api nhưng Redux có cơ chế combine, chúng ta có
thể thiết lập nhiều nhiệm vụ riêng biệt chỉ với một store duy nhất.
• Redux chia ra làm 3 thành phần riêng biệt:
o Actions: Tín hiệu mà người dùng gửi.
o Reducer: Tiếp nhận và xử lý tín hiệu từ người dùng sau đó trả về dữ
liệu tương ứng.
o Store: Nơi quản lý các dữ liệu.
• Khi dữ liệu thay đổi, Redux chỉ render lại các components nào mà sử dụng
dữ liệu đó.
• …
- Nhược điểm
• Để làm việc được với Redux, cần phải cấu hình rất phức tạp, khá khó cho
những người mới.
• Redux không hỗ trợ async actions, mà phải dùng đến các middleware.
3: Redux Toolkit (Bản nâng cấp của Redux)
Ưu điểm:
• Giống với Redux nhưng cấu trúc đơn giản hơn (chia thành từng slice).
• Hỗ trợ nhiều middleware:
o Redux logger
o Redux Thunk
o Redux Saga
o …
• Hỗ trợ cơ chế immutable.
• Thiết lập sẵn Redux Devtools
• Thiết lập sẵn Redux Thunk
Nhược điểm:
• Thực hiện async actions phức tạp, phải chia ra từng trường hợp cụ thể
(fullfill, reject, pending).

4: Zustand
Ưu điểm:
• Thiết lập đơn giản, nhanh chóng
• Cấu trúc giống với custom hooks
• Không cần provider giống context api hay redux …
• Hỗ trợ cơ chế immutable.
• Hỗ trợ async actions
• Thiết lập sẵn Redux Devtools
Nhược điểm:
• Cộng đồng sử dụng, hỗ trợ còn hạn chế.
• Ít tài liệu, chủ yếu phải đọc docs để sử dụng

*** Tóm Lại:

- Đối với dự án đơn giản: Dùng React Context
- Đối với dự án vừa và nhỏ: Dùng Redux Toolkit + Middleware: Redux Thunk
hoặc Zustand
- Đối với dự án lớn: Dùng Redux Toolkit + Middleware: Redux Saga