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

Source: Internet
Author: User
Tags administrator password node server

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 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:


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


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:

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.