根据学习软件编程语言的历史传统，最开始都要写一个"Hello world"程序。接下来，我们通过修改上一节创建的项目，在手机屏幕上显示出Hello world。

Hello World实现方法

首先选中Atom左边选项卡【File Tree】，点击【Add Project Folder】按钮，选择上一节创建项目的目录，即AwesomeProject目录。

添加完成之后，可以在【File Tree】中看到该项目的所有文件列表。由于React Native同时支持iOS与Android，因此在工程文件中，iOS应用的代码写在index.ios.js文件中，而Android应用的代码写在index.android.js中。

打开index.ios.js文件，删除其中所有的代码内容，并把下方的代码添加到index.ios.js文件中。

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

export default class AwesomeProject extends Component {
  render() {
    return (
      <Text>Hello world</Text>
    );
  }
}

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

在终端中，执行下面的命令，运行程序。程序运行后，在打开的iOS模拟器左上角可以看到显示出的“Hello World”提示信息。

react-native run-ios

我们简单介绍一下在index.ios.js文件中填写的代码含义：

1. 首先，通过import加载代码所需要的模块；
2. 继承Component实现AwesomeProject组件。注意名字需要和工程名一致，不可修改！
3. 注册AwesomeProject组件成为整个应用的根容器。

import和export

在Hello World代码中，我们使用到了关键字import。在React Native中，import用于加载其他模块的变量。除了import外，还有export关键字，通过export可以指定被其他模块导入（使用）的变量。比如，有下面的两个文件a.js与b.js。

// a.js
var hello = "hello";
export {hello};

// b.js
import {hello} from "./a.js"
console.log(hello) // hello

在a模块（文件）通过export关键字指定了可以被其他模块导入（使用）的变量--hello。b模块（文件）通过import关键字导入了a模块的变量hello, 并且打印出它的值。在使用import时，需要在大括号({})中，写上需要导入的变量名。

还有一种import方法可以不需要指定变量名就可以将其导入。例如，我们对a.js与b.js文件进行如下的修改。

// a.js
var hello = "hello";
var other = "export default"
export {hello};
export default other

// b.js
import otherExport, {hello} from "./a.js"
console.log(hello) // hello
console.log(otherExport) // export default

我们可以在a模块中通过代码export default，导出一个默认的变量。在b模块中导入的时候不需要指定具体的名字。本质上，a模块的export default操作，输出一个名称为default的变量，然后系统允许为它取任意名字，但一个模块内最多只能有一个export default。

Component与AppRegistry

在Hello World代码中，定义了一个名为AwesomeProject的组件（Component），并且使用AppRegistry内置模块进行了“注册”操作。我们在编写React Native应用时，会编写出很多组件，而一个App的界面，其实是各式各样组件的组合。组件本身的结构可以非常简单，唯一必须要做的是在render方法中返回一些JSX语句用于渲染组件。

AppRegistry模块则是用来告知React Native哪一个组件被注册为整个应用的根容器，只有这样React Native才知道从哪里开始渲染。

---