60 giờ

React Native là một framework mã nguồn mở để xây dựng các ứng dụng đa nền tảng (apps) bằng cách sử dụng React và các tính năng gốc của nền tảng. Trong khóa học này, bạn sẽ đi từ những kiến thức cơ bản về React đến việc triển khai nâng cao hơn bằng React Native. Bạn sẽ được xem xét một loạt các component React khác nhau và các cách tạo kiểu cho chúng. Và bạn sẽ được thực hành sử dụng các phương thức tương tác di động khác nhau với React Native.

• Học cách sử dụng React Native để xây dựng các ứng dụng di động gốc thực sự cho iOS và Android.
• Phát triển các ứng dụng di động đa nền tảng (iOS và Android) mà không cần biết Swift, Objective-C hoặc Java/Android.
• Khám phá các tính năng cơ bản và nâng cao của React Native.

• Bất kỳ ai muốn sử dụng React để xây dựng ứng dụng di động gốc (native mobile apps).
• Mọi nhà phát triển di động muốn chỉ học một ngôn ngữ duy nhất để viết các ứng dụng di động đa nền tảng.

• Kiến thức cơ bản về JavaScript và React.
• KHÔNG yêu cầu kinh nghiệm phát triển Android/Java hoặc iOS (Swift, Objective-C).

Sau khi hoàn tất khóa học, học viên sẽ được cấp chứng nhận hoàn tất khóa học theo quy định của Cecomtech.

1. Module 1: JavaScript

• Cú pháp cốt lõi (Core Syntax)
• let và const
• Hàm mũi tên (Arrow Functions)
• Đối tượng: Thuộc tính và Phương thức (Objects: Properties and Methods)
• Mảng và các Phương thức của Mảng (Arrays and Array Methods)
• Mảng, Đối tượng và Kiểu tham chiếu (Arrays, Objects, and Reference Types)
• Toán tử Spread và Tham số Rest (Spread Operator and Rest Parameters)
• Destructuring
• Mã bất đồng bộ và Promises (Async Code and Promises)

2. Module 2: React.js

• React là gì? (What is React?)
• Tìm hiểu về JSX (Understanding JSX)
• Tìm hiểu về Components (Understanding Components)
• Làm việc với nhiều Components (Working with Multiple Components)
• Làm việc với Props (Working with Props)
• Hiển thị danh sách dữ liệu (Rendering Lists of Data)
• Xử lý sự kiện (Handling Events)
• Giao tiếp Cha-Con (Parent-Child Communication)
• Quản lý State (Managing State)
• Thêm về State (More on State)
• Dữ liệu người dùng nhập và Ràng buộc hai chiều (User Input and Two-Way Binding)

3. Module 3: Bắt đầu với React Native

• React Native là gì? (What Is React Native?)
• Tạo dự án React Native: Expo CLI và React Native CLI
• Tạo một dự án React Native mới
• Phân tích dự án đã tạo
• Chạy ứng dụng đầu tiên trên thiết bị thật!
• Thiết lập môi trường phát triển cục bộ

4. Module 4: Kiến thức cơ bản về React Native

• Khám phá các Core Components và cách tạo kiểu cho Component
• Làm việc với các Core Components
• Tạo kiểu cho ứng dụng React Native
• Khám phá Layouts và Flexbox
• React Native và Flexbox
• Sử dụng Flexbox để tạo Layouts
• Cải thiện Layout
• Xử lý Sự kiện (Handling Events)
• Sự khác biệt về tạo kiểu giữa iOS và Android
• Tạo nội dung có thể cuộn với ScrollView
• Tối ưu hóa danh sách với FlatList
• Tách Components thành các Components nhỏ hơn
• Tận dụng Props
• Xử lý các lần chạm với Component Pressable
• Thêm hiệu ứng gợn sóng (Ripple Effect) cho Android và giải pháp thay thế cho iOS
• Thêm và làm việc với màn hình Modal
• Làm việc với Hình ảnh và thay đổi Màu sắc

5. Module 5: Gỡ lỗi (Debugging) ứng dụng React Native

• Xử lý lỗi (Handling Errors)
• Ghi log ra Console
• Gỡ lỗi JavaScript từ xa (Debugging JavaScript Remotely)
• Sử dụng React DevTools
• Sử dụng tài liệu hướng dẫn (Documentation)

6. Module 6: Components, Layouts và Tạo kiểu Nâng cao

• Thiết lập ban đầu và phân tích ứng dụng mục tiêu
• Thiết lập các Screen Components
• Tạo các nút tùy chỉnh (Custom Buttons)
• Tạo kiểu cho Android và iOS
• Cấu hình trường TextInput
• Xử lý dữ liệu người dùng nhập và hiển thị hộp thoại cảnh báo (Alert Dialog)

7. Module 7: Xây dựng Giao diện Người dùng Thích ứng (Thích ứng với Nền tảng và Kích thước Thiết bị)

• Thiết lập chiều rộng động (Dynamic Widths)
• Giới thiệu về Dimensions API
• Điều chỉnh kích thước hình ảnh với Dimensions API
• Hiểu các vấn đề về Xoay màn hình (Screen Orientation)
• Thiết lập kích thước động (cho các hướng xoay khác nhau)
• Quản lý nội dung màn hình với KeyboardAvoidingView
• Cải thiện giao diện ở chế độ ngang (Landscape Mode)
• Cải tiến sâu hơn với useWindowDimensions
• Viết mã dành riêng cho từng nền tảng với Platform API
• Tạo kiểu cho thanh trạng thái (Status Bar)

8. Module 8: Điều hướng trong React Native với React Navigation

• Điều hướng là gì? (What Is Navigation?)
• Hiển thị các mục trong một lưới (Grid)
• Gói React Navigation
• Triển khai điều hướng giữa hai màn hình
• Hiểu cách sử dụng Hook useNavigation
• Làm việc với tham số Route để truyền dữ liệu giữa các màn hình
• Tạo kiểu cho tiêu đề (Header) và nền của màn hình
• Thiết lập các tùy chọn điều hướng một cách động
• Thêm các nút trên Header
• Thêm nút biểu tượng (Icon Button) vào Header
• Thêm điều hướng dạng Ngăn kéo (Drawer Navigation) và tạo một Drawer
• Cấu hình Drawer Navigator và Drawer
• Thêm, cấu hình và sử dụng các Tab ở dưới cùng (Bottom Tabs)

9. Module 9: Quản lý State toàn ứng dụng với Redux & Context API

• Lồng các Navigator (Nesting Navigators)
• Bắt đầu với Context API của React
• Quản lý State toàn ứng dụng với Context
• Sử dụng Context đã tạo với useContext
• Bắt đầu với Redux và Redux Toolkit
• Làm việc với các Redux Slices
• Quản lý Redux State và gửi đi các Actions (Dispatching Actions)
• Sử dụng Redux State trong các Components

10. Module 10: Gửi yêu cầu Http

• Gửi yêu cầu POST Http
• Lấy dữ liệu từ Backend (yêu cầu GET)
• Biến đổi và sử dụng dữ liệu đã lấy
• Sử dụng dữ liệu phản hồi từ các yêu cầu POST
• Cập nhật và Xóa dữ liệu Backend (yêu cầu UPDATE và DELETE)
• Quản lý trạng thái đang tải (Loading State)
• Xử lý lỗi yêu cầu

11. Module 11: Sử dụng các Tính năng Gốc của Thiết bị (Camera, Vị trí, và nhiều hơn nữa)

• Làm việc với gói Camera
• Làm việc với gói ImagePicker
• Làm việc với Bản đồ (Map)
• Làm việc với SQLite

12. Module 12: Thông báo Đẩy (Push Notifications)

• Thông báo là gì? (What is Notification?)
• Xử lý Thông báo Cục bộ (Local Notification)
• Thiết lập Thông báo Đẩy (Push Notification)
• Xử lý Thông báo Đẩy

13. Module 13: Xuất bản ứng dụng React Native

• Cấu hình Tên và Phiên bản ứng dụng
• Lưu ý nhanh về Biến Môi trường (Environment Variables)
• Thêm Biểu tượng (Icons) và Màn hình chờ (Splash Screen)
• Xây dựng (Building) cho iOS
• Xây dựng (Building) cho Android

14. Module 14: Đồ án

• Lập kế hoạch, phát triển và trình bày một đồ án cuối khóa.