U

Upskills

  • Hướng dẫn
  • Demo
Đăng nhập

© 2026 Upskills. All rights reserved.

Chính sách bảo mậtĐiều khoản dịch vụ
DiscordX
  1. Trang chủ
  2. Hướng dẫn
  3. React Forms Done Right
Indie Dev ToolkitPhần 4 / 9

Chương 2: Modern Frontend Development with React

React Forms Done Right

Nguyễn Phi Vũ
Lead Engineer, NAB - 13 thg 6, 2026

Đây là Phần 4 của series Modern Frontend Development. Form không chỉ là UI mà còn là một bài toán state phức tạp với validation, async checks, server round-trips, và accessibility chồng chéo lên nhau.

Mình sẽ đi qua mental model của form và cùng build 3 mẫu form thực tế: waitlist form gọn nhẹ với React 19 server action, multi-step wizard với TanStack Form, và một bảng chỉnh sửa dữ liệu (editable table) tối ưu hiệu năng. Cuối cùng, mình sẽ so sánh chi tiết trade-off giữa native React 19 và các client-side libraries.

Yêu cầu

  • Quen với việc build React components bằng hooks (useState, useEffect)
  • Quen với TypeScript căn bản (types, generics, inference)
  • Phần 3 (Client and Server State) được khuyến khích. Form submission gắn liền với server-state mutations và optimistic UX

React Forms Done Right

REACT 19Server Action• FormData payload• useActionState()TANSTACK FORMClient State Engine• Field Array Roster• Row-level isolationZOD VALIDATION PIPELINEemail: z.string().email()workAuth: z.discriminatedUnion(...)roster: z.array().superRefine(...)FORM STATE LEDGERvalues: { email: "ada@..." }touched: { email: true }dirty: trueerrors: {}isValid: trueCOMMIT & SUBMIT

Về tác giả

Nguyễn Phi Vũ

Nguyễn Phi Vũ

NAB, Lead Engineer

Mình là Vũ, hiện là Lead Engineer ở NAB (National Australia Bank). Mình bắt đầu ở mảng Home Lending, giờ đang lead một team làm sản phẩm cho HICAPS, dịch vụ point-of-sale claiming bảo hiểm sức khỏe tư nhân lớn nhất ở Úc. Trước NAB, mình từng làm ở các startup và nhiều team khác với đa dạng stack.

Upskills là nơi mình chia sẻ những kiến thức thực tế từ công việc, để giúp bạn build và ship dự án tốt hơn. Ngoài tutorial, sắp tới sẽ có thêm nhiều nội dung: project showcase, interview prep, và các AI tool, như những resource cho hành trình học của bạn. Mình rất vui được chia sẻ những kiến thức và kinh nghiệm đã học được trong suốt quá trình làm việc, và có thể chia sẻ thêm nhiều điều thú vị cùng nhau khi chúng ta tiếp tục build những thứ hay ho.

GitHubXXXLinkedin
Từ newsletter của Upskills

Hy vọng bạn thấy React Forms Done Right hữu ích. Nhận bài tiếp theo qua email nhé?

Các bài deep-dive về web development thực tế, một đến hai tuần một số, viết bởi engineer thực sự có kinh nghiệm build sản phẩm. Không sáo rỗng, không câu view.

  • Ví dụ thực tế, dùng được trong production
  • Không bao giờ spam
  • Hủy đăng ký chỉ với một click

Chúng tôi tôn trọng quyền riêng tư. Hủy đăng ký bất cứ lúc nào.