React Native Study notes (i) React native environment under MAC OS X

This paper introduces the construction process of react native environment under Mac OS x system.

1. Environmental Requirements:
1) MAC OS X operating system
2) Xcode6.4 or later
3) node.js4.0 or later
4) Watchman and flow

2. Installation process
1) node. JS installation can download the latest version in node. JS's official website https://nodejs.org/. The node-v4.4.2.pkg version is downloaded here. Just double-click to run the installation. To see if the installation is successful, enter the following command in the terminal:

   $node-v

If you can display version information, the installation is successful.
2) Installation of Watchman and Flow: Watchman is used to monitor file changes, flow is for type checking. It is recommended to use Homebrew installation, Terminal command:

$ brew install watchman$ brew install flow

3) Install the REACT-NATIVE-CLI command line tool via NPM.

$npm-g react-native-cli

Where-G This parameter indicates a global installation.
If you need administrator privileges during Setup, add sudo to the command, and then enter the administrator password. As follows:

$sudo-g react-native-cli

At this point the environment has been built. We can create a small demo to check if the environment is built successfully.

3. Create React Native Project
Use the following command to create a project project file for react native

react-native init AwesomeProject

The above prompts indicate that there is no problem with the environment configuration.

4. Implementation of Project Engineering
There are two ways to do this, either way.
1) using the command line method, enter the following command in the terminal:

$react-native run-ios

2) Locate the Awesomeproject.xcodeproj file, and then double-click Open, COM + R to run directly.

5. Issues that may be encountered
For this demo, the official web tutorial seems to be here to run. But the first time I did not run successfully, but the phone on the entire screen with red error prompts.
1) The address of the server in delegate is not replaced, as follows:

/** * Loading JavaScript code-uncomment theOne you want. * * OPTION1* Load fromDevelopment server. Start theServer from  theRepository Root: * * $ NPM start * * toRun  ondevice, change ' localhost ' to  theIP Address ofYour computer * (You canGetThis byTyping ' ifconfig ' into  theTerminal andselecting the* ' inet ' value under ' en0: ') andMake sure your computer andIOS Device is * on  theSame Wi-Fi network. */jscodelocation = [Nsurl urlwithstring:@"Http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

There is a clear explanation in the comments above that localhost needs to be replaced with the IP address of the local computer. And the view method is given, enter the following command in the terminal:

$ ifconfig

Then look for En0: Under the IP address, complete localhost for the native IP address replacement.
2) need to make sure node serve service is already running
You can execute the NPM start command. Sometimes this command is executed, and 8081 ports may be occupied by other processes, such as:

You can follow the instructions below to find the process that occupies port 8081

-n-i4TCP:8081

Use the following command to close the process:

$ kill -990587

Where: The syntax for this command is:

$ kill -9 <PID

You can know that 90578 is the ID number of the process.
After you close the occupied process, you can restart the node Server service, such as the service is turned on.

Running on the phone:

So far react Native environment building and the first React Native project Hello World program has been introduced.
Recommend some learning react native address links:
Http://reactnative.cn/docs/0.25/getting-started.html
Https://github.com/fbsamples/f8app
http://makeitopen.com/tutorials/building-the-f8-app/planning/

React Native Study notes (i) React native environment under MAC OS X