React Native - Tutorial

教程

React Native 跟前端的React框架很像，但是React Native是使用本地的组件像搭积木一样的把UI呈现出来而不是用web端的组件。所以为了理解React Native app的基本结构，你需要理解一些基本的React框架的概念，像JSX, components, state, and props。如果你已经知道了React框架，那你仍然需要学习一些React Native特有的东西，像本地组件之类的。这篇教程是针对所有人的，不管是你有没有React框架经验。

让我们开始吧！

Hello Word

按照我们码农的古老传统，我们必须先建一个除了说 "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);

如果你感觉很好奇，你可以直接直接修改上面的代码，web模拟器会实时更新 （原文链接tutorial,可以去玩玩），你也可以把上面的代码复制到你的index.ios.js或者index.android.js文件中，在你本地计算机上创建一个真正的app。

这里发生了什么？

这里的代码有些看起来又不像JavaScript，淡定！这是后话。
首先，ES2015（也称为ES6）是一套改进的JavaScript，现在是官方标准的一部分，但因为不是所有的浏览器都支持，所以在web开发中尚未使用。React Native自带ES2015支持，所以你可以使用它，无需担心兼容性。import, from, class, extends，和（）=>在示例中出现的这些语法都是ES2015功能。如果你不熟悉ES2015，你也可以只通过读教程中的示例代码来学习，如果你想了解更多，this page有关于ES2015功能很好的概述。

在这个示例代码中，另外一个不寻常的事情是<Text>Hello world!</Text>，这是JSX - 一种在JavaScript中嵌入XML语法。很多框架使用一个特殊的模板语言，它可以让你在标记语言里写代码。在React，正好相反， JSX让你在代码里写标记语言，它看起来像web上的HTML，除了没有web 的<div>或<span>，你可以使用React的组件，在这种情况下，<Text>是一个内置组件，只是用来显示一些文本。

Component and AppRegistry

因此，这段代码定义了一个新的组件 - HelloWorldApp，并用AppRegistry注册了它。当你正在构建一个React Native app，你会写出很多新的组件，你在屏幕上看到的所有都是某种组件，一个组件可以是很简单 - 唯一要满足的是有一个render函数，用来返回一些需要传递的JSX。

AppRegistry只是告诉React Native哪个组件是整个应用程序的根（root one）。你不必思考太多有关AppRegistry的事情 - 因为它有可能在你整个app中只被调用一次。它包含在这些例子，所以你可以将代码都粘贴到你的index.ios.js或index.android.js文件，并运行。

这个App做不了更多事情啦

想要让组件做更多的有趣的事情，你需要学习下一章节 'Props'。