Chương 2: Modern Frontend Development with React
Đây là Phần 5 của series Modern Frontend Development. Design system là bộ tiêu chuẩn, nguyên tắc, đóng vai trò single source of truth để designer và developer cùng đọc chung một bộ quyết định, giúp sản phẩm nhất quán, build nhanh và dễ mở rộng. Component chỉ tham chiếu tên token, không chứa giá trị thô, nên rebrand, dark mode hay thêm một brand mới chỉ là chuyện đổi giá trị, không phải viết lại component.
Mình sẽ đi qua cách đặt tên và phân layer cho token, cách oklch giúp chúng ta tạo cả một color palette từ vài giá trị gốc, rồi kết nối tất cả vào React: CSS variables, @theme của Tailwind v4, dark mode support, và component variant với type-safe helper.
Yêu cầu
React Design Systems
Về tác giả
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.
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.
Chúng tôi tôn trọng quyền riêng tư. Hủy đăng ký bất cứ lúc nào.