目录

React-Native开发React-Native开发IDE安装及配置2

/weixin_miniapp.png

【React Native开发】React Native开发IDE安装及配置(2)

转载请标明出处: 本文出自:

( 一 ) 前言

【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:

上一讲我们已经对于在

OS

X

系统上面对于

React Native

For

Android

的环境搭建以及第一个实例做了详细讲解。所谓工欲善其事,必先利其器,做React

Native

开发也和其他应用开发一样,最好有一个比较好的IDE工具。那么这边比较推荐以下几款工具

:

sublime

,webstorm

以及官网推荐的

Nuclide

。下面我们主要讲解一下后面两款工具。

刚创建的React Native技术交流3群(

496508742

),React Native技术交流4群(

458982758

)

,请不要重复加群!

欢迎各位大牛

,

React

Native

技术爱好者加入交流

!

同时博客左侧欢迎微信扫描关注订阅号

,

移动技术干货

,

精彩文章技术推送

!

( 二 ) Nu clide 常规安装以及配置

Nuclide

是

Fac

kbook

专门为

React

开发

IDE

,官网提供哦

~

。但是

Nuclide

是Atom的基础上面提供了一系列的插件集合。所以我们需要首先安装

Atom

。

Nuclide

项目官方地址

:

2.1.

Atom

安装

Atom

是一个开源版本的编辑器,有着非常强大以及完美的体验,Atom最大的特色就是可以安装很多的插件来完成我们的需求。官网地址

:

去官网下载安装即可。

官网页面以及软件运行截图如下

:

https://img-blog.csdn.net/20160107145445764?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

https://img-blog.csdn.net/20160107145454608?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

2.2.

Nuclide

安装

Atom

已经安装成功了,下面就开始安装

Nuclide

,直接打开Atom软件,点击Atom

->Preferences

打开Setting

,

然后点击

install

,输入nuclide-installer

搜索,进行下载即可,如下图

:

https://img-blog.csdn.net/20160107145536856?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

这种方式我们是选择插件下载进行安装,另外的一种方式我们可以直接在命令行执行以下命令

(

利用

Atom

的包管理器

apm

安装

):

apminstall nuclide-installer

最后重启一下Atom即可。不过这两种方式我这边都不太推荐大家使用,因为楼主亲身体验过,这两种方式一方面是安装速度比较慢,而且下载安装完之后Atom直接会卡,然后提示找不到

Nuclide

相关模块。

( 三 ) Nu clide 源代码编译安装 ( 强烈推荐 )

Nuclide

项目官方地址

:

,我们知道该项目是face

book

官方提供的,当然我们也给开发者提供了一种源代码编译安装的方式。使用起来非常简单

:

https://img-blog.csdn.net/20160107145559288?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

终端安装截图如下

:

https://img-blog.csdn.net/20160107145607263?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

这样就

OK

了,下面就是打开Atom软件,开始进行狂写

React Native

项目代码吧。至于项目初始化

init

以及编译运行的方法,大家还是看前一篇文章哦

~

这边就不多说了。

( 四 )WebStorm IDE 介绍和安装

我相信做过

Web

前端的童鞋们,肯定对WebStorm

IDE

非常的熟悉

WebStorm

是

jetbrains

公司旗下一款

JavaScript

开发工具。被广大中国

JS

开发者誉为“

Web

前端开发神器”、“最强大的

HTML5

编辑器”、“最智能的

JavaScript IDE”

等。与

IntelliJ IDEA

同源,继承了

IntelliJ IDEA

强大的

JS

部分的功能。

该IDE官网地址

:

。该新版本已经支持了

React

了,所以在现如今的开发阶段

WebStrom

已经算是支持性最好的IDE了,大家有兴趣可以下载使用以下哦

~

,不过该是收费的,土豪忽略,至于破解版本看大家的了。

新版本更新信息如下

:

https://img-blog.csdn.net/20160107145615296?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

[

注

]:WebSt

orm

对于

JSX

最好配置一下哦,打开Settings

,

作如下截图配置即可

:

https://img-blog.csdn.net/20160107145634867?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

最后通过

WebStorm

打开我们一个已经存在的

React Native

项目。

https://img-blog.csdn.net/20160107145701668?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

( 五 ) 最后总结

今天主要讲解了开发

React

Native

的相关

IDE

(WebStorm

,

Nuclide

)

的安装和基础配置使用,下一篇我们对于应用的调试

(Debug)

方法做相关详解,敬请期待

~

尊重原创,转载请注明:From Sky丶清( ) 侵权必究!

关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章) https://img-blog.csdn.net/20151229084738717?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

关注我的微博,可以获得更多精彩内容

/weixin_miniapp.png