​

Buổi 02 — Lý thuyết: Component, state và bộ giao diện

​

Mục tiêu buổi học

• Hiểu component là khối giao diện có thể tái sử dụng
• Hiểu state là dữ liệu thay đổi khi người dùng tương tác
• Biết các component Paper phù hợp với TaskFlow
• Dùng màu sắc nhất quán cho trạng thái và mức ưu tiên

​

1. Component — khuôn dùng lại

Màn hình danh sách
├── Thanh tìm kiếm
├── Bộ lọc trạng thái
├── TaskCard
├── TaskCard
└── Nút tạo công việc

​

2. State — trí nhớ của giao diện

​

3. React Native Paper

​

4. Quy ước trực quan

• Mỗi trạng thái dùng một màu nhất quán.
• Công việc quá hạn cần dấu hiệu ngoài màu sắc, như nhãn Quá hạn.
• Thông tin quan trọng nhất xuất hiện trước.
• Vùng bấm phải đủ lớn để thao tác trên điện thoại.

​

5. Git — lưu mốc an toàn

​

Tóm tắt buổi học

• Component giúp giao diện nhất quán và dễ chỉnh sửa.
• State tạo ra tương tác.
• Paper cung cấp các khối giao diện sẵn có cho ứng dụng di động.