工欲善其事,必先利其器——React Native的 IDE

简介: > 之前的文章中,我们已经对于在OS X系统上对React Native 的环境搭建,以及第一个实例做了讲解。所谓工欲善其事,必先利其器,对于开发者来说,选择一款比较好的IDE进行开发是一件很重要的事情。这篇文章就来比较和推荐以下几款工具:Nuclide、Sublime、WebStorm。 #Nuclide Nuclide是Facebook专门为React开发的基于Atom上的

之前的文章中,我们已经对于在OS X系统上对React Native 的环境搭建,以及第一个实例做了讲解。所谓工欲善其事,必先利其器,对于开发者来说,选择一款比较好的IDE进行开发是一件很重要的事情。这篇文章就来比较和推荐以下几款工具:Nuclide、Sublime、WebStorm。

Nuclide

Nuclide是Facebook专门为React开发的基于Atom上的RN插件,因此,Nuclide拥有很好的语法补全、类型检查等支持。
本质上,Nuclide是Atom基础上的一系列插件集合。因此,要使用Nuclide,首先需要安装Atom。Atom是Github推出的开源编辑器。是使用node.js来作为插件的语言的。

1. 安装Atom

Atom官网中下载并安装

2. 安装Nuclide

打开Atom,选择Preferences --> +install ,输入Nuclide进行搜索并安装。
安装nuclide

由于目前版本的Atom性能太卡,因此萌生了用Sublime来搭配React Native的插件来进行开发。

Sublime

1. 安装Sublime Text 3

Sublime Text 官网下载。

选对相应的平台进行安装即可。

2. 安装Package Control

在Sublime Text 3中使用PackageControl安装插件。
使用Ctrl + 或者通过View --> Show Console `打开命令行,粘贴以下代码:

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)

如果没有安装成功,请看这里

3. 安装React Native 需要用到的插件

0> React Native 开发推荐的一些插件:

  • ReactJS:支持React开发,提供JSX代码提示,高亮显示,ReactJS官方介绍
  • Emmet:前端开发必备,能够存储和重用开发代码块,Emmet介绍
  • Terminal:在Sublime中打开终端并定位到当前目录,(快捷键cmd+shift+T
  • react-native-snippets:react native 代码片段,react-native-snippets官方介绍

1> 打开Package Control:点击菜单栏Preferences-->Package Control 或者使用快捷键 Ctrl + Shift + T

2> 输入install选中:Package Control:install package

3> 等待几秒,在弹出的终端中输入想要安装的插件。

最终安装好插件后界面如下:
Sublime界面
(以上界面中已安装Material Theme插件)

WebStorm

之前做过web相关的同学们,对于WebStorm IDE应该非常熟悉了。这个IDE是jetbrains公司旗下的一款JavaScript开发工具,被广大的中国JS开发者誉为“Web前端开发神器”等。他与Interllij IDEA 同源,集成了Interllij的部分JavaScript功能。Interllij版本已经支持React了,所以在现如今的开发阶段WebStorm已经算是支持性最好的IDE了。

设置WebStorm支持JSX

安装好WebStorm之后,对于JSX最好先配置一下:打开Settings,作如下配置

设置支持JSX

ReactNative 代码智能提醒

IDE最多使用到的就是代码智能提醒,为了能够让WebStorm能够支持React Native的提醒,可以下载ReactNative-LiveTemplate
以下为官方提供的安装及使用方式,现将其记录至以下处。

git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate

下载的文件包括ReactNative.jar。
该提醒包括

1. 组件名称
2. Api名称
3. 所有的StyleSheets的属性
4. 组件的属性

要安装RN的智能提醒,可以通过两种方式进行。

安装方式

方法一

file --> import settings --> ReactNative.jar

方法二

ReactNative.xml复制到~/Library/Preferences/WebStorm11/templates然后重启。

使用方式

通用方法

直接输入组件 或 Api 名称的首字母, 比如想要 View ,只要输入 V自动提示代码里就会看到 View

StyleSheet属性提示

首先 按下 command + J , 然后输入属性名的 首字母

    如: 输入 f ,会自动提示 `fontSize,fontFamily,fontStyle`...等等

由于代码的智能提示不全,(如没有AppRegistry.registerComponent的代码提示),并且部分React Native框架提供的方法会报“未使用方法”的警告(如ListView的componentDidMount方法),对于一些强迫症开发者来说,会有些不适感。
AppRegistry.registerComponent

componentDidMount

另外,由于WebStorm的内存占用500M左右,对于小内存的开发者来说,不是最好的选择。

总结

本文对比了三种React Native的IDE,从结果上来看:

  • 由于官方提供的Nuclide基于Atom,运行时太卡,因此一般的RN开发不会首先考虑使用。
  • 由于WebStorm是Interllij旗下的JS工具,因此对于Android开发者移植开发RN是有帮助的。但由于部分智能联想不太完备,加上对于RN的系统方法报“未使用”的警告,该IDE还是有需要改进的地方。
  • Sublime运行和关闭非常快捷,安装插件后的开发十分方便,但由于需要安装过多的插件,在PackageControl读取插件时需要等待,甚至有时,无法读取远程插件列表,在安装插件上会耗费一些时间。

笔者在对三种开发IDE进行一段时间的开发,认为Sublime在安装好了插件后,无论是打开方式,代码界面整洁度上,都比其他两种方式较为舒适,因此,笔者较为推崇Sublime进行开发。

对于三种IDE的对比及开发细节,会不断进行更新。

目录
相关文章
|
2月前
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native,通过比较原生应用与React Native的优缺点,探讨其在实际项目中的应用以及未来发展趋势。
|
2月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
3月前
|
前端开发 JavaScript Android开发
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
|
3月前
|
前端开发 安全 Swift
【教程】React Native 应用中的代码混淆与安全性管理
【教程】React Native 应用中的代码混淆与安全性管理
46 0
|
2月前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。
|
2月前
|
前端开发 IDE 小程序
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
34 0
|
3月前
|
移动开发 前端开发 JavaScript
探究移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动端混合开发技术在移动应用开发领域日益流行,为开发者提供了更高效的跨平台开发方案。本文将比较三种主流混合开发技术:React Native、Weex和Flutter,从性能、生态系统和开发体验等方面进行评估,以帮助开发者在选择适合自己项目的技术时做出明智的决策。
|
3月前
|
移动开发 前端开发 weex
React Native、Weex、Flutter 混合开发技术的比较与选择
移动应用已经成为人们日常生活中不可或缺的一部分,而混合开发技术也随之崛起并逐渐成为主流。本文将比较 React Native、Weex 和 Flutter 三种混合开发技术,并探讨它们各自的优缺点,以及如何根据项目需求做出选择。
54 1
|
3月前
|
开发框架 Dart 前端开发
Flutter vs React Native:跨平台移动应用开发的终极对决
随着移动应用的普及,跨平台移动应用开发成为了一种趋势。Flutter和React Native是当前最受欢迎的跨平台开发框架之一,但它们各自有着不同的特点和优势。本文将对Flutter和React Native进行全方位比较,以帮助开发者了解两个框架的差异,从而选择适合自己的开发工具。
41 3
|
3月前
|
开发框架 前端开发 JavaScript
react native是什么,怎么用
react native是什么,怎么用
44 0