Quy tắc ranh giới component React | DevPrompt Lab

Chỉ dẫn mã nguồn giúp component dễ hiểu, dễ truy cập và dễ kiểm thử.

Nội dung có thể tái sử dụng

Giữ mỗi component tập trung vào một trách nhiệm hiển thị cho người dùng. Đặt phép tính và xác thực có thể tái sử dụng trong hàm thuần hoặc hook với đầu vào rõ ràng. Đặt lệnh gọi API trong lớp dữ liệu đã có. Tránh sao chép trạng thái máy chủ vào state cục bộ trừ khi giao diện cần bản nháp có thể chỉnh sửa. Biểu di�

n tường minh trạng thái đang tải, rỗng, lỗi và thành công. Dùng HTML ngữ nghĩa, điều khiển thao tác được bằng bàn phím và token thiết kế hiện có. Ưu tiên composition thay vì điều kiện lồng sâu.

Thư viện state và quy ước: {{STATE_LIBRARY}}

Quy ước giao diện: {{UI_CONVENTIONS}}

Cách sử dụng

Mặc định dùng routing, state và pattern component hiện có thay vì thêm thư viện mới.

Ví dụ

Hàm thuần: filterResources(resources, filters). Hook: useResources(filters). Component: hiển thị kết quả, trạng thái rỗng và nút thử lại.