Hướng dẫn setup môi trường để dev React Native

React Native cho phép xây dựng ứng dụng iOS và Android bằng JavaScript/TypeScript, nhưng để chạy được app native thật sự, môi trường máy dev cần được chuẩn bị đúng. Nếu thiếu JDK, Android SDK, Xcode hoặc biến môi trường, bạn sẽ rất dễ gặp lỗi build ngay từ ngày đầu tiên.

Bài viết này tập trung vào setup môi trường cho React Native CLI, phù hợp khi bạn cần can thiệp native code, dùng native module, build app iOS/Android trực tiếp hoặc chuẩn bị dự án cho team mobile nghiêm túc.

React Native CLI hay Expo?

Nếu bạn mới thử nghiệm ý tưởng, Expo là lựa chọn rất nhanh vì giảm nhiều bước cấu hình native. Tuy nhiên, nếu dự án cần native module riêng, cấu hình sâu Android/iOS, CI/CD build native hoặc tích hợp SDK đặc thù, React Native CLI sẽ cho bạn quyền kiểm soát tốt hơn.

• Chọn Expo khi cần prototype nhanh, app không phụ thuộc native SDK phức tạp.
• Chọn React Native CLI khi cần làm việc trực tiếp với thư mục android và ios.

Các công cụ cần cài

Theo tài liệu React Native hiện tại, môi trường cơ bản nên có Node.js phiên bản mới, JDK 17, Android Studio cùng Android SDK phù hợp. Với iOS, bạn cần macOS, Xcode và CocoaPods.

• Node.js 22.11.0 hoặc mới hơn.
• JDK 17 cho Android build.
• Android Studio, Android SDK Platform và Android SDK Build-Tools.
• Xcode nếu build iOS trên macOS.
• CocoaPods cho dependency native iOS.
• Watchman trên macOS để file watching ổn định hơn.

1. Cài Node.js

Nên dùng nvm hoặc một version manager tương tự để quản lý Node theo từng dự án. Điều này giúp team tránh lỗi mỗi người chạy một phiên bản Node khác nhau.

node -v
npm -v

Nếu dự án dùng Yarn hoặc pnpm, hãy thống nhất package manager ngay từ đầu và commit lockfile tương ứng.

2. Cài JDK 17

Android build cần Java Development Kit. Với React Native hiện tại, JDK 17 là lựa chọn nên dùng. Sau khi cài xong, kiểm tra bằng:

java -version

Nếu máy có nhiều JDK, hãy kiểm tra biến JAVA_HOME để đảm bảo terminal và Gradle đang dùng đúng bản.

echo $JAVA_HOME

3. Setup Android Studio

Cài Android Studio, sau đó mở SDK Manager và cài Android SDK Platform theo yêu cầu của React Native. Tại thời điểm viết bài, docs React Native hướng dẫn dùng Android 15/API 35 và Android SDK Build-Tools 36.0.0.

Trong Android Studio, kiểm tra các phần sau:

• Android SDK Platform.
• Android SDK Build-Tools.
• Android Emulator.
• Android SDK Platform-Tools.

4. Cấu hình biến môi trường Android

React Native và Gradle cần tìm được Android SDK. Trên macOS hoặc Linux, bạn có thể thêm vào shell config như ~/.zshrc hoặc ~/.bashrc:

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

Trên Windows, hãy cấu hình ANDROID_HOME trong Environment Variables và thêm platform-tools vào Path.

Kiểm tra adb:

adb version

5. Tạo Android emulator

Mở Android Studio, vào Device Manager và tạo một emulator. Nên chọn image ổn định, có Google APIs nếu app cần Google services. Sau khi tạo, start emulator rồi kiểm tra:

adb devices

Nếu dùng máy Android thật, bật Developer Options, USB debugging và kiểm tra thiết bị đã hiện trong danh sách adb devices.

6. Setup iOS trên macOS

Để build iOS, bạn cần macOS và Xcode. Sau khi cài Xcode từ App Store hoặc Apple Developer, mở Xcode ít nhất một lần để hoàn tất license và cài components cần thiết.

sudo xcode-select -s /Applications/Xcode.app
xcodebuild -version

Cài CocoaPods nếu máy chưa có:

sudo gem install cocoapods
pod --version

Khi clone dự án React Native có thư mục iOS, thường cần chạy:

cd ios
pod install
cd ..

7. Tạo project React Native mới

Với React Native CLI, bạn có thể tạo project mới bằng lệnh:

npx @react-native-community/cli@latest init AedevApp

Sau khi tạo project, chạy Android:

cd AedevApp
npm start
npm run android

Chạy iOS trên macOS:

npm run ios

8. Dùng React Native Doctor để kiểm tra

React Native có công cụ kiểm tra môi trường rất hữu ích. Chạy:

npx react-native doctor

Nếu có mục nào báo lỗi, hãy xử lý từng phần: Node, JDK, Android SDK, Xcode, CocoaPods. Đừng cố chạy app khi doctor còn báo lỗi nền tảng quan trọng.

Lỗi thường gặp

SDK location not found: thường do thiếu ANDROID_HOME hoặc file android/local.properties chưa trỏ đúng SDK.

sdk.dir=/Users/your-name/Library/Android/sdk

Unable to load script from assets: Metro bundler chưa chạy hoặc device không kết nối được tới dev server. Hãy chạy lại npm start và kiểm tra device/emulator.

Pod install failed: thường liên quan đến phiên bản Ruby/CocoaPods hoặc cache pod. Với dự án team, nên ghi rõ version tool trong README.

Checklist setup nhanh

1. Cài Node.js đúng version.
2. Cài JDK 17 và kiểm tra JAVA_HOME.
3. Cài Android Studio, SDK Platform, Build-Tools, Emulator và Platform-Tools.
4. Cấu hình ANDROID_HOME và platform-tools.
5. Tạo emulator hoặc kết nối thiết bị thật.
6. Trên macOS, cài Xcode và CocoaPods cho iOS.
7. Chạy npx react-native doctor.
8. Tạo project và chạy thử Android/iOS.

Kết luận

Setup React Native mất thời gian hơn frontend web vì bạn đang làm việc với cả JavaScript và native toolchain. Nhưng khi môi trường đã đúng, quá trình build, debug và release sẽ ổn định hơn rất nhiều. Hãy lưu checklist setup vào README của team để developer mới có thể onboarding nhanh và ít lỗi hơn.

Tham khảo thêm: React Native Docs – Set up your environment.