React Native là một framework phát triển ứng dụng di động, cho phép xây dựng app Android và iOS bằng JavaScript. Nó được phát triển bởi Facebook nhằm tối ưu hóa việc chia sẻ mã nguồn giữa các nền tảng. Với React Native, lập trình viên có thể xây dựng ứng dụng native hiệu suất cao mà không cần phải viết riêng biệt cho từng hệ điều hành.
Để đơn giản hóa quy trình phát triển, Expo được ra đời. Expo là một bộ công cụ và dịch vụ giúp bạn khởi tạo, phát triển và triển khai ứng dụng React Native nhanh chóng. Với Expo, bạn không cần thiết lập phức tạp như Android Studio hay Xcode ở bước đầu.
Bài viết này sẽ hướng dẫn chi tiết cách cài đặt môi trường phát triển React Native bằng Expo. Nội dung phù hợp cho cả người mới bắt đầu lẫn những ai muốn thiết lập một dự án nhanh chóng và hiệu quả.
Để hiểu rõ hơn về React Native cũng như các công cụ như Expo, bạn có thể tham khảo các chia sẻ từ Thầy Duy – Giảng viên Công nghệ Thông tin, Thạc sĩ CNTT tại Đại học Bách khoa Hà Nội. Thầy có nhiều năm kinh nghiệm giảng dạy và phát triển ứng dụng di động. Thầy thường xuyên chia sẻ kiến thức chuyên sâu về React Native thông qua:
- Kênh YouTube: https://www.youtube.com/@LeHongDuyCNTT
- Link Github: https://github.com/DuyLeHong
1. Chuẩn bị môi trường
Trước khi bắt đầu, hãy đảm bảo rằng máy tính của bạn đã cài đặt các công cụ sau:
1.1 Cài đặt Node.js và npm
Node.js là môi trường chạy JavaScript phía máy chủ, còn npm (Node Package Manager) giúp quản lý các thư viện JavaScript cần thiết.
- Truy cập https://nodejs.org/ và tải phiên bản Node.js LTS (Long Term Support).
- Cài đặt theo hướng dẫn của hệ điều hành.
Sau khi cài đặt, kiểm tra bằng lệnh:
node --version
npm --versionNếu hiển thị phiên bản, quá trình cài đặt đã thành công.
1.2 Cài đặt Git
Git được sử dụng để quản lý mã nguồn. Tải và cài đặt Git từ https://git-scm.com/.
Kiểm tra Git:
git --version2. Cài đặt Expo CLI
Expo CLI là công cụ dòng lệnh chính để tạo, phát triển và quản lý các dự án Expo.
2.1 Cài đặt Expo CLI toàn cục
Sử dụng npm để cài đặt:
npm install -g expo-cliSau khi cài đặt, kiểm tra phiên bản:
expo --versionNếu không muốn cài đặt toàn cục, bạn cũng có thể dùng npx để chạy Expo CLI tạm thời:
npx create-expo-app3. Tạo mới một dự án React Native bằng Expo
Dùng Expo CLI để khởi tạo dự án mới:
npx create-expo-app my-first-appTrong quá trình tạo, bạn sẽ được hỏi lựa chọn:
-
Template (giao diện mẫu):
- blank: dự án trống đơn giản.
- blank (TypeScript): dự án trống dùng TypeScript.
- tabs: dự án mẫu có sẵn thanh điều hướng (navigation tabs).
- Tên dự án và cấu hình bổ sung (nếu có).
Hệ thống sẽ tự động tải về các gói cần thiết và thiết lập cấu trúc dự án.
Cấu trúc dự án Expo thông thường:
my-first-app/
├── App.js
├── package.json
├── assets/
├── node_modules/
├── app.json
└── babel.config.js4. Chạy ứng dụng bằng Expo
4.1 Di chuyển vào thư mục dự án
cd my-first-app4.2 Khởi chạy máy chủ Expo
npm starthoặc:
npx expo start- Một cửa sổ trình duyệt sẽ tự động mở Expo DevTools.
- Một mã QR Code sẽ hiển thị trên terminal và trên Expo DevTools.
5. Xem ứng dụng trên thiết bị di động
5.1 Cài đặt ứng dụng Expo Go
Expo Go là ứng dụng hỗ trợ chạy thử dự án Expo trên điện thoại mà không cần build ra file APK/IPA.
- Android: Tải trên Google Play Store.
- iOS: Tải trên App Store.
Tìm kiếm “Expo Go” và cài đặt.
5.2 Quét mã QR
- Mở ứng dụng Expo Go trên điện thoại.
- Chọn “Scan QR Code” và quét mã QR hiển thị trên Expo DevTools hoặc trên terminal.
- Ứng dụng sẽ tự động tải và chạy trên điện thoại.
6. Các ghi chú quan trọng
- Fast Refresh: Khi chỉnh sửa mã trong dự án, thay đổi sẽ tự động cập nhật ngay trên điện thoại mà không cần reload thủ công.
- Tương thích thiết bị: Cần đảm bảo điện thoại và máy tính cùng kết nối một mạng Wi-Fi để quét QR thành công.
-
Giới hạn Expo Go: Nếu ứng dụng cần dùng các thư viện native chưa hỗ trợ trong Expo (như camera custom, Bluetooth chuyên sâu…), bạn sẽ cần chuyển sang Bare Workflow (
ejectkhỏi Expo).
7. Các lệnh quản lý dự án Expo
Một số lệnh thường dùng khi phát triển dự án bằng Expo:
| Lệnh | Mục đích |
|---|---|
npm start hoặc expo start | Khởi động máy chủ phát triển |
npm install <package> | Cài thêm thư viện |
expo install <expo-package> | Cài thư viện tương thích với Expo |
expo doctor | Kiểm tra lỗi tiềm ẩn trong dự án |
expo update | Cập nhật phiên bản Expo SDK mới nhất |
expo build:android | Build file APK cho Android (truyền thống, chuẩn bị ngừng hỗ trợ) |
eas build | Build ứng dụng Android/iOS với dịch vụ EAS mới |
8. Các bước tiếp theo sau khi cài đặt
- Thiết lập Visual Studio Code: Cài thêm extension như React Native Tools, Prettier để hỗ trợ viết code hiệu quả.
- Tìm hiểu Expo API: Expo cung cấp nhiều API tích hợp sẵn như Camera, Location, Notifications, dễ dàng sử dụng mà không cần native code.
- Học React Navigation: Cần nắm vững cách chuyển trang (screen) trong ứng dụng với thư viện React Navigation.
- Triển khai EAS Build: Khi cần tạo ứng dụng xuất bản thực sự (App Store, Google Play), hãy tìm hiểu EAS Build.
Kết luận
Với Expo, việc cài đặt môi trường phát triển React Native trở nên đơn giản và nhanh chóng hơn bao giờ hết. Bạn có thể khởi chạy, kiểm thử và phát triển các ứng dụng di động chuyên nghiệp mà không cần đối mặt với những cấu hình phức tạp ban đầu. Khi đã nắm vững quy trình cơ bản này, bạn sẽ dễ dàng mở rộng sang các kỹ thuật nâng cao hơn, từ phát triển tính năng tùy chỉnh đến triển khai sản phẩm thực tế.
Địa chỉ: Trung tâm CodeFresher – số 104 Hoàng Ngân, Cầu Giấy, Hà Nội.
Hotline: 0813188668 – 0332026803 (zalo / call)
Trả lời