React & Frontend
React, Next.js, UI và mọi thứ liên quan đến frontend.
React Hook Form + Zod: làm form đăng ký chuẩn từ client tới Server Action
Form đăng ký với số điện thoại VN, validate ngay khi gõ, báo lỗi "email đã tồn tại" từ server, dùng chung một schema ở client và Server Action. Hướng dẫn React Hook Form + Zod 4 thực chiến, kèm so sánh với useActionState của React 19.
Next.js App Router thực chiến: cấu trúc file, caching với "use cache" và cách chuyển từ Pages Router
Copy code App Router từ tutorial năm ngoái vào project mới là build báo lỗi. Bài này đi qua Next.js App Router bản 16.4: file conventions, server/client, caching với "use cache", metadata, route handler, proxy.ts và lỗi khi rời Pages Router.
Zustand là gì: quản lý state React gọn nhẹ, từ store đầu tiên tới Next.js
Zustand là gì và dùng thế nào cho đúng trong app thật? Bài này đi qua Zustand v5 với TypeScript: selector và re-render, useShallow, slices, persist, devtools, dùng store ngoài React, lưu ý với Next.js, và khi nào chọn Context, Redux Toolkit hay TanStack Query.
Tailwind CSS là gì: utility-first, cài v4 với Vite, Next.js và cách dùng không rối
Tailwind CSS là gì, vì sao nhiều team React bỏ BEM và CSS Modules để dùng utility class? Bài này hướng dẫn cài Tailwind v4.3 với Vite và Next.js, dùng @theme làm design token, dark mode, tái sử dụng style với cn() và khi nào không nên dùng.
React Query là gì: dùng TanStack Query v5 thay cho fetch trong useEffect
Fetch trong useEffect chạy được, nhưng cache, race condition, refetch và cập nhật sau khi POST thì bạn tự lo. Bài này giải thích React Query (TanStack Query v5) là gì, cách dùng useQuery, useMutation, staleTime, gcTime, optimistic update và khi nào không cần.
React Server Components: hiểu đúng ranh giới server và client trong Next.js
Thêm useState vào page.tsx là lỗi, rải "use client" khắp nơi thì bundle phình to. Bài này giải thích React Server Components cho dev quen React SPA: server vs client component, props qua ranh giới, streaming, Server Functions, lỗi hay gặp và bảo mật.
React là gì? Giải thích dễ hiểu cho người mới bắt đầu
React là thư viện JavaScript giúp xây dựng giao diện web động bằng cách quản lý dữ liệu thay vì tự tay sửa DOM. Nó dùng component tái sử dụng, state quản lý trạng thái, và props truyền dữ liệu. Nếu muốn đi làm frontend, học React gần như bắt buộc vì đó là kỹ năng thị trường đang cần.
React Hooks là gì? Hiểu useState và useEffect qua ví dụ thực tế
Bài giới thiệu React Hooks là các hàm cho phép function component dùng state và lifecycle như class component nhưng code ngắn gọn hơn. Hai hooks chính là useState để quản lý state và useEffect để xử lý side effects, cùng hai quy tắc bắt buộc về thứ tự gọi và nơi gọi hooks. Nắm vững hai hooks này cộng các mẹo tránh lỗi và lựa chọn hook phù hợp là chìa khóa để thành thạo React hiện đại.
React vs Next.js: Khác nhau ở đâu và nên học cái nào trước?
React là library UI, còn Next.js là framework xây trên React thêm routing, rendering server-side và tối ưu SEO. Không phải chọn một bỏ một, mà Next.js là React cộng thêm tính năng. Học React vững trước, rồi bước lên Next.js sau để không bị hổng kiến thức.
Quản lý state trong React: từ useState đến Zustand và Redux
Bài viết hướng dẫn quản lý state trong React từ cơ bản tới nâng cao: bắt đầu với useState và lift state up, sau đó là Context API, useReducer, rồi mới tới thư viện ngoài như Zustand hay Redux. Quan trọng là chọn đúng công cụ cho từng tình huống thay vì dùng Redux sớm một cách không cần thiết, vì phần lớn app vừa và nhỏ đã đủ dùng React thuần.
React Router là gì? Điều hướng trong React cho người mới
React Router là thư viện routing phổ biến nhất cho React, giúp bạn chuyển trang mà không reload, gắn mỗi URL với một component cụ thể. Bạn có thể dùng <Link> để điều hướng, <Routes>/<Route> để khai báo trang, useParams để đọc tham số động, và nested routes để dùng chung layout. Nắm vững những cơ bản này là đủ xây dựng phần lớn cấu trúc điều hướng trong app thực tế.
Tối ưu performance trong React: re-render, memo, useMemo và useCallback
React mặc định đã nhanh, nhưng app vẫn có thể giật lag do render lại thừa. Phần lớn vấn đề performance không cần giải pháp phức tạp, chỉ cần hiểu re-render hoạt động thế nào rồi sửa đúng chỗ, bắt đầu từ việc tách component hợp lý, đặt state gần nơi dùng, rồi chỉ dùng React.memo, useMemo, useCallback khi thực sự đo được chúng cần thiết, vì tối ưu sớm thường phản tác dụng.