Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Đăng nhập
Xem tất cả kết quả
Menu
Đăng nhập Đăng ký miễn phí

React Native by Projects: From Basics to Pro

React Native Thực Chiến: Từ Cơ Bản Đến Chuyên Gia

React Native Thực Chiến: Từ Cơ Bản Đến Chuyên Gia

Xây dựng ứng dụng thực tế với React Native, tích hợp API, Xác thực, Cử chỉ, Hoạt ảnh & Ứng dụng Nâng cao sử dụng RN CLI

4.4
(69 đánh giá)
720 học viên
Giảng viên
Niraj Dhungana
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
79.000đ 349.000đ -77%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
34.5 giờ video
294 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 07/06/2026
#App Development #Mobile Development #React Native #Typescript

Bạn sẽ học được gì

Hướng dẫn đóng gói ứng dụng để xuất bản lên Play Store
Cách làm việc với TypeScript và React Native
Học cách sử dụng React Native CLI thay vì Expo
Cách thêm mã native vào ứng dụng React Native của bạn

Yêu cầu

Bạn cần có một ít kinh nghiệm lập trình với React Native. Biết Expo là một lợi thế.
Bạn cần hiểu rõ về JavaScript
Một máy tính có kết nối internet.

Đối tượng phù hợp

Khóa học này dành cho người mới bắt đầu với React Native
Dành cho người muốn nâng cao kỹ năng React Native
Dành cho người muốn xây dựng dự án portfolio ấn tượng

Nội dung khóa học

19 phần • 291 bài giảng
1 Lịch sử khóa học
2 Một yêu cầu nhỏ
1 Hướng dẫn cài đặt
2 Kiến thức cơ bản
3 Môi trường cần thiết
4 Cài đặt Node JS - MAC
5 Cài đặt Node JS - Windows
6 Tạo ứng dụng mới với Expo
7 Cài đặt Watchman - MAC
8 Cài đặt VS Code - MAC
9 Cài đặt VS Code - Windows
10 Chỉnh sửa ứng dụng mặc định
11 Thiết lập JAVA Home - MAC
12 Cài đặt Android Studio - MAC
13 Cài đặt Android Emulator - MAC
14 Cài đặt xCode - MAC
15 Cài đặt Cocopods - MAC
16 Cài đặt JDK - Windows
17 Cài đặt Android Studio - Windows
18 Chạy ứng dụng
19 Thiết lập lệnh Code - MAC
1 JSX
2 Component tùy chỉnh
3 State
1 Mã nguồn cho phần này
2 Tại sao nên dùng TypeScript
3 Cấu hình ts
4 Cách sử dụng TypeScript
5 Mảng & Đối tượng
6 Interface
7 Any và Never
8 Hàm
9 Generics
1 Giới thiệu phần
2 Thiết lập dự án
3 Component cơ bản
4 Định dạng mã
5 Một số tiện ích mở rộng
6 Touchable & Pressable
7 Định kiểu cơ bản
8 Flexbox
9 Component tùy chỉnh
10 Interface & Generics nâng cao
11 Snippet tùy chỉnh
12 Chia bố cục với Flex
13 Giao diện máy tính
14 Map trong React
15 Giao diện nâng cao một chút
16 Giao diện kết quả
17 Cập nhật với State
18 Sửa lỗi Android Emulator
19 Xóa & Đặt lại phép tính
20 Sử dụng AI để viết mã
21 Tính toán biểu thức
22 Sửa các vấn đề
23 Phông chữ tùy chỉnh
1 API
2 Khởi tạo dự án
3 Chọn IOS Simulator
4 Ô nhập email
5 Text Input tùy chỉnh
6 Thuộc tính Text Input
7 Nút bấm tùy chỉnh
8 Sự kiện thay đổi Input
9 Thêm thành phần giao diện
10 Trang đăng ký
11 React Navigation
12 Điều hướng cơ bản
13 Sửa kiểu điều hướng
14 Cập nhật giao diện
15 QUAN TRỌNG - Tải máy chủ từ đây
16 So sánh Fetch API và Axios
17 useEffect
18 Gửi yêu cầu POST
19 Hiển thị lỗi
20 Cải thiện trải nghiệm người dùng
21 Đăng nhập
22 Điều hướng sau khi đăng nhập
23 Token đăng nhập
24 Async Storage
25 Cài đặt Tab Navigator
26 Tab Navigator
27 Vector Icons
28 Thay đổi biểu tượng Tab Bar
29 Context API
30 Custom Hook
31 Lấy thông tin người dùng bằng Token
32 Giao diện chờ
33 Đăng ký & Đăng nhập
34 Lấy danh sách sản phẩm
35 FlatList
36 Image
37 Định kiểu sản phẩm
38 Định dạng giá
39 Danh sách danh mục
40 Nút danh mục
41 Sản phẩm theo danh mục
42 Component khi danh sách trống
43 Component phân cách danh sách
44 Điều hướng lồng nhau
45 Lấy chi tiết sản phẩm
46 Hiển thị chi tiết sản phẩm
47 Trình chiếu ảnh
48 Tìm chỉ số cuộn
49 Hook useRef
50 Sửa các vấn đề giao diện đơn giản
51 Thêm nút hành động
52 Provider giỏ hàng
53 Cập nhật mặt hàng trong giỏ
54 Huy hiệu đếm số lượng giỏ hàng
55 Giao diện trang giỏ hàng
56 Tổng giá trị giỏ hàng
57 Xóa khỏi giỏ hàng
58 Xóa toàn bộ giỏ hàng
59 Context yêu thích
60 Giao diện trang yêu thích
61 Nút yêu thích
62 Điều hướng yêu thích
63 Kiểm tra trạng thái yêu thích
64 Giao diện trang hồ sơ
65 Giao diện khi không có ảnh đại diện
66 Thêm bộ chọn ảnh
67 Chọn ảnh
68 Tải ảnh lên
69 Cập nhật giao diện khi thay đổi ảnh
1 Thiết lập dự án
2 Vấn đề mới với Safe Area View
3 Kiểu cho các phiên bản khác nhau
4 Kiểm tra chế độ toàn màn hình Android
5 Trang chủ - Giao diện lần đầu truy cập - Phần 1
6 Trang chủ - Giao diện lần đầu truy cập - Phần 2
7 Cài đặt Vector Icons
8 Trang chủ - Giao diện lần đầu truy cập - Phần 3
9 Gói Image Picker
10 Thêm quyền cho Android
11 Yêu cầu quyền - Android
12 Yêu cầu quyền - Android 2
13 Alert API
14 Component Modal
15 Component Modal tùy chỉnh
16 Cảnh báo không hỏi lại quyền
17 Cảnh báo không hỏi lại quyền 2
18 Mở Cài đặt bằng Linking API
19 Hỏi lại quyền
20 Quyền trên IOS
21 Chọn ảnh
22 React Native File System
23 Lưu tệp - IOS
24 Lưu tệp - Android
25 Lưu các tệp đã chọn
26 Quét các tệp đã lưu
27 Hiển thị ảnh đã chọn trước đó
28 Giao diện tải
29 Chế độ xem dạng lưới
30 Giao diện chỉnh sửa trước đó
31 Tùy chọn nhấn giữ
32 Modal xác nhận
33 Xác nhận xóa
34 Xóa tệp ảnh
35 Cài đặt các gói cần thiết
36 Điều hướng
37 Điều hướng đến Canvas chỉnh sửa
38 Hiển thị ảnh lên Skia Canvas
39 Lấy ảnh từ Canvas
40 Lưu ảnh Canvas trên Android
41 Xuất ảnh trên IOS
42 Sử dụng Camera Roll trên Android
43 Kích thước Canvas & Header
44 Tính toán kích thước ảnh
45 Thêm biểu tượng mới
46 Tùy chọn chỉnh sửa ảnh
47 Điều hướng đến công cụ cắt ảnh
48 Giao diện Header công cụ cắt ảnh
49 Hiển thị ảnh
50 Tùy chọn cắt mặc định
51 Ý tưởng về hộp cắt
52 Tay cầm điều chỉnh cắt - Phần 1
53 Tay cầm điều chỉnh cắt - Phần 2
54 Thiết lập Gesture Handler
55 Thử nghiệm với sự kiện cử chỉ
56 Áp dụng hoạt ảnh
57 Áp dụng cử chỉ
58 Kiểu hoạt động của bộ chọn
59 Áp dụng tỷ lệ khung hình
60 Sửa chiều cao hộp cắt
61 Áp dụng tỷ lệ khung hình gốc
62 Tính năng Cắt hoạt động thế nào?
63 Tìm góc hoạt động
64 Cách thức hoạt động của cắt ảnh
65 Cử chỉ cắt tự do đơn giản
66 Giữ giá trị trong giới hạn
67 Theo dõi tỷ lệ thực tế
68 Khóa tỷ lệ - Trên Trái
69 Sửa các lỗi đã biết
70 Cắt từ Trên Giữa
71 Tỷ lệ khóa Trên Giữa
72 Đã sửa lỗi Trên Giữa
73 Tỷ lệ tự do Trên Phải
74 Tỷ lệ cố định Trên Phải
75 Tỷ lệ tự do Phải Giữa
76 Tỷ lệ khóa Phải Giữa
77 Tỷ lệ tự do Dưới Phải
1 TypeScript là gì?
2 Thiết lập môi trường & Trải nghiệm đầu tiên với TypeScript
3 Các kiểu cơ bản trong JavaScript
4 Suy luận kiểu
5 Quy tắc cơ bản để định nghĩa kiểu
6 Kiểu cho Đối tượng và Mảng
7 Từ khóa Type & Kiểu tùy chọn
8 Hàm
9 Interface
10 Kiểu Generic
11 Kiểu Any
1 Tôi đã nghĩ ra ý tưởng như thế nào?
2 Trước khi bắt đầu viết code
3 Cách tôi thiết kế ứng dụng
1 CẬP NHẬT QUAN TRỌNG
2 Cài đặt môi trường
3 Chạy MyFirstApp
4 Cách sửa lỗi - Giao diện không phản hồi
5 Chạy trên thiết bị thật
1 Khởi tạo dự án RN với TS
2 React Native & Typescript
3 Đoạn code tùy chỉnh
1 Tạo màn hình chính
2 Sử dụng biểu tượng
3 Thiếu kiểu & Tiêu đề ứng dụng
4 Component Nút bấm cho tương lai
5 Cài đặt Image Picker
6 Xin quyền người dùng
7 Chụp ảnh
8 Tái cấu trúc code
9 Chọn ảnh từ thiết bị
1 Thêm tính năng điều hướng
2 Để tôi giải thích
3 Chủ đề tùy chỉnh
4 Điều hướng đến ImageEditor
5 Đọc tham số đường dẫn
1 Phần đầu trang
2 Tái cấu trúc nâng cao một chút
3 Quay lại
4 Nền cho Image Editor
5 Ảnh kích thước hộ chiếu
6 Công cụ chỉnh sửa - Nút chọn
7 Tái cấu trúc lần nữa
8 Giao diện thông tin ảnh
9 Thanh trượt nén ảnh
1 Chọn ảnh lần thứ hai
2 Hộp xác nhận
3 Hộp xác nhận Phần 2
4 Quan trọng: Xử lý quay lại thủ công
5 Xử lý nút quay lại thủ công
1 Tại sao cần Native Module?
2 Mở dự án trong Android Studio
3 Tạo & Kết nối Native Module
4 Gọi hàm Native (Code)
5 Thêm kiểu cho Native Module
6 Thêm Promises
7 Lấy kích thước ảnh
8 Hiển thị kích thước ảnh
9 Logic trước khi viết code
10 Nén ảnh
11 Giải quyết đối tượng
12 Nén ảnh từ React Native
13 Sửa lỗi
14 Cập nhật giá trị thanh trượt
15 Cập nhật tỷ lệ nén
16 Lỗi là gì?
17 Sửa lỗi
18 Cập nhật kích thước ảnh
19 Hiển thị ảnh đã nén
20 Hiển thị đúng ảnh
21 Phá vòng lặp
22 Đặt lại trạng thái cũ
23 Hiệu ứng tải
24 Lưu ảnh
25 Nó có hoạt động không?
26 Hãy tìm và sửa lỗi
27 Hiển thị hoạt ảnh hoàn thành
28 Sửa hoạt ảnh
1 Lỗi liên quan đến quyền
2 Cập nhật quyền camera
3 Cảnh báo quyền cần thiết
4 Mở cài đặt ứng dụng
5 Sửa lỗi điều hướng không có ảnh
6 Làm sao lưu được mà không có quyền?
7 Quyền đọc & ghi file
1 Tạo biểu tượng ứng dụng
2 Thêm biểu tượng ứng dụng
3 Thêm màn hình chào
1 Sau đó thì sao?

Giới thiệu khóa học

Learn React Native the practical way — by building real-world apps with modern tools, TypeScript, animations, gestures, and image editing.

Are you ready to go from React Native beginner to confident mobile app developer?

This course is built for learners who don’t just want to watch tutorials, but want to build actual apps that showcase real skills — apps that you can proudly show in your portfolio.


What You’ll Learn

We start from absolute setup — installing Node.js, configuring Android Studio or Xcode (yes, we cover both Mac and Windows).
Even if you’re on Windows (like I was when I started!), you can still learn and build Android apps — and once you grow, you’ll be able to switch to Mac when you’re ready to publish to iOS.

Once your environment is ready, we’ll lay the foundation. You’ll learn:

  • The essentials of React needed for React Native

  • TypeScript basics as we use it throughout the course

  • Best practices for writing clean, maintainable code

Then, the real fun begins: we build projects that grow with your skillset.


Projects You'll Build


1. Calculator App

Your first app — but not just buttons and math. You’ll build clean UI using Flexbox, and learn how to handle layout challenges. Plus, you’ll get into TypeScript interfaces and generics to make your code robust.


2. E-Commerce UI App (with API integration)

Connect your app to a Node.js API (provided) and learn:

  • Authentication (login/signup)

  • Managing a cart

  • Displaying products using advanced FlatList features

  • Creating an image slider

  • Uploading images to the server


This project will give you real-world experience with API calls, state management, and user flows.


3. Image Editor App (The Star Project)

Here’s where it all comes together. This advanced project covers:

  • Requesting media permissions

  • Selecting and saving images

  • Building custom UI with React Native Skia

  • Working with animations and gesture handling

  • Using canvas to draw, crop, and edit images

By the end, you’ll have a stunning image editor that you can proudly include in your portfolio.


What You'll Get:

  • Practical, project-based learning

  • Modern React Native + TypeScript

  • Real-world skills like API integration, media handling, gestures & animations

  • A deep understanding of how to build and structure mobile apps


Requirements:

  • Basic understanding of JavaScript and web development

  • A computer with internet access

  • Most importantly: a passion to learn and build amazing apps!

I created this course because I learned React Native the hard way — and I want to help you learn it the smart way: by building.

So if you’re ready to stop jumping between tutorials and start creating real mobile apps...

Enroll now and start building your React Native journey today!

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học App Development
Hiển thị tất cả khoá học Mobile Development
Hiển thị tất cả khoá học React Native
Hiển thị tất cả khoá học Typescript
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊