Build React native development environment

Original address: http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/setup-react-native-development-environment/

Installing Xcode

Search for downloads from the App Store. An Apple ID account is required.

Installing homebrew

Open terminal and execute the following command to install. Please refer to homebrew website (http://brew.sh/) for details.

Install Homebrew

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

After the installation is complete, use the Brew Doctor command to check if the installation was successful. Follow the prompts to resolve the corresponding issue and dismiss the warning.

Installing the Android SDK

The Android SDK can be easily installed to the default directory "/USR/LOCAL/OPT/ANDROID-SDK" via homebrew. Please execute the following command in terminal.

Install Android SDK

# no need VPN
brew install android-sdk

You need to set the environment variable $android_home, $PATH.

Install Android SDK

#Open the environment variable configuration file by executing the following command in terminal
sudo nano ~/.bash_profile
#Paste the following instructions to save the environment variables (you need to log out and log in MAC again)
export ANDROID_HOME=/usr/local/opt/android-sdk
export PATH=$PATH:$ANDROID_HOME/bin:$ANDROID_HOME/tools
#Press Ctrl + X to save

Updating the Android SDK component (requires a VPN to be hung)

You can open the Android SDK Update Management tool by executing the "Android SDK" in terminal.

If you install the components in the Android SDK, note that the "Android SDK Build-tools" version requires 23.0.1, and you can not install the "Intel x86 atom_64 System Image" and "If you use Genymotion" Intel x86 Atom System Image.

Installing Flow and Watchman

Please execute the following two commands in terminal.

Install Flow

# no need VPN
brew install flow
brew install watchman

Installing Nodejs

Download and install the latest version of Nodejs (current version: v4.3.1) from Nodejs official website (https://nodejs.org/en/).

Installing REACT-NATIVE-CLI

"React-native-cli" can be easily installed with Nodejs. Please execute the following commands in terminal (note using the "sudo" and "-g" options).

Install REACT-NATIVE-CLI

# no need VPN
sudo npm install -g react-native-cli

Installing Genymotion

First install VirtualBox, from Baidu Search can.

The genymotion is more fluid and recommended for installation than the emulator that comes with the Android SDK. Need to go to the official website (https://www.genymotion.com/) to register a personal user account.

The VirtualBox5.0.14 and Genymotion2.6.0 packages are available on the removable hard drive.

Installing Webstorm 10

Webstorm can support JSX syntax well, and can format code files, suitable for developing react native projects. Version 10.0.4 can be downloaded from the Webstorm official website (https://confluence.jetbrains.com/display/WI/Previous+WebStorm+Releases). In the collaboration platform, you can find the registration code.

Create React native Empty project

It is recommended that you create a root directory for the React native project, such as: ~/rctdev, and then execute the following command in terminal (which may take a few minutes):

Create first Project

# no need VPN
cd ~/RCTDev
react-native init NCFirstProject

You can create a new project named "Ncfirstproject".

Editing JSX code files with Webstorm

Open the Directory "~/rctdev/ncfirstproject" with Webstorm, and double-click Open index.ios.js file. Wait for Webstorm to recognize the JSX code syntax, and then click Switch Toggle.

On the Webstrom command line, enter the "npm Install" command to initialize the "React Native" dependency.

install dependencies of react-native

# no need VPN
npm install

Running in the iOS emulator

On the Webstrom command line, enter react-native Run-ios to open the iOS simulator and run the Change project.

Shortcut keys:

• Command+r Modify any JS code, you can change the shortcut key to reload the app to see the effect.
• Ctrl+command+z Open the menu to enable auto-reload, view frame rate, review elements, and more.

Running in the Android emulator

First, you need to log in to Genymotion and install an Android image. After you run the Android image, you can perform "react-native run-android" in the webstorm command window.

Shortcut keys:

• Command+m Open the menu, you can choose to reload the app, enable auto reload, view frame rate, review elements, and more.

Build React native development environment