Cài đặt React Native trên Mac

Hướng dẫn cài đặt React Native trên MAC OS, cài đặt React Native đơn giản chi tiết

Để học tập và làm việc với React Native thường lập trình viên sẽ chọn hệ điều hành MAC OSX để sử dụng, vì vậy sau đây chúng ta sẽ từng bước cài đặt môi trường lập trình React Native trên MAC OSX

Môi trường build app React Native gồm hai phần:

1, Build ứng dụng cho IOS OS

2, Build ứng dụng cho Android OS

Bước 1: Cài đặt môi trường phát triển React Native và build app cho hệ điều hành IOS

React Native sử dụng ngôn ngữ Javascript, và sử dụng manager package(quản lý thư viện JS) là NPM của thằng NodeJS

Đầu tiên chúng ta kiểm tra xem máy tính của mình đã cài nodejs và npm chưa?
Bật terminal lên và kiểm tra node version bằng lệnh:

node -v

Kiểm tra version của npm bằng lệnh:

npm -v

Khi máy đã cài đặt sẵn sẽ có kêt quả như sau:

Nếu máy tính của bạn chưa cài nodejs thì các bạn làm theo hướng dẫn sau để cài nodejs: Cài nodejs trên MAC OS

Sau khi đã cài đặt Nodejs thành công chúng ta bắt đầu cài đặt React Native CLI lên máy tính của mình bằng lệnh sau:

brew install watchman

npm install -g react-native-cli

nếu không cài được thì thử bằng lệnh sau:

sudo npm install -g react-native-cli

Máy bạn cần phải có XCode để thực hiện bước tiếp theo :D 

Cài đặt: Command Line Tools ta chạy lệnh sau:

xcode-select --install

Bấm nút: install và chờ cài đặt xong :D

Môi trường để phát triển và build ứng dụng React Native cho IOS đã hoàn tất, giờ chúng ta sẽ tạo thử một ứng dụng và chạy bằng máy ảo xem sao nhé:

Bật terminal và bắt đầu quẩy:

mkdir studyreactnative

cd studyreactnative

react-native init demoapp

hoặc sử dụng lệnh sau để dùng phiên bản React Native mình cần:

react-native init demoapp --version 0.55.7

Chạy ứng dụng react native với máy ảo bằng lệnh:

cd demoapp

react-native run-ios

Vậy là chúng ta đã hoàn thành cài đặt môi trường phát triển và build app chạy trên simulator nhé :D

Bước 2: Cài đặt môi trường build app cho Android

Việc đầu tiên là bạn cần cài đặt Android Studio cho Mac OS, nếu bạn chưa cài thì xem hướng dẫn cài đặt Android Studio ở đây

Khi máy của bạn đã có môi trường Android SDK, khi cài Android Studio mặc định đường dẫn của Adnroid SDK là:  /Users/<username>/Library/Android/sdk

Bây giờ bạn bật termial lên và gõ lệnh sau để cài đặt evironment SDK cho terminal:

nano ~/.bash_profile

Sau đó bạn copy đoạn code này vào, mục đích dẫn tới chỗ bạn chứa thư mục Android SDK

export ANDROID_HOME=/Users/tinhngo/Library/Android/sdk

export PATH=$PATH:$ANDROID_HOME/tools

export PATH=$PATH:$ANDROID_HOME/tools/bin

export PATH=$PATH:$ANDROID_HOME/platform-tools

trong đó username là tên máy tính của bạn ví dụng máy của mình là tinhngo: 

export ANDROID_HOME=/Users/tinhngo/Library/Android/sdk

Copy code vào xong

Bấm Ctrl + O -> Enter
Ctrl + X 

Gõ lệnh kiểm tra đã config SDK đúng chưa: 

adb 

Kết quả khi cài SDK thành công

Vậy là bạn đã cài thành công môi trường build Android cho React Native

bây giờ bạn vào project demoapp mà mình đã tạo từ trước, và build app cho android:

Bật cái máy ảo lên trước nhé, hoặc cắm điện thoại vào máy tính

Bât terminal lên và quẩy thôi:

cd studyreactnative/demoapp 
react-native run-android

Oke chờ đợi React Native build app cho android nhé :D

- Lưu ý: Khi dùng lệnh react-native run-android mà không được rất có thể là do project Native Android của app React Native có vấn đề, để kiểm tra bằng cách ta bật Android Studio lên chọn "Open project" -> tìm tới project React Native cần kiểm tra: studyreactnative/demoapp/android 
(thư mục android đây chính là project android lên ta có thể dùng android studio để mở ra và chạy như bình thường)

Đăng ký, like fanpage để theo dõi những bài viết mới nhất nhé