DemoApp

DemoApp — App demo học React Native

App demo chạy được kèm theo lộ trình học trong ../docs. Mỗi mục kiến thức có một màn hình demo tương ứng, mở từ màn hình chính.

• Bare React Native (RN 0.86) + TypeScript
• React Navigation (native-stack) làm điều hướng
• Zustand cho state toàn cục, AsyncStorage cho lưu trữ
• Animation/gesture dùng Animated + PanResponder built-in (không cần cấu hình native thêm)

⭐ Mini Apps (ứng dụng hoàn chỉnh)

Ngoài các demo lẻ, app có 5 mini app gộp nhiều kiến thức thành sản phẩm dùng được thật (mỗi app nhiều màn hình + lưu trữ). Chi tiết: ../docs/06-mini-apps.md.

App	Thư mục	Kiến thức trọng tâm
✅ Task Manager	src/apps/tasks	CRUD, lọc/sắp xếp, sub-task, migration persist, swipe-to-delete
🛒 Cửa hàng	src/apps/shop	Navigation truyền params, giỏ hàng + badge, thanh toán, đơn hàng
🌤 Thời tiết	src/apps/weather	Gọi API thật (Open-Meteo), debounce, refresh, favorites
💰 Chi tiêu	src/apps/expenses	SectionList, lọc theo tháng, biểu đồ cơ cấu
🔥 Thói quen	src/apps/habits	Lưới tuần, chuỗi streak, xử lý ngày tháng

Các màn hình demo

Mức độ	Màn hình	Kiến thức	Tài liệu
Cơ bản	Counter	useState, sự kiện chạm	docs/02
Cơ bản	Profile Card	View/Text/Image, Flexbox	docs/02
Cơ bản	Todo List	FlatList, thêm/xoá item	docs/02
Cơ bản	Login Form	TextInput, validation	docs/02
Trung cấp	Hooks	useEffect, useRef, custom hook	docs/03
Trung cấp	Gọi API	fetch, loading/error, refresh	docs/03
Trung cấp	AsyncStorage	Lưu & khôi phục dữ liệu	docs/03
Trung cấp	Giỏ hàng	State toàn cục (Zustand)	docs/03
Nâng cao	Animation	Animated API, interpolate	docs/04
Nâng cao	Swipe to delete	PanResponder, gesture	docs/04
Nâng cao	Platform-specific	Platform.select	docs/04
Nâng cao	Hiệu năng list	React.memo, FlatList tối ưu	docs/04

Chạy app

Yêu cầu: Node ≥ 18, và (iOS) Xcode + CocoaPods / (Android) Android Studio + JDK 17. Xem ../docs/01-nen-tang-va-setup.md.

cd DemoApp
npm install                      # cài JS deps (đã cài sẵn nếu clone kèm node_modules)

# iOS (chỉ macOS):
cd ios && pod install && cd ..   # cài native pods
npm run ios                      # build & chạy iOS simulator

# Android (cần ANDROID_HOME + emulator/thiết bị):
npm run android

# Nếu Metro chưa chạy, mở terminal riêng:
npm start

• Fast Refresh: sửa file trong src/ và lưu → UI cập nhật ngay.
• Dev Menu: iOS Cmd+D, Android Cmd+M.

Kiểm thử & chất lượng

npm test           # Jest — có sẵn test cho store giỏ hàng (__tests__/cart.test.ts)
npm run lint       # ESLint
npx tsc --noEmit   # kiểm tra kiểu TypeScript

Cấu trúc thư mục

DemoApp/
├── App.tsx                    # điểm vào: SafeAreaProvider + RootNavigator
├── src/
│   ├── theme.ts               # màu, spacing, radius dùng chung
│   ├── components/ui.tsx      # Screen, Card, Button, Muted... tái sử dụng
│   ├── store/cart.ts          # Zustand store (giỏ hàng)
│   ├── apps/                  # ⭐ Mini apps hoàn chỉnh (mỗi app có navigator riêng)
│   │   ├── tasks/             #   Task Manager
│   │   ├── shop/              #   Cửa hàng
│   │   ├── weather/           #   Thời tiết (API)
│   │   ├── expenses/          #   Chi tiêu
│   │   └── habits/            #   Thói quen
│   ├── navigation/
│   │   ├── types.ts           # kiểu params điều hướng (type-safe)
│   │   └── RootNavigator.tsx  # khai báo stack + các screen
│   └── screens/
│       ├── HomeScreen.tsx     # danh mục demo
│       ├── basics/            # 4 demo cơ bản
│       ├── intermediate/      # 4 demo trung cấp
│       ├── advanced/          # 4 demo nâng cao
│       └── AboutScreen.tsx
└── __tests__/cart.test.ts     # unit test mẫu

Gợi ý học

Mở tài liệu tương ứng trong ../docs, đọc lý thuyết, rồi mở màn hình demo và thử sửa code. Mỗi file docs có mục "🎯 Bài tập tự làm" để luyện tập.