React-native Getting Started Guide HelloWorld

React-native, the Facebook open source project, has recently been a mess of fire, and it's cool to use node. js to write iOS and Android native interface code. Dynamic updates are supported, and AppStore commits are not rejected.

Learning new technology is starting from the HelloWorld, we first make a HelloWorld look at react-native.

One, environment configuration
(1) Need a Mac (OSX), this is the premise, suggest or start a book.
(2) Install Xcode on Mac, suggest Xcode 6.3 or later
(3) Install brew, the command line installation tool on Mac
Terminal command:

Ruby-e "$ (curl-fssl https://raw.githubusercontent.com/Homebrew/install/master/install)"

(4) Installation node.js:https://nodejs.org/download/

Brew Install node

(5) Recommended installation of Watchman,

Brew Install Watchman

(6) Install Flow:

Brew Install Flow

OK, according to the above 6 steps, you should have already configured the environment, can open the react-native journey.

Second, create the project

Now we need to create a react-native project, so we can follow the steps below:
Open the terminal and start the react-native development journey.

(1) Installing command-line tools

sudo npm install-g react-native-cli

(2) Create an empty project

React-native Init HelloWorld

(3) Locate the HelloWorld project you created, and double-click Helloworld.xcodeproj to open the project in Xcode. Xcodeproj is a project file for Xcode.

Let's take a look at the generated file

Open the iOS directory

(4) in Xcode, use the shortcut cmd + R to start the project. Basic Xcode functionality can be familiar, such as the selection of simulators.
After the boot is complete, you will see the React-packger and iOS simulator, the specific effect is as follows, stating that you created the project successfully.

Third, change the HelloWorld

The code directory structure inside Xcode is temporarily out of control, open the HelloWorld project folder and locate the Index.ios.js file.
The Index.ios.js file is the entry file for the React-native JS development journey. First, a perceptual understanding, modify a
Some text, the next one will read the code inside. Open the Index.ios.js file with a text editor.
(1) Find the Code <Text></Text> section:

<Text style={styles.welcome}>
Welcome to React Native!
</Text>

Modified to read as follows:

<Text style={styles.welcome}>
React-Native Introductory learning www.cnblogs.com/likwo
</Text>

(2) Find the Code

welcome: {
fontSize: 20,
textAlign: ‘center‘,
margin: 10,
},

Modified to read as follows:

welcome: {
fontSize: 20,
textAlign: ‘center‘,
margin: 10, color: ‘red‘,
},

Cmd+r directly look at the effect, see if the red has been modified

Four, congratulations, you have learned HelloWorld, feel helpful, please order a praise!

React-native Getting Started Guide HelloWorld