根據學習軟件編程語言的歷史傳統，最開始都要寫一個"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才知道從哪里開始渲染。

---