Xác định component theo chức năng
Thiết kế kiến trúc component trong web dev: tránh lặp code và dễ bảo trì nên bắt đầu từ chức năng, không phải chỉ nhìn giao diện. Ví dụ: Button, Modal, FormField.
Cách này giúp component tái sử dụng tốt hơn và tránh việc copy-paste cùng một kiểu logic ở nhiều nơi.
Tách logic, state và UI
Hãy tách phần xử lý dữ liệu, state và phần hiển thị. UI chỉ lo render, logic chỉ lo quy tắc hoạt động.
code: const Button = ({ label, onClick }) => <button onClick={onClick}>{label}</button>
Dùng props, composition và chuẩn hóa
Ưu tiên props và composition thay cho việc viết lại code. Đồng thời, chuẩn hóa naming, cấu trúc thư mục và cách truyền dữ liệu để team đọc nhanh, sửa nhanh.
Thiết kế component nhỏ, trách nhiệm rõ ràng sẽ dễ test, dễ mở rộng và ít vỡ khi thay đổi. Tạo component chung cho button, modal, form field để dùng lại đúng cách.
Áp dụng ngay cho dự án web
Nếu bạn đang làm landing page hoặc website doanh nghiệp, cách này giúp code gọn hơn và giảm lỗi bảo