#
#
轉載請標明出處:
[http://blog.csdn.net/developer_jiangqq/article/details/50476350](http://blog.csdn.net/developer_jiangqq/article/details/50476350)
本文出自:[【江清清的博客】](http://blog.csdn.net/developer_jiangqq)
# (一)前言???????
? ? ? ? ?【好消息】個人網站已經上線運行,后面博客以及技術干貨等精彩文章會同步更新,請大家關注收藏:[http://www.lcode.org](http://www.lcode.org)
? ? ? ? 上一講我們已經對于在OSX系統上面對于React Native For Android的環境搭建以及第一個實例做了詳細講解。所謂工欲善其事,必先利其器,做React?Native開發也和其他應用開發一樣,最好有一個比較好的IDE工具。那么這邊比較推薦以下幾款工具:sublime,webstorm以及官網推薦的Nuclide。下面我們主要講解一下后面兩款工具。
???????? 剛創建的React Native技術交流群(282693535),歡迎各位大牛,React Native技術愛好者加入交流!同時博客左側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送!
# (二)Nuclide常規安裝以及配置???????
???????? Nuclide是Fackbook專門為React開發IDE,官網提供哦~。但是Nuclide是Atom的基礎上面提供了一系列的插件集合。所以我們需要首先安裝Atom。
???????? Nuclide項目官方地址:[https://github.com/facebook/nuclide](https://github.com/facebook/nuclide)
? 2.1.Atom安裝
??????? Atom是一個開源版本的編輯器,有著非常強大以及完美的體驗,Atom最大的特色就是可以安裝很多的插件來完成我們的需求。官網地址:[https://atom.io/](https://atom.io/%20%20%20%20)? 去官網下載安裝即可。?
官網頁面以及軟件運行截圖如下:


? ????2.2.Nuclide安裝
??????????? Atom已經安裝成功了,下面就開始安裝Nuclide,直接打開Atom軟件,點擊Atom->Preferences打開Setting,然后點擊install,輸入nuclide-installer?搜索,進行下載即可,如下圖 :

這種方式我們是選擇插件下載進行安裝,另外的一種方式我們可以直接在命令行執行以下命令(利用Atom的包管理器apm安裝):
~~~
apminstall nuclide-installer
~~~
???????? 最后重啟一下Atom即可。不過這兩種方式我這邊都不太推薦大家使用,因為樓主親身體驗過,這兩種方式一方面是安裝速度比較慢,而且下載安裝完之后Atom直接會卡,然后提示找不到Nuclide相關模塊。???????????
# (三)Nuclide源代碼編譯安裝(強烈推薦)
????????? Nuclide項目官方地址:[https://github.com/facebook/nuclide](https://github.com/facebook/nuclide),我們知道該項目是facebook官方提供的,當然我們也給開發者提供了一種源代碼編譯安裝的方式。使用起來非常簡單:

?終端安裝截圖如下:

這樣就OK了,下面就是打開Atom軟件,開始進行狂寫React Native項目代碼吧。至于項目初始化init以及編譯運行的方法,大家還是看前一篇文章哦~這邊就不多說了。
# (四)WebStorm IDE介紹和安裝
???????? 我相信做過Web前端的童鞋們,肯定對WebStorm IDE非常的熟悉WebStorm 是jetbrains公司旗下一款JavaScript開發工具。被廣大中國JS開發者譽為“Web前端開發神器”、“最強大的HTML5編輯器”、“最智能的JavaScript IDE”等。與IntelliJ IDEA同源,繼承了IntelliJ IDEA強大的JS部分的功能。該IDE官網地址:[https://www.jetbrains.com/webstorm/](https://www.jetbrains.com/webstorm/)? 。該新版本已經支持了React了,所以在現如今的開發階段WebStrom已經算是支持性最好的IDE了,大家有興趣可以下載使用以下哦~,不過該是收費的,土豪忽略,至于破解版本看大家的了。
?????????? 新版本更新信息如下:

[注]:WebStorm對于JSX最好配置一下哦,打開Settings,作如下截圖配置即可:

????? 最后通過WebStorm打開我們一個已經存在的React Native項目。

# (五)最后總結
???????? 今天主要講解了開發ReactNative的相關IDE(WebStorm,Nuclide)的安裝和基礎配置使用,下一篇我們對于應用的調試(Debug)方法做相關詳解,敬請期待~
?????????
尊重原創,轉載請注明:From Sky丶清([http://blog.csdn.net/developer_jiangqq](http://blog.csdn.net/developer_jiangqq)) 侵權必究!
關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注,第一時間推送精彩文章)
關注我的微博,可以獲得更多精彩內容
[](http://weibo.com/u/1855428195?s=6uyXnP)
[](http://weibo.com/u/1855428195?s=6uyXnP)
?
- 前言
- React Native For Android環境配置以及第一個實例(1)
- React Native開發IDE安裝及配置(2)
- React Native應用設備運行(Running)以及調試(Debugging)(3)
- React Native移植原生Android項目(4)
- React Native進行簽名打包成Apk(5)
- React Native庫版本升級(Upgrading)與降級講解(6)
- React Native控件之View視圖講解(7)
- React Native配置運行官方例子-初學者的福音(8)
- React Native控件之Text組件講解(9)
- React Native控件之Image組件講解與美團首頁頂部效果實例(10)
- TextInput組件講解與QQ登錄界面實現(11)
- ProgressBarAndroid進度條講解(12)
- DrawerLayoutAndroid抽屜導航切換組件講解(13)
- ScrollView組件講解(14)
- ToolbarAndroid工具欄控件講解以及使用(15)
- Switch開關與Picker選擇器組件講解以及使用(16)
- ViewPagerAndroid講解以及美團首頁頂部效果實例(17)
- Touchable*系列組件詳解(18)
- React Native專題文章講解,不斷更新中.....
- ListView組件講解以及最齊全實例(19)
- 超詳細Windows版本編譯運行React Native官方實例UIExplorer項目(多圖慎入)
- React Native超棒的LayoutAnimation(布局動畫)
- PullToRefreshViewAndroid下拉刷新組件講解(20)
- RefreshControl組件詳解(21)
- WebView組件詳解以及實例使用(22)