Dưới đây là chương trình học React Native hoàn chỉnh dành cho người mới đến trung cấp, với định hướng thực hành liên tục, dự án cuối khóa fullstack, và phù hợp cho cả tự học hoặc đào tạo nhóm.
Tổng quan chương trình:
- Số phần học: 6 phần
- Tổng số bài học: 22 bài
- Thực hành sau mỗi bài
- Dự án cuối khóa: Ứng dụng Quản lý Công việc (To-Do App Fullstack + Firebase hoặc Node.js API)
Phần 1: Giới thiệu & Cài đặt môi trường
Mục tiêu: Làm quen với React Native và thiết lập môi trường phát triển
| Bài học | Nội dung | Bài tập |
|---|---|---|
| Bài 1 | React Native là gì? Expo vs CLI | Tạo tài liệu giới thiệu, tìm 3 app dùng RN |
| Bài 2 | Cài đặt Expo CLI & tạo app đầu tiên | Tạo app “Hello React Native” |
| Bài 3 | Cấu trúc file dự án React Native | Phân tích cấu trúc 1 app mới tạo |
Phần 2: Thành phần giao diện cơ bản
Mục tiêu: Thành thạo các component UI cơ bản của React Native
| Bài học | Nội dung | Bài tập |
|---|---|---|
| Bài 4 | Text, View, StyleSheet, Button | Tạo giao diện profile cá nhân |
| Bài 5 | TextInput, ScrollView | Tạo form đăng ký đơn giản |
| Bài 6 | FlatList, SectionList | Hiển thị danh sách bài hát hoặc sản phẩm |
| Bài 7 | TouchableOpacity, Image | Tạo menu hình ảnh có thể nhấn |
Phần 3: State, Props và Logic ứng dụng
Mục tiêu: Nắm chắc luồng dữ liệu và quản lý trạng thái
| Bài học | Nội dung | Bài tập |
|---|---|---|
| Bài 8 | useState, props | Viết app đếm số bước đi |
| Bài 9 | Xử lý sự kiện, validate dữ liệu | Tạo form đăng nhập có xác thực cơ bản |
| Bài 10 | useEffect & lifecycle | Viết đồng hồ đếm thời gian thực |
Phần 4: Điều hướng và nhiều màn hình
Mục tiêu: Tạo ứng dụng đa màn hình chuyên nghiệp
| Bài học | Nội dung | Bài tập |
|---|---|---|
| Bài 11 | React Navigation: Stack | Tạo 2 màn hình chuyển đổi đơn giản |
| Bài 12 | Navigation: Tab & Drawer | Tạo app có menu dưới & bên trái |
| Bài 13 | Gửi tham số giữa màn hình | Truyền dữ liệu khi chuyển màn hình |
Phần 5: Lưu trữ, kết nối API & Firebase
Mục tiêu: Tạo ứng dụng thực tế có backend
| Bài học | Nội dung | Bài tập |
|---|---|---|
| Bài 14 | AsyncStorage (lưu cục bộ) | Lưu trạng thái đăng nhập |
| Bài 15 | Gọi API với fetch/Axios | Gọi API hiển thị danh sách người dùng |
| Bài 16 | Firebase Authentication | Tạo đăng ký / đăng nhập qua Firebase |
| Bài 17 | Firebase Firestore | Lưu danh sách to-do trên cloud |
Phần 6: Nâng cao & tối ưu
Mục tiêu: Làm app mượt mà, có UI đẹp và dễ bảo trì
| Bài học | Nội dung | Bài tập |
|---|---|---|
| Bài 18 | Sử dụng Icon & thư viện UI (React Native Paper / UI Kitten) | Làm lại form đẹp hơn |
| Bài 19 | Tạo custom component | Tách card sản phẩm, task, profile |
| Bài 20 | Reuse logic: Custom hooks | Viết hook đếm giờ hoặc toggle |
| Bài 21 | Responsive layout | App chạy tốt trên nhiều kích thước màn hình |
Bài 22: Dự án cuối khóa (Fullstack App)
Tên dự án: To-Do App Fullstack
Người dùng có thể đăng ký, đăng nhập, thêm – sửa – xoá to-do, đồng bộ với Firebase
Tính năng:
- Đăng ký & đăng nhập bằng email (Firebase Auth)
- Lưu danh sách nhiệm vụ (Firebase Firestore hoặc REST API riêng)
- Giao diện chia nhiều màn hình (Navigation)
- Responsive & thân thiện với người dùng
Tổng kết
- Số giờ học gợi ý: ~30–40 giờ
- Yêu cầu đầu vào: Biết JavaScript cơ bản, càng tốt nếu biết React
Thảo luận