mobileBeginner

React Native 101 - Ứng dụng di động đa nền tảng

React Native 101 - Ứng dụng di động đa nền tảng

React Native + Expo từ cơ bản đến triển khai: UI linh hoạt, điều hướng, quản lý state, tích hợp camera/location/notifications và tối ưu hiệu năng. Hướng dẫn build/phát hành lên App Store/Play Store.

4.7 (20 đánh giá)16h👥 110 học viên📚 12 bài học📎 16 tài liệu🌐 Vietnamese
10.000.000
IT
Tạo bởi ITSS Training
🌐 VietnameseBeginner

Lộ trình học

Buổi 1
Ngày 1-2

Mục tiêu

  • Hiểu rõ React Native fundamentals
  • Setup Expo development environment
  • Tạo app đầu tiên

Nội dung

  • Giới thiệu React Native và hệ sinh thái Expo: ưu/nhược điểm, khi nào nên chọn Expo hoặc bare React Native.
  • Cài đặt Expo CLI và Expo Go; thiết lập môi trường trên iOS/Android, kết nối thiết bị thật và khắc phục lỗi thường gặp.
  • Khởi tạo project với create-expo-app, cấu trúc thư mục, scripts và cách cập nhật SDK qua các phiên bản.
  • Thực hành với components cơ bản, StyleSheet và so sánh style in JS so với CSS truyền thống; chiến lược tổ chức style.
  • Tạo app Hello World, hot reload/fast refresh và mẹo tăng tốc vòng lặp phát triển.
Buổi 2
Ngày 3-4

Mục tiêu

  • Navigation và routing
  • State management
  • API integration

Nội dung

  • Thiết lập React Navigation, cấu hình container và linking; chọn Stack/Tab/Drawer phù hợp với luồng ứng dụng.
  • Tổ chức cây điều hướng và params; xử lý back behavior tùy nền tảng và deep links cơ bản.
  • Quản lý state với Context/Zustand/Redux tuỳ quy mô; tách UI/pure logic để dễ test và tái sử dụng.
  • Tích hợp API với fetch/axios; chiến lược retry, cancel và hiển thị trạng thái loading/error thân thiện.
  • Bài lab: xây dựng flow điều hướng có protected routes và gọi API để hiển thị danh sách, chi tiết.
Buổi 3
Ngày 5-6

Mục tiêu

  • Native modules và device features
  • Camera và media
  • Push notifications

Nội dung

  • Tận dụng Expo modules để truy cập tính năng thiết bị: permissions, file system và sensors, kèm lưu ý quyền riêng tư.
  • Làm việc với camera và image picker: tối ưu kích thước ảnh, nén và tải lên server an toàn.
  • Sử dụng location services để lấy vị trí, cập nhật thời gian thực và tiết kiệm pin.
  • Thiết lập push notifications (Expo Notifications), đăng ký thiết bị và xử lý tương tác khi người dùng nhấn thông báo.
  • Bài lab: xây chức năng chụp ảnh, lưu bộ nhớ tạm và gửi thông báo khi tác vụ hoàn tất.
Buổi 4
Ngày 7-8

Mục tiêu

  • Advanced features
  • Project thực tế
  • Build và deployment

Nội dung

  • Giới thiệu custom native modules và khi nào cần tách khỏi Expo managed; cân nhắc trade‑offs và chi phí bảo trì.
  • Tối ưu hiệu năng UI: tránh re‑render, FlatList/SectionList và windowing; profiling để phát hiện bottleneck.
  • Kiểm thử với Jest và Detox: unit, component và E2E; tích hợp CI cơ bản để chạy test tự động.
  • Bài dự án: hoàn thiện một mobile app thực tế với auth, networking, cache và offline fallback.
  • Build và phát hành: cấu hình app.json/eas.json, ký ứng dụng và gửi lên App Store/Play Store.
Buổi 5
Ngày 9-10

Mục tiêu

  • State management nâng cao
  • Tối ưu kết xuất UI

Nội dung

  • Quản lý state nâng cao với Zustand/Redux Toolkit: tổ chức slices/store, side effects và selectors tối ưu.
  • Kỹ thuật memoization và tránh re‑render: React.memo, useMemo, useCallback trong bối cảnh React Native.
  • Xây dựng animations mượt mà với Reanimated/Moti; tối ưu để không drop frames khi tương tác.
  • Profiling trên thiết bị thật: đo thời gian render, theo dõi cảnh báo performance và tối ưu asset/image.
Buổi 6
Ngày 11-12

Mục tiêu

  • Làm việc với native capabilities
  • Bảo mật cơ bản

Nội dung

  • Thiết lập deep linking và universal links cho iOS/Android; điều hướng người dùng từ ngoài ứng dụng vào đúng màn hình.
  • Push notifications nâng cao: topic/subscription, action buttons và xử lý foreground/background chính xác.
  • Bảo mật cơ bản: SecureStore/Keychain, tránh lưu thông tin nhạy cảm dạng plain text và chiến lược token refresh.
  • Quản lý secrets với dotenv/EAS secrets; quy tắc không commit thông tin nhạy cảm vào VCS.
Buổi 7
Ngày 13-14

Mục tiêu

  • Testing và CI
  • Chuẩn bị phát hành

Nội dung

  • Viết unit và component test với Jest/RTL; chiến lược mock native modules ổn định.
  • Thiết lập E2E với Detox: cấu hình runner, viết kịch bản và ổn định bài test trên CI.
  • Thiết lập CI cơ bản: build, test và phát hiện hồi quy sớm; cache dependencies để rút ngắn thời gian.
  • Code signing: cấu hình chứng chỉ/keystore an toàn; chuẩn bị release notes súc tích và hữu ích.
Buổi 8
Ngày 15-16

Mục tiêu

  • Dự án tổng kết
  • Trình bày sản phẩm

Nội dung

  • Khép lại dự án cá nhân: rà soát tính năng, xử lý lỗi còn lại và tối ưu kích thước gói phát hành.
  • Tối ưu UI/UX: kiểm tra accessibility, cử chỉ và độ mượt tương tác trên thiết bị thật.
  • Demo tổng kết và phản biện: trình bày kiến trúc, trade‑offs và lộ trình mở rộng.
  • Định hướng phát triển tiếp: kế hoạch bảo trì, theo dõi sự cố và cải thiện hiệu năng sau phát hành.