Getting Start Building Android App with React Native

Introduce

React (sometimes styled React.js or ReactJS) is an open-source JavaScript library providing a view for data rendered as HTML. React views are typically rendered using components that contain additional components specified as custom HTML tags. React promises programmers a model in which subcomponents cannot directly affect enclosing components (“data flows down”); efficient updating of the HTML document when data changes; and a clean separation between components on a modern single-page application.

It is maintained by Facebook, Instagram and a community of individual developers and corporations.According to JavaScript analytics service Libscore, React is currently being used on the websites of Netflix, Imgur, Bleacher Report, Feedly, Airbnb, SeatGeek, HelloSign, and others.

Getting Started

Installing Dependencies

We recommend installing Node.js and Python2 via Chocolatey, a popular package manager for Windows. Open a Command Prompt as Administrator, then run:

1
2
choco install nodejs.install
choco install python2

The React Native CLI

Node comes with npm, which lets you install the React Native command line interface.

1
npm install -g react-native-cli

Constructing Android Development Environment

Setting up your development environment can be somewhat tedious if you’re new to Android development. If you’re already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.

Testing your React Native Installation

Use the React Native command line interface to generate a new React Native project called “AwesomeProject”, then run react-native run-android inside the newly created folder.

1
2
3
react-native init AwesomeProject
cd AwesomeProject
react-native run-android

If everything is set up correctly, you should see your new app running in your Android emulator shortly.

you can modify the app by change the react

HelloWorld for react-native codes as follows:
1
2
3
4
5
6
7
8
9
10
11
12
13
14

```javascript
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

Alibaba team creates another tools to build apk, called weex

referece articles:

react wiki)

react-native

weex