前面我们用React.createElement构建了一个简单的UI ，React 会将之转换为对应的本地对象。但对于复杂UI来说（比如那些组件嵌套的UI），代码会变得非常难看。
确保App保持运行，回到文本编辑器，修改index.ios.js中的return语句为：

return <React.Text style={styles.text}>Hello World (Again)</React.Text>;

这里使用了JSX语法，即JavaScript 语法扩展，它基本上是将JavaScript代码混合了HTML风格。如果你是一个web开发人员，对此你应该不会陌生。 在本文中，JSX随处可见。

保存 index.ios.js回到iPhone模拟器，按下快捷键 Cmd+R，你会看到App的显示变成了 “Hello World (Again)”。

重新运行React Navtive App如同刷新Web页面一样简单。

因为你实际上是在和JavaScript打交道，所以只需修改并保存index.ios.js，即可让App内容得到更新，同时不中断App的运行。

注意:
如果你还有疑问，你可以用浏览器在看一下你的“Bundle”内容，它应该也发生了变化。

好了，“Hello World” 的演示就到此为止；接下来我们要编写一个真正的React App了！

实现导航

这个demo使用了标准的UIKit中的导航控制器来提供”栈式导航体验“。接下来我们就来实现这个功能。

在 index.ios.js, 将 PropertyFinderApp 类修改为 HelloWorld:

class HelloWorld extends React.Component {

我们仍然要显示“Hello World”字样，但不再将它作为App的根视图。
然后为HelloWorld加入以下代码：

class PropertyFinderApp extends React.Component {
  render() {
    return (
      <React.NavigatorIOS
        style={styles.container}
        initialRoute={{
          title: "Property Finder",
          component: HelloWorld,
        }}/>
    );
  }
}

这将创建一个导航控制器，并指定了它的外观样式和初始route（相对于HelloWorld视图）。在web开发中，routing是一种技术，用于表示应用程序的导航方式，即哪个一页面（或route）对应哪一个URL。
然后修改css样式定义，在其中增加一个container样式：

var styles = React.StyleSheet.create({
  text: {
    color: "black",
    backgroundColor: "white",
    fontSize: 30,
    margin: 80
  },
  container: {
    flex: 1
  }
});

flex: 1的意思稍后解释。
回到模拟器，按 Cmd+R 查看效果:

这个导航控制器有一个根视图，即图中显示的”Hello World“文本。非常好——我们的App已经具备了基本的导航功能。是时候显示一些”真正的“UI了！