介紹

React Native 和React很像，但是與React使用web元素構建空間不同的是，React Native使用的是原生控件。所以需要了解基礎的React概念，比如JSX、components、state 和 props。

Hello World

按照程序員古老的傳統(tǒng)，第一個app必須是一個啥也不干，只顯示hello world的App，如下：

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);

Hello world 代碼中有一些看起來不像JavaScript的東西，不要驚慌，這代表著未來。首先，ES2015(也稱作ES6)是一種用于改進JavaScript的官方標準，但是還沒有完全被所有的瀏覽器所使用。React Native 支持了ES2015的標準，所以開發(fā)者可以使用諸如import,from,class,extends和()=> syntax 這個樣的ES2015功能。如果想要更詳細的了解ES2015，這個網(wǎng)頁也許對你有所幫助。

還有一些令人感到陌生的代碼類似<Text>Hello world!</Text>。這就是使XML可以嵌入JavaScript的JSX語法。許多常見的框架為了可以在標記語言中嵌入代碼都使用了各自特殊的方式來模板化標記語言。在React中，這正好反了過來，JSX可以在代碼中嵌入標記語言。有些類似HTML中使用<div>或者<span>，React中使用了React的元素比如<Text>，用來顯示一段文字。

元素和App注冊

Hello World代碼定義了一個新的元素（Component）,并將其注冊到了AppRegistry。當待見React Native應用時，開發(fā)者將會注冊很多的元素（Component）。幾乎所有在屏幕上顯示出的東西，都是Component。一個Component可以非常簡單-只需要一個 render方法來return JSX 并渲染。

APPRegistry告訴React Native 哪一個元素是真?zhèn)€應用的跟元素。開發(fā)者可以不同過多的考慮AppRegistry，有可能整個App只會調用一次AppRegistry.registerComponent一次。

結尾

Hello World讓我們了解了 Component 和 JSX的概念，如果想要讓App做更多的事情，接下來需要了解props。