In-depth introduction to React Native 2: My first application, reactnative

In-depth introduction to React Native 2: My first application, reactnative

This is the second article in The React Native tutorial.

1. Environment Configuration

After the React Native environment is configured, you can start to create our first App.

Open the console, enter

react-native init AwesomeProject

The preceding command creates a project template named AwesomeProject in the current folder. Before running this command, run the cd command to the folder where you want to create react native.

Of course, it may take a long time to execute this command, and sometimes there may be various errors, such as no permission. In this tutorial, we use an initial project to modify and use it. The address is as follows:

Github: https://github.com/CellChen/react-native-init

After the download, find the tar folder, which is the project we need.

The project file is as follows: (this tutorial is mainly for iOS development. Therefore, the android and iOS directories are similar .)

It can be seen that the project mainly consists of index. ios. js and ios projects.

Open the console and make sure that the directory to which the current console is directed is AwesomeProject. Enter

npm start

 

This command is mainly used to start the local server for development.

After the server is started, you can use xcode to open the ios project, compile and run it, and you can see this most initial project ~~

We can try to modify the index. ios. js file to see the effect ~

Use the file editor (sublime is recommended for personal use, which is nice-looking, easy-to-use, and many plug-ins ~) Open index. ios. js and you can see the following code:

Modify 20th lines of code"This is my first React Native application"

Switch back to the iphone simulator and refresh CMD + R. You can see that the title on the simulator is changed to our latest modified text ~ (If the command + R refresh shows the previous text, you can stop the server and re-open it ~)

Well, the above is our first React Native application. It doesn't matter if you don't understand the code in the project. It will be explained later ~