Khởi tạo và cài đặt các công cụ cần thiết cho một project React Native

Trên Mac OS:

Các bước sau nếu đã được thực hiện rồi thì có thể bỏ qua.

1. Cài đặt Homebrew

Mở chương tình Terminal và gõ:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Nếu được hỏi nhập mật khẩu thì nhập, sau đó thêm cask vào Homebrew bằng lệnh:

brew tap caskroom/cask

2. Cài đặt các công cụ cần thiết:

– Watchman: Dùng để theo dõi thay đổi của các file trên Mac OS trong quá trình dev.
brew install watchman

– NodeJS: Dùng làm JavaScript runtime và cài đặt các package bằng NPM:
brew install node

– Yarn: Package Manager thay thế cho NPM, tốt hơn nhiều vì có cơ chế cache và chống thực thi JS trong lúc cài đặt:
brew install yarn

3. Cài đặt các gói NPM global cần thiết:

Sau khi cài đặt các tool phía trên, các gói NPM global cần thiết là:

npm i -g react-native-cli
Dùng để khởi tạo một project React Native cơ bản nhất, chỉ bao gồm 1 màn hình, chạy trên cả Android và iOS.

npm i -g rimraf
Gói npm thay thế cho rm của hệ thống, giúp xoá file nhanh hơn, có thể sử dụng được cả trên Windows để xoá những thư mục có đường dẫn quá dài.

npm i -g flow-bin
Công cụ thể kiểm tra kiểu dữ liệu trong JavaScript, nên cài đặt global để tích hợp với các IDE sau này.

npm i -g code-push-cli
Công cụ thể đẩy code lên server CodePush của Microsoft.

npm i -g react-native-git-upgrade
Công cụ để update project React Native, cả JS lẫn Native code.

npm i -g npm-check-updates
Công cụ kiểm tra update cho các dependency trong project.

npm i -g node-gyp
Công cụ hỗ trợ build các module C++ cho JavaScript, sử dụng nếu project có dùng đến các native module như Realm.

4. Cài đặt XCode:

Link:
https://itunes.apple.com/us/app/xcode/id497799835?mt=12

Sau khi cài đặt xong, chọn Command Line Tools cho XCode bằng cách mở XCode > Preferences > Locations như hình:

XCode

5. Cài đặt Android SDK và Android Platform-Tools:

Không cần dùng đến Android Studio vì chỉ cần Android SDK là đủ để build.

brew cask install android-sdk

brew cask install android-platform-tools

Tuỳ chọn: Có thể cài đặt thêm Android NDK để thực hiện instrumental test sau này.

brew cask install android-ndk

6. Cài đặt các chương trình cần thiết khác:

brew cask install genymotion
Chương trình giả lập các thiết bị Android. Cần có tài khoản trên Genymotion.com để sử dụng.

brew cask install visual-studio-code
Editor/IDE ngon nhất để code React Native, ngoài ra còn có Atom và WebStorm cũng là 2 lựa chọn tốt khác.

brew cask install iterm2
Command Line thay thế cho Terminal mặc định của Mac, khả năng tuỳ biến cao hơn và miễn phí.

brew cask install react-native-debugger
Công cụ debug app React Native, hỗ trợ redux và inspect layout.

brew cask install java
Java Runtime, không thể thiếu khi build app Android.

7. Tổng quan về cấu trúc của một project React Native:

Để tạo một project React Native, ta sử dụng react-native-cli , ở đây gọi tên project là RNPlayground

react-native init RNPlayground

RNInit

CLI sẽ tạo ra project có cấu trúc như sau:

Template

Trong đó:

/__test__ : Folder chứa các file code js để thực hiện test cho React Native. Framework test được sử dụng là Jest.
/android : Chứa các file code native cho Android, đây là folder project Android hoàn chỉnh.
/ios : Chứa các file code native cho iOS, đây là folder project iOS hoàn chỉnh.

Leave a Reply