RN学习2——客户端开发者的一些准备工作

从具体开发实践的角度，这里本应该是第三步，因为第二步是我将现有项目进行了RN集成，并实现了一些混编的小功能后，才逐步总结出来的下面一些实践经验。下面的部分先写一下，第三章再介绍如何集成现有项目并进行简单开发。

一、 RN 开发前的一些必要准备技能

如果你是一个客户端开发，要对js和native的交互很熟悉，起码要懂js的语法，了解react和ES6是怎么回事（本人完全不懂react.js，表示实践起来非常吃力）。

如果你是一个前端开发，那你一定要很熟悉react.js，因为你开发主要靠这个了，混编是一个很有门槛的技术点。

这里主要介绍客户端开发应该具备的知识：

• 1、javascript的基本语法，变量、命名等等。

  如果你是一个老鸟，估计也就10分钟就好了

• 2、react.js。

  react facebook给js的重新定义。现在还只是0.14.7，表示这还是一个飞速发展而且尚有不足的组件。非常性感，非常前卫，值得学习。从一个客户端开发者的角度（区别于前端），它的基本特点就是增加了class的概念和生命周期的概念，以及component的概念（js逻辑代码直接嵌套html的jsx语法）。

  这里建议用半天到一天时间进行学习和研究，因为一方面毕竟react和react native在很多api上有着不同，更多的应该在实践中摸索，那样提高更快。开发时网页要常开react的官方文档。

• 3、ECMAScript 6

  前端开发是程序员届的特殊群体，总是能创造出一些从名字上就高端而又气势磅礴的名词和架构，如果你听到一个新的框架（架构？名称？）后一脸懵逼，这就对了...ES6就是这样一个东西，几乎可以说，ES6只保留了javascript旧版本的一些基本特性（这也就是为什么只要10分钟去看了），它几乎把js变成了一个全新的语言。ES6具有现代语言的各种优点和特性，如果你是一个iOS开发者，那么你就会发现它和swift竟然如此相似。

  ES6要花多少时间看我也不清楚，可能需要一本书。。。

二、RN server调试tips

如果服务已经开启了，不能启动server，先找到服务的pid，然后杀掉它：

$:lsof -n -i4TCP:8081 
$:kill -9  

三、选择开发工具

其实无非2个，其它除非很熟悉都不建议。一个是官方推荐的atom+nuclide，另一个是sublime3+若干插件。

第一个的好处是官方推荐，集成各种调试，server，log，断点好多强大功能，缺点是慢，因为这基本是一个IDE。而且在ES6下不能很好的完成代码格式化，亲测2天之后决心放弃。

另一个sublime基本是一个万能的工具了，我一直用它在mac下打开文本文件，写一些脚本，启动超快，而且网上找资料和资源也多。最终决定采用sublime进行开发，具体调试再使用一切其它工具进行辅助，下面简单介绍下sublime针对RN的配置：

• 1、下载安装 sublime3

• 2、安装 package controller

  sublime打开状态下下使用快捷键 ctrl+` ，把下面代码输入控制台并回车重启sublime。

  import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
  

以后安装插件只需要 cmd+shift+p 后选择 package controller:install package就可以安装了
* 3、安装 [React-native-snippets](https://packagecontrol.io/packages/react-native-snippets)
   
   这是一堆RN的快捷键，开发很方便，具体可以参见。
   
* 4、安装 [babel](https://github.com/babel/babel-sublime)

   这个是支持JSX和ES6的语法高亮。安装后需要通过打开菜单`view ` -> `Syntax ` -> `Open all with current extension as...` -> `Babel ` -> `JavaScript (Babel)`，选择babel为默认 javascript 打开syntax

* 5、安装 [jsxhint](https://packagecontrol.io/packages/SublimeLinter-jsxhint)
  
  JSX 代码审查，实时提示语法错误, 帮助快速定位错误点。这个除了安装package外，还要安装Node.js以及通过npm安装jsxhint。
  
        npm install -g jsxhint
具体可以参考官方文档：
* 6、安装 [jsformat](https://github.com/jdc0589/JsFormat)

  代码格式化工具，这个才是最重要的，不能正确格式化RN代码真是一件头疼的问题。format快捷键是`ctrl+alt+f`，格式化jsx的语法需要在`preferences `-> `Package Settings` -> `JsFormat` -> `Setting ` -> `Users`,输入以下代码：
  
  ```json
  {
    "e4x": true,
    // jsformat options
    "format_on_save": true,
    }
    ```