Bộ khung gợi ý (Cheat-Sheet Snippets) tái sử dụng cho mọi đề thi và dự án:
React Native • Redux Toolkit • AsyncStorage • React Navigation • Axios
Được thiết kế dưới dạng sườn mẫu (Generic Template) với placeholder tab-stops tự động đổi tên biến trên toàn file, sẵn sàng ứng dụng cho mọi bài toán thi cử (bán hàng, đặt món, quản lý sách, todo list, v.v.).
⚡ Danh Sách Phím Tắt (Snippets Table)
| Phím tắt (Prefix) |
Tên chức năng |
Mô tả ngắn |
rn-install |
Expo Core Install |
Khung lệnh copy cài đặt toàn bộ thư viện nền tảng chỉ 1 lần |
rx-slice |
Redux Generic Slice |
Khung Slice đa năng: addItem, updateQuantity, removeItem, toggleItem, hydrate, hàm clamp |
rx-store |
Redux Store Setup |
Cấu hình Store tối giản gom các Slice Reducer, không lo lỗi type |
rx-select |
Redux Selector |
Đọc dữ liệu từ state Redux chỉ bằng một dòng code |
rx-persist |
AsyncStorage Hook |
Hook usePersistSlice tự động lưu & khôi phục dữ liệu từ thiết bị |
rx-debounce |
Debounce Action Hook |
Hook useDebouncedAction tăng giảm số lượng tức thời (UI mượt mà) |
rx-api |
Axios Client Platform |
Khung API tự nhận diện Android (10.0.2.2) và iOS/Web (localhost) |
rx-confirm |
Confirm Dialog |
Hộp thoại xác nhận đa nền tảng (window.confirm trên Web, Alert.alert trên Mobile) |
rn-flatlist |
FlatList Grid/List |
Khung FlatList dạng lưới (2 cột / 1 cột), tự căn giữa khi mảng rỗng |
rn-empty |
Empty State Screen |
Giao diện thông báo khi danh sách trống rỗng |
rn-nav |
Tabs in Stack Navigator |
Điều hướng Bottom Tabs lồng trong Stack kèm badge đếm số lượng |
rn-style |
Utility Stylesheet |
Bảng style tiện ích tái sử dụng (s.center, s.row, s.card,...) |
🚀 Hướng Dẫn Sử Dụng Chi Tiết
Mở bất kỳ file .js, .jsx, .ts, hoặc .tsx, gõ tiền tố và nhấn Tab hoặc Enter.
1. rn-install — Khung Lệnh Cài Đặt Thư Viện
Tạo sẵn lệnh cài đặt các gói cần thiết:
# Nhóm 1: Các thư viện nền tảng Expo
npx expo install @react-native-async-storage/async-storage react-native-screens react-native-safe-area-context react-dom react-native-web @expo/metro-runtime react-native-webview
# Nhóm 2: Quản lý State, Điều hướng và Mạng
npm i @reduxjs/toolkit react-redux @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs axios
# Nhóm 3: Backend giả lập (tuỳ chọn)
npm i -D json-server@0.17.4
2. rx-slice — Khung Redux Slice Đa Năng
- Tự động đồng bộ tên Slice ở tất cả các vị trí khai báo khi bạn gõ tên thực thể mới (ví dụ:
cart, wishlist, product).
- Tích hợp sẵn hàm
clamp giới hạn min/max tồn kho.
- Có đầy đủ các hành động CRUD cơ bản:
addItem, updateQuantity, removeItem, toggleItem, hydrate.
3. rx-store — Khung Redux Store Cấu Hình Tối Giản
Gom các Slice Reducer nhanh chóng, xuất sẵn kiểu RootState và AppDispatch.
4. rx-select — Đọc Redux State Một Dòng
Gõ rx-select để sinh nhanh:
const items = useSelector((state: any) => state.featureName.items);
5. rx-persist — Hook Lưu Trữ Tự Động AsyncStorage
Cung cấp usePersistSlice(key, sliceName, hydrateAction) với cờ kiểm tra hydrated tránh ghi đè mất dữ liệu cũ.
6. rx-debounce — Hook Debounce Thao Tác Tăng/Giảm Nhanh
Người dùng nhấn nút cộng/trừ liên tục thì UI nhảy số ngay lập tức nhờ drafts, sau đó mới dispatch lên Redux sau khoảng trễ (mặc định 300ms).
7. rx-api — Khung Axios API Đổi Môi Trường Tự Động
Tự động chuyển BASE_URL sang:
- Máy ảo Android:
http://10.0.2.2:3000
- Web / iOS / Máy thật:
http://localhost:3000
8. rx-confirm — Hộp Thoại Xác Nhận Chạy Đa Nền Tảng
Giải quyết lỗi treo/liệt nút bấm trên Web bằng cách tự động chọn window.confirm trên trình duyệt và Alert.alert trên điện thoại.
9. rn-flatlist — Khung FlatList Lưới Đa Năng
Hỗ trợ numColumns={2}, columnWrapperStyle, và tự động căn giữa ListEmptyComponent khi danh sách rỗng.
10. rn-empty — Khung Màn Hình Rỗng
Giao diện thông báo danh sách trống có biểu tượng, thông báo và nút bấm điều hướng.
11. rn-nav — Điều Hướng Tabs Lồng Stack Navigator
Bottom Tab Navigator được bọc trong Native Stack Navigator, hỗ trợ Redux badge đếm số lượng giỏ hàng/thông báo.
12. rn-style — Bảng Style Tiện Ích Dùng Chung
Các kiểu style phổ biến: s.center, s.row, s.between, s.card, s.cover, s.badge, s.footer.
📄 License
MIT License
