React Native学习-02-Hello React Native

介绍

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

Hello World

按照程序员古老的传统，第一个app必须是一个啥也不干，只显示hello world的App，如下：

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

class HelloWorldApp extends Component {
  render() {
    return (
      Hello world!
    );
  }
}

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

Hello world 代码中有一些看起来不像JavaScript的东西，不要惊慌，这代表着未来。首先，ES2015(也称作ES6)是一种用于改进JavaScript的官方标准，但是还没有完全被所有的浏览器所使用。React Native 支持了ES2015的标准，所以开发者可以使用诸如import,from,class,extends和()=> syntax 这个样的ES2015功能。如果想要更详细的了解ES2015，这个网页也许对你有所帮助。

还有一些令人感到陌生的代码类似Hello world!。这就是使XML可以嵌入JavaScript的JSX语法。许多常见的框架为了可以在标记语言中嵌入代码都使用了各自特殊的方式来模板化标记语言。在React中，这正好反了过来，JSX可以在代码中嵌入标记语言。有些类似HTML中使用

或者，React中使用了React的元素比如，用来显示一段文字。

元素和App注册

Hello World代码定义了一个新的元素（Component）,并将其注册到了AppRegistry。当待见React Native应用时，开发者将会注册很多的元素（Component）。几乎所有在屏幕上显示出的东西，都是Component。一个Component可以非常简单-只需要一个 render方法来return JSX 并渲染。

APPRegistry告诉React Native 哪一个元素是真个应用的跟元素。开发者可以不同过多的考虑AppRegistry，有可能整个App只会调用一次AppRegistry.registerComponent一次。

结尾

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