I. Tổng quan

React Native là một framework mã nguồn mở để xây dựng các ứng dụng đa nền tảng bằng cách sử dụng React và các khả năng gốc của nền tảng. Trong khóa học này, bạn sẽ chuyển từ kiến thức cơ bản về React sang cách triển khai nâng cao hơn bằng React Native. Bạn sẽ xem xét một loạt các thành phần React khác nhau và 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 pháp tương tác di động khác nhau với React Native.

II. Thời lượng

40 giờ (5 ngày)

III. Mục tiêu khóa học

• Tìm hiểu 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 ứ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

IV. Đối tượng tham gia:

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

V. Điều kiện tiên quyết

• 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)

VI. Nội dung khóa học

1. Module 1: JavaScript- Lập trình với JavaScript

• Core Syntax – Giới thiệu ngôn ngữ JavaScript
• let and const – Sử dụng let và const
• Arrow Functions -
• Objects: Properties and Methods – đối tượng, thuộc tính, phương thức
• Arrays and Array Methods – Xử lý mảng
• Arrays, Objects, and Reference Types – Mảng, đối tượng và kiểu tham chiếu
• Spread Operator and Rest Parameters
• Destructuring – Truy cập dữ liệu bằng Destructuring
• Async Code and Promises - thao tác bất đồng bộ

2. Module 2: React.js – lập trình reactjs

• What is React? – Tổng quan React js
• Understanding JSX – Cấu trúc Javascript Syntax Extension
• Understanding Components
• Working with Multiple Components
• Working with Props – Trạng thái Props
• Rendering Lists of Data
• Handling Events – Quản lý sự kiện
• Parent-Child Communication - Truyền dữ liệu giữa React Components
• Managing State – Quản lý trạng thái
• More on State
• User Input and Two-Way Binding

3. Module 3: Getting Started with React Native – Tổng quan React Native

• What Is React Native? Tổng quan React Native
• Creating React Native Projects: Expo CLI Versus React Native CLI
• Creating a New React Native Project – Cấu trúc dự án React Native
• Analyzing the Created Project
• Running Our First App on a Real Device! – Chạy ứng dụng trên thiết bị thật
• Setting Up a Local Development Environment- Cấu hình môi trường lập trình

4. Module 4: React Native Basics - React Native cơ bản

• Exploring Core Components and Component Styling
• Working with Core Components
• Styling React Native Apps
• Exploring Layouts and Flexbox – Kỹ thuật Flexbox
• React Native and Flexbox
• Using Flexbox to Create Layouts – Tạo giao diện với Flexbox
• Improving the Layout
• Handling Events
• iOS and Android Styling Differences – Khác biệt giữa ios và android
• Making Content Scrollable with ScrollView – Tạo thanh cuộn nội dung
• Optimizing Lists with FlatList
• Splitting Components into Smaller Components
• Utilizing Props
• Handling Taps with the Pressable Component
• Thêm an Android Ripple Effect and an iOS Alternative
• Thêm and working with a Modal Screen
• Xử lý hình ảnh và Changing Colors

5. Module 5: Debugging React Native Apps – Tìm và xử lý lỗi React Native

• Handling Errors – quản lý lỗi
• Logging to the Console – xem lỗi trên console
• Debugging JavaScript Remotely
• Using the React DevTools – dùng React DevTools
• Using the Documentation

6. Module 6: Advanced Components, Layouts, and Styling – React nâng cao với Components, Layouts, and Styling

• Starting Setup and Analyzing the Target App – Mục tiêu ứng dụng
• Setting Up Screen Components – tạo giao diện màn hình
• Creating Custom Buttons – thiết kế buttons
• Styling for Android and iOS – Phong các thiết kế ios và android
• Configuring the TextInput Field – Thiết lập cho textinput
• Handling User Input and Showing an Alert Dialog-quản lý các thông báo

7. Module 7: Building Adaptive User Interfaces (Adapt to Platform and Device Sizes)- Thiết kế trải nghiệm Adaptive

• Setting Dynamic Widths
• Introducing the Dimensions API
• Adjusting Image Sizes with the Dimensions API
• Understanding Screen Orientation Problems
• Setting Sizes Dynamically (for Different Orientations)
• Managing Screen Content with KeyboardAvoidingView
• Improving the Landscape Mode UI
• Further Improvements with useWindowDimensions
• Writing Platform-Specific Code with the Platform API
• Styling the Status Bar

8. Module 8: React Native Navigation with React Navigation – Tạo điều hướng trong React Native

• What Is Navigation? – tổng quan điều hướngg
• Displaying Items in a Grid – Hiển thị dạng lưới
• The React Navigation Package – quản lý bằng package
• Implementing Navigation Between Two Screens – điều hướng giữa 2 màn hình
• Understanding the use of Navigation Hook
• Làm việc với Route Parameters to Pass Data Between Screens
• Styling Screen Headers and Backgrounds
• Setting Navigation Options Dynamically
• Thêm Header Buttons
• Thêm an Icon Button to a Header
• Thêm Drawer Navigation and Creating a Drawer
• Configuring the Drawer Navigator and the Drawer
• Adding, Configuring, and Using Bottom Tabs

9. Module 9: App-wide State Management with Redux & Context API

• Nesting NavigatorsGetting Started with React's Context API
• Managing App-Wide State with Context
• Using the Created Context with useContext
• Tổng quan Redux and Redux Toolkit
• Ứng dụng Redux Slices
• Quản lý Redux State and Dispatching Actions
• Ứng dụng Redux State in Components

10. Module 10: Sending Http Requests

• Phương thức POST Http Requests
• Fetching Backend Data (GET Requests)
• Transforming and Using Fetched Data
• Ứng dụng Response Data from POST Requests
• Cập nhật và xóa Backend Data (UPDATE and DELETE Requests)
• Quản lý the Loading State
• Quản lý Request Errors

11. Module 11: Lập trinh tương tác với Native Device Features (Camera, Location, and More)

• Làm việc với Camera package
• Làm việc với ImagePicker package
• Làm việc với Map
• Làm việc với SQLite

12. Module 12: Push Notifications – quản lý thông báo ứng dụng

• What is Notification? Tổng quan các thông báo
• Handle Local Notification
• Setup Push Notification
• Handle Push Notification

13. Module 13: Publishing React Native Apps – Triển khai ứng dụng react

• Cấu hình App Names and Versions
• A Quick Note About Environment Variables
• Thêm Icons and a Splash Screen
• Triển khai ứng dụng trên iOS
• Triển khai ứng dụng trên Android

14. Module 14: Project – Dự án cuối khóa học

• Xác định nhu cầu, lên kế hoạch phát triển ứng dụng cuối khóa.