React Native入门——IDE及其他相关基础技术

关于React Native的开发,其中一个问题是缺少好用的IDE,有些人说不就是JS么,搞一个记事本也就写了,那样虽然牛逼,但其实还是很头大的,有一款好的IDE还是能提升开发效率的,这里对几个还算能用的IDE进行比较,大家可以选择自己喜欢的IDE用于RN应用的开发。


1.Facebook推荐IDE——基于Atom的nuclide

nuclide是Facebook在开源React Native框架时同时开源的所谓官网的IDE,实际上是基于Github发布的开源编辑器Atom开发的React开发插件,基本界面如下:


个人感觉Sublime、VS Code还有这个最近被炒的火热的Atom,界面都很像,而且基本都是靠插件插出来的,而Atom其实就是用Node.js和WebKit搞出来的基于浏览器的桌面应用,Atom安装后还会附带安装apm(类似npm的包管理器)。

atom的安装可以直接在:https://github.com/atom/atom/releases/latest选择适合自己系统的安装包下载安装,比较简单。

nuclide可以在:https://github.com/facebook/nuclide根据官方的Readme进行安装,比较慢,耐心等。

或者可以在atom安装完成之后,使用atom自带的apm进行安装,如:apm install nuclide

atom的优势在于轻量和Facebook的支持,以及各种各样Sublime没有的插件,由于有Facebook的支持,对React.js和React Native的支持比较好,无论是格式化还是高亮标记、代码提示,在完整安装nuclide及一些辅助插件后,都是比较友好的,喜欢这一风格的程序猿可以试试这款比较新的编辑器,但一个很严重的问题是,Atom基于浏览器,性能是很严重的问题。


2.永恒的经典——Sublime

做JS的FE必然都知道Sublime,这款已经有一定历史的编辑器经过一系列的插件改装,一样可以对React Native支持良好,加上Sublime众多的快捷键、命令支持,可以使开发效率大幅度提升。


代码提示功能:


性能和Atom比当然是没的说,推荐安装几个插件:JSX、React Teamplate、react-native-snippets、ReactJS Snippets、SublimeLinter-jsxhint、Babel、Babel Snippets、Emmet、React ES6-Snippets,这几个插件可以支持React的JSX语法,并进行高亮提示,同时也可进行排版,效果和装了nuclide的Atom不相上下,是非常给力一款编辑器了。

插件安装方法,Package Control -> Install Package,输入react,选中并安装

提示:需要科学上网


3.全能型选手——WebStorm 11


有人说Intelij系列IDE很重,很慢,界面还丑,其实还得看需求,我就挺喜欢。Android Studio、IDEA、WebStorm都是一样的键位和界面布局,学习成本很低,使用很顺手,而且WebStorm自带的插件也比较好用,提示非常智能,不用安装什么插件就能上手开发了,对于React Native开发不好的一点就是JS的格式化比较奇怪,和Sublime、nuclide都不一样,下图是WebStorm:

下面是nuclide、Sublime:


如果熟悉WebStorm和Intelij系列IDE的程序猿,选择WebStorm进行React Native开发也是不错的选择。


4.其他建议学习的技术

1.HTML+CSS3或Android的XML布局、WPF的XAML

由于React Native采用JSX的形式进行界面的设计,这种方式类似于HTML,但又比其更严格,所以有Android和WPF开发经验的程序猿,可能更容易将XML和XAML的思想引入JSX中,而且React Native的布局样式,类似CSS3,有很多从CSS3中发展而来的字段和属性,所以建议学习一下CSS3。

2.React.js

毕竟React Native是从React.js发展而来的,只是一个是面向Web一个面向客户端,学习React.js有助于了解这种开发思想的核心,尤其是组件生命周期,
getDefaultProps、getInitialState、componentWillMount、render、componentDidMount这几个过程非常重要,除此之外,事件处理、数据绑定等功能也是几乎一模一样,参考React.js的原理和流程,非常有助于理解React Native。

3.Node.js、ES6

React Native的代码结构来源于Node.js,其中require、exports的思想也是非常经典的,再说了,现在Node.js这么火,Win10 IoT都兼容了,你还有什么理由不学Node.js?
而React Native用了很多基于ES6的思想来构建API,比如fetch,所以,学习一下新发布的ES6,不光是React Native,对其他JS开发也是必须的。

4.Android、iOS的JavaScript Bridge技术

React Native内部实现了一套自己的JS通信技术,能够提供高效的通信,从而实现APP的动态改变、高效展示,所以,有必要了解React Native的底层通信技术,以便后期对APP进行优化



猜你喜欢

转载自blog.csdn.net/yuanguozhengjust/article/details/50468561