Getting Started with React Native Developing Your First React Native App

1. First create a directory (such as ReactNativeDir) to store the code of each ReactNative project

2. Use the React Native command tool to create (initialize) a ReactNative project (test):

react-native init test

Use Atom to open the test project, you can see the following important directories/files:

directory/file	illustrate
__test__	unit test folder
android	Native Android project folder
ios	Native IOS project folder
node_modules	Dependent third-party library directory
index.android.js	Entry file for Android App
index.ios.js	The entry file of IOS App
package.json	Ask the price of the engineering configuration of React Native

 

 

First through Android Studio, run the emulator or Android phone (here the emulator is opened)

implement

adb devices

Find the corresponding device number

Execute again (the current directory of the terminal is test at this time)

react-native run-android emulator-5554

 

After compiling and installing the application into the simulator, you can see the following screen in the simulator:

 

, so our first application has been successfully executed, but we haven't written a line of code yet. Now try to modify this interface.

Modify the render() function of app.js

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        {/* grady add begin */}
        <Text style={styles.welcome}>
            Hi this is my first RN program
        </Text>
        {/* grady add end */}
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }

You can see the following interface:

 

The new element is added successfully