深入浅出React Native 3: 从零开始写一个Hello World
这是深入浅出React Native的第三篇文章。
将index.ios.js中的代码全部删掉，为什么要删掉呢？因为我们准备从零开始写一个应用~学习技术最好的方式就是自己动手写，看别人的代码一百遍的效果也不如自己写一遍来的效果大~
我们要做的事情主要分成以下两步：
1. 创建组件
2. 将创建好的组件显示在app上
打开index.ios.js文件，输入
var HelloWorld = React.createClass({ render: function () { return ( <View> <Text> Hello World </Text> </View> ) } });
查找React文档可以看到该createClass的描述
ReactClass createClass(object specification)
通过传入一个描述说明（specification）来创建一个组件类，创建的这个组件类必须实现render这个方法，并且render方法只能返回一个节点，当然该节点可以包含任意多的子节点。
像上面我们创建了一个HelloWorld的组件类，该类实现了render这个方法，该方法只返回<View>这个子节点，当然，在<View>这个节点下还包含了<Text>这个节点。
第一步就完成了，你看，就是这么简单~
下面我们开始第二步。
AppRegistry.registerComponent('AwesomeProject', function() {
return HelloWorld;
});
AppRegistry是运行React Native的应用程序的一个入口，一个应用程序的根组件必须通过调用AppRegistry.registerComponent方法将自己注册到应用中，这样原生系统才能正确加载并通过调用AppRegistry.runApplication来运行应用程序。
在我们的项目中，根组件就是我们的HelloWorld，至于第一个参数为什么是AwesomeProject，参看api可以看到
static registerComponent(appKey: string, getComponentFunc: ComponentProvider)
第一个参数指的是appKey，如果大家还记得的话，我们通过react native命令行生成的项目模板的名字就叫做Awesome~当然这个名字可以改的，至于怎么改，我们以后再说，现在先保持这个名字。
这两件事情做完以后，切换回模拟器，CMD+R刷新(注意，服务器要保持运行状态哦~如果服务器停掉的话，npm start命令，还记得吗~不记得的话请翻看之前的教程哦)，咦，怎么神马都没有~当然，也可能界面上出现一大片红色的错误信息~~
打开xcode可以看到其中有一段这样的错误：
系统找不到我们使用的React变量，所以报错了~其实不仅仅React我们没有定义，AppRegistry, View, Text我们都没有定义~所以下面我们要讲React Native定义的这些变量引入~
在index.ios.js文件的最上面添加下述代码~
var React = require('react-native'); var AppRegistry = React.AppRegistry; var View = React.View; var Text = React.Text;
因为AppRegistry, View, Text是React的一个属性，所以引入方式与React不同~
打开模拟器，CMD+R刷新下，就可以看到hello world显示在界面上啦~只是......位置有点点尴尬。
为了让这个显示在中间，我们为其添加一些style~
第一步需要引入StyleSheet变量。在引入变量的最后添加下面的代码：
var StyleSheet = React.StyleSheet;
然后在AppRegistry.registerComponent方法的上面（其实位置无所谓，只需要在引入变量的下面就可以了，之所以写在registerComponent前面，只是为了代码看起来好看些~），添加
var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center' } });
我们会在后续讲解StyleSheet，现在只需要知道，StyleSheet是一种样式的抽象，类似于CSS。在上述的style中，我们将container定义为水平、垂直居中。
修改HelloWorld组件，为其添加我们设置的样式。
var HelloWorld = React.createClass({ render: function () { return ( <View style={styles.container}> <Text> Hello World </Text> </View> ) } });
大功告成~在模拟器上刷新，就可以看到Hello World这几个字显示在iphone的中间啦~
