RN,一起写HelloWord

Paste_Image.png

看到标题，相信大部分小伙伴都笑了,无奈啊... 上篇文章中，跟小伙伴已经分享了我自己的react-native开发环境配置，结合这些IDE，我们今天就简单的来看下react-native究竟是个什么鬼。

---

• 利用iterm2或者终端，在需要的目录路径下来创建我们第一个工程：
  react-native init HelloWorld

init_project.png

上面即是创建成功的截图，过程可能有点慢，要耐心等待会。其中的npm就是是随同NodeJS一起安装的包管理工具，我们所创建的工程也是由它来进行管理。

• 初始化好工程后，我们首先打开工程目录(命令行：open .即可)
  来看下大致结构：

Paste_Image.png

我们可以看下init都做了些什么。
在终端工程目录下，输入：
npm list
在输出内容中列出了从网络下载的依赖包及其版本号。
需要注意的一点是，RN在init时将项目需要用到的依赖包下载到当前目录下的mode_modules目录中，如果这些依赖包有了新的版本，当前目录下的这些依赖包并不会自动更新。

剩下的很直白的我们就不啰嗦介绍了，在这里我们可以看到.js两个文件，以后对应客户端的开发即是在这文件上进行操作。

打开index.iOS.js文件（我的默认是Sublime），将原有代码清除，写入下方代码块：

 import React, { Component } from 'react';
 import { AppRegistry, Text } from 'react-native';
 
 class HelloWorldApp extends Component {
   render() {
     return ( <Text>Hello world!</Text> ); 
  }
}
 // 注意，这里用引号括起来的'HelloWorldApp'必须和你init创建的项目名一致
 AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

你可以通过终端在工程目录下使用react-native run-ios或Xcode运行查看我们的第一句RN。
...............