React Roadmap

Dễ vào

Chặng 01

JavaScript & TypeScript for React

Củng cố modern JavaScript trước khi vào React: scope, closure, hoisting, this, thao tác array/object, promise, async/await, modules, destructuring, spread/rest và phần TypeScript cơ bản gồm type, interface, union, generic, typing props, API response, event handlers và utility types nền tảng.

JavaScriptTypeScriptAsync

Chặng 02

React Mental Model

Đặt mental model đúng ngay từ đầu với declarative UI, component tree, props down events up, pure rendering, render vs commit, state as snapshot, data flow và cách nghĩ controlled vs uncontrolled theo tinh thần Thinking in React.

Chặng 03

JSX, Components & Composition

Đi qua JSX rules, component, props, children, conditional rendering, lists and keys, composition, reusable UI components và phân biệt presentational với container components để bắt đầu xây UI có cấu trúc.

Chặng 04

State, Events & Rendering

Làm chủ useState, event handling, derived state, batching, rendering behavior, local state vs shared state, lifting state up và các lỗi state phổ biến để hiểu vì sao component re-render và state nên được đặt ở đâu.

Chặng 05

Effects, Refs & Escape Hatches

Học useEffect đúng bản chất là đồng bộ với hệ thống bên ngoài, nắm cleanup, dependency array, tránh unnecessary effects, useRef, DOM refs, previous value pattern, external subscriptions và race condition basics.

Xây nền

Chặng 06

Forms, Validation & User Input

Xây milestone riêng cho form theo hướng React 2026 với controlled inputs, form state, validation, error UX, async submit, pending state, optimistic UI, useActionState, useOptimistic và form accessibility.

Chặng 07

Custom Hooks & Reusable Logic

Tách logic lặp lại thành custom hooks có cấu trúc với hook composition, data hook vs UI hook, useDebounce, useLocalStorage, useDisclosure, usePrevious, useClickOutside và các lỗi hook thường gặp khi scale codebase.

Chặng 08

Real-world UI Components

Chốt roadmap bằng component thực chiến kiểu interview/frontend job: component API design, controlled/uncontrolled components, accessibility, keyboard navigation, focus management, responsive layout, loading/error/empty states và compound components pattern.

Chặng 09

State Architecture

Mở rộng từ local state sang state architecture với when local state is enough, context boundaries, useReducer, server state vs client state, URL state, form state, global state, tổng quan Zustand/Redux Toolkit và cách ra quyết định state placement.

Chặng 10

Data Fetching, Routing & App Structure

Đi vào fetching patterns, loading/error/empty states, pagination, infinite query, cache mindset, routing, layouts, API integration, folder structure và feature-based architecture để app không chỉ chạy được mà còn có tổ chức.

Nâng cao

Chặng 11

Performance & Optimization

Học performance theo hướng React 2026: rendering cost, memoization, React.memo, useMemo, useCallback, React Compiler mindset, list virtualization, code splitting, lazy loading, Core Web Vitals basics, profiling, useTransition và useDeferredValue, với trọng tâm là đo trước khi tối ưu.

Chặng 12

Testing React Apps

Bổ sung testing như một phần bắt buộc của roadmap với unit test, component test, React Testing Library, user-event testing, mock API, accessibility test, E2E basics with Playwright và nguyên tắc test user behavior thay vì implementation details.

Chặng 13

Modern React & Next.js Bridge

Đưa React sang mức advanced/bridge với Suspense, Error Boundary, Server Components, client/server boundary, Server Actions concept, streaming, hydration basics, use, useActionState, useOptimistic và cách nối sang Next.js App Router.

SuspenseServer ComponentsNext.js

Chặng 14

React Interview Prep

Biến toàn bộ kiến thức thành năng lực trả lời phỏng vấn với explain rendering, explain hooks, debug effects, optimize re-renders, build component live, discuss state architecture, review accessibility, React quiz và mock interview notes.