基础篇_HelloWorld

资料来源

在终端的操作：
进入文件目录
react-native start 

进入文件目录
react-native run-ios

要理解 React Native 应用的基本结构，
首先需要了解一些基本的React的概念，比如 JSX 语法、组件、state状态 以及 props属性 。

Hello World

根据历史悠久的“传统”，我们也来写一个“Hello World”：

import React, { Component } from 'react';
import {
    AppRegistry,
    Text } from 'react-native';
class MyApp extends Component {
    render() {
        return (
                <Text>Hello world!</Text>
                );
    }
}

// 注意，这里用引号括起来的 'MyApp' 必须和你init创建的项目名一致
AppRegistry.registerComponent('MyApp', () => MyApp);

你可以新建一个项目，然后用上面的代码覆盖你的 index.ios.js 文件，然后运行看看。

那这段代码是什么意思呢？

初看这段代码，可能觉得并不像 JavaScript —— 没错，这是“未来”的 JavaScript.
首先你需要了解 ES2015 （也叫作ES6）—— 这是一套对 JavaScript 的语法改进的官方标准。但是这套标准目前还没有在所有的浏览器上完整实现，所以目前而言web开发中还很少使用。React Native内置了对 ES2015 标准的支持，你可以放心使用而无需担心兼容性问题。上面的示例代码中的 import、from、class、extends、以及() => 箭头函数等新语法都是ES2015中的特性。如果你不熟悉ES2015的话，可以看看 阮一峰老师的书，还有论坛的这篇 总结。

示例中的这一行 <Text>Hello world!</Text>

恐怕很多人看起来也觉得陌生。这叫做JSX——是一种在JavaScript中嵌入XML结构的语法。很多传统的应用框架会设计自有的模板语法，让你在结构标记中嵌入代码。React 反其道而行之，设计的JSX 语法却是让你在代码中嵌入结构标记。初看起来，这种写法很像web上的HTML，只不过使用的并不是web上常见的标签如 <div> 或是 <span> 等，这里我们使用的是React Native的组件。

---

上面的示例代码中，使用的是内置的<Text>组件，它专门用来显示文本。组件与AppRegistry上面的代码定义了一个名为 MyApp的新的组件（Component），并且使用了名为AppRegistry的内置模块进行了“注册”操作。你在编写React Native应用时，肯定会写出很多新的组件。而一个 App 的最终界面，其实也就是各式各样的组件的组合。组件本身结构可以非常简单 —— 唯一必须的就是在render方法中返回一些用于渲染结构的JSX语句。

AppRegistry模块

则是用来告知React Native 哪一个组件被注册为整个应用的根容器。你无需在此深究，因为一般在整个应用里 AppRegistry.registerComponent 这个方法只会调用一次。上面的代码里已经包含了具体的用法，你只需整个复制到index.android.js 文件中即可运行。