ReactJS Roadmap
Giới thiệu
ReactJS là thư viện JavaScript mã nguồn mở do Facebook (Meta) phát triển, dùng để xây dựng giao diện người dùng (UI) theo mô hình component-based. React sử dụng Virtual DOM để tối ưu hóa quá trình cập nhật giao diện.
Mục lục
| # | Mảng Kiến Thức | Mô tả |
|---|---|---|
| 1 | JSX & Rendering | JSX syntax, Virtual DOM, Conditional rendering, List rendering |
| 2 | Components & Props | Functional components, Class components, Props, Children |
| 3 | Hooks Cơ bản | useState, useEffect, useRef, useId |
| 4 | Hooks Nâng cao | useReducer, useMemo, useCallback, useLayoutEffect, Custom Hooks |
| 5 | Context API | createContext, useContext, Provider pattern |
| 6 | Redux & Redux Toolkit | Store, Slice, Thunk, RTK Query |
| 7 | React Query | Data fetching, Caching, Mutations, Pagination |
| 8 | React Router | Routes, Navigation, Nested routes, Protected routes |
| 9 | Forms & Validation | Controlled forms, React Hook Form, Zod validation |
| 10 | Styling | CSS Modules, styled-components, Tailwind CSS |
| 11 | Performance | Memo, Code splitting, Lazy loading, Profiler |
| 12 | Testing | Jest, React Testing Library, Mock API |
| 13 | React Patterns | HOC, Render Props, Compound Components, Portals |
| 14 | Next.js Cơ bản | SSR, SSG, ISR, App Router, Server Components |
Hướng dẫn sử dụng
- Bắt đầu từ nền tảng: JSX → Components → Hooks
- State Management: Context API cho app nhỏ, Redux/Redux Toolkit cho app lớn
- Data Fetching: React Query là tiêu chuẩn hiện đại
- Thực hành: Mỗi chủ đề đều có code example thực tế
Note: Tài liệu này tập trung vào React 18+ với functional components và hooks. Class components chỉ được đề cập để hiểu legacy code.