react native小白入門之IDE選擇

作者： cfscc
發布時間：2020-05-13
1112 次瀏覽
暫無評論
3903字數
分類：程序代碼

Loading...

react native小白入門之IDE選擇

1.Atom+Nuclide
Atom 是由 Github 打造的下一代編程開發利器，支持 Windows、Mac OS X、Linux 三大桌面平臺，免費且開源。Atom 支持各種編程語言的代碼高亮，同時具備強大的代碼補全功能，能夠極大的提高編程效率，Atom 本質上是一個文本編輯器，而不是一個 IDE，因此在用來開發 React Native 時需要配合 Nuclide 一起使用。

Nuclide 是 Facebook 基于 Atom 的基礎上開發的一個插件 IDE，可以用來開發 React Native，iOS 和 Web 應用，目前不支持 Windows 平臺，只支持 Mac OS X 和 Linux。Nuclide 是 Facebook 官方提供的 React Native IDE，對 React Native 的支持應該是最好的，因此，推薦大家首選這個，如果在你的電腦運行起來不會卡頓的話。打開Atom，選擇Preferences --> +install，輸入Nuclide進行搜索并安裝。

Atom下載     Nuclide下載
![2020-05-12T16:12:17.png][1]

Atom + Nuclide已經被官方停止運行

github中開源軟件：Deco IDE是開發react-native項目的，目前只有Mac版本

Vscode

插件安裝：

atom：https://www.jianshu.com/p/a64863903277/
https://www.jianshu.com/p/a64863903277/
————————————————

2.Sublime Text 3
默認的Sublime 3中沒有Package Control，要進行安裝之后才能用這個去安裝其他的插件。

簡單的安裝方法

使用Ctrl+`快捷鍵或者通過View->Show Console菜單打開命令行，粘貼如下代碼：

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; 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)

這段命令行代碼是官網提供的哦  https://packagecontrol.io/installation#st3

安裝sublime的插件也是常見使用sublime的問題，步驟如下：

1.打開Sublime Text3 ，點擊菜單欄的“Preferences”-->"Package Control",或者可以使用快捷鍵CTRL+SHIFT+P 打開

2.在打開的終端窗口，輸入“install”,下方就會提示“Package Control:install package”,用鼠標點擊

3.這時候等待幾秒，就會彈出一個終端，在終端輸入你想要安裝的插件，進行查找，點擊下方列表中插件，就會自動會為你安裝了。

React Native開發推薦的一些插件：

ReactJS : 支持React開發，代碼提示，高亮顯示

Emmet ：前端開發必備。

react-native-snippets：react native 的代碼片段 snippets用法

Babel：支持ES6和React JSX語法定義，用它替代Sublime自帶的js語法定義。

Sublime Text 3下載

3.WebStorm
WebStorm IDE是jetbrains公司旗下一款 JavaScript 開發工具。被廣大中國JS開發者譽為“Web 前端開發 神器”、“最強大的 HTML5 編輯器”、“最智能的JavaScript IDE”等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。新版本已經支持了React了，WebStorm跟Android Studio是兄弟，看界面就不會覺得陌生，不過跟Android Studio不同的是 WebStorm不是免費的。

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

WebStorm下載

4.Deco
Deco是不久前剛發布的一個開源的專門為 React Native 打造的 IDE，目前只支持 Mac OS X 平臺。它封裝了 React Native 開發中經常會使用到的功能，例如集成 npm install 功能，集成 iPhone 和 iPad 模擬器，新建工程時快速生成 AwesomeProject，開發者不再需要通過執行 react-native init AwesomeProject 命令來生成了，關鍵是如果網絡不好的話，免去了漫長的等待。

Deco對UI功能的支持很好，可以直接編輯、調試JS腳本，以及添加UI控件、修改控件屬性等，很方便。修改后，直接在Deco里點擊"Simulator"或者 “CMD + R”刷新即可

Deco 區別于其他 IDE 最顯著的特性是支持常用控件的拖拽生成代碼和可視化編輯，這些控件既有 React Native 原生控件，也有一些知名的開源控件，

Deco下載

5.vscode
VSC 的編輯器界面依然是微軟經典的 VS 風格，對于常接觸的人來說會很親切。在編程語言和語法上支持 C++, jade, PHP , Python, XML, Batch, F#, DockerFile, Coffee Script, Java, HandleBars, R, Objective-C, PowerShell, Luna, Visual Basic, Markdown, JavaScript , JSON, HTML , CSS, LESS, SASS, C#, TypeScript。支持幾乎所有主流的開發語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、 Git 等特性，支持插件擴展，并針對網頁開發和云端應用開發做了優化。軟件跨平臺支持 Win、Mac 以及 Linux ，運行流暢，可謂是微軟的良心之作……

安裝擴展(0.10.8+)-插件地址: https://github.com/Microsoft/vscode-react-native

react natvie代碼提示

打開vs code ：

1.按下 F1 ，然后輸入 install 回車

2.輸入 react-native 然后選擇 React Native Tools 安裝，最后啟用。

VSCode下載

react native IDE比較多，可以每個試下再選擇，選擇適合自己的。我是用的VSCode，也推薦它。

再說下我用這些IDE的感受：

1.要用Nuclide就需要使用Atom，然而我Atom安裝好之后下載插件，不說下載插件，搜都搜不到，不知道是不是我沒科學上網的原因（被墻了），然后就放棄了Atom

2.下Sublime Text 3發現這個安裝包真的小，才10M不到，安裝完之后在下載Package Control費了點時間，網上那一串很長的代碼沒用會報錯，最后用官網這段代碼成功了，上面貼的一段很長的那個代碼。安裝完一些插件之后，也挺好用，我覺得很好的一個插件就是react-native-snippets 可以快速生成react native的模板,我用vscode還特意找了個插件，但是也有缺點，代碼錯誤不報錯，代碼提示有點問題，也許是我有些插件沒下

3.WebStorm也只是試過，不評價，Deco沒用過

4.VSCode可以中文英文切換，看你喜歡，錯誤代碼會提示，可以在vscode直接調試項目，插件下載方便，插件也多，自帶git工具

[1]: http://www.matrixbk.com/usr/uploads/2020/05/1965482971.png

最后修改：

? 允許規范轉載

如果覺得我的文章對你有用，請隨意贊賞

發表評論取消回復
使用cookie技術保留您的個人信息以便您下次快速評論，繼續評論表示您已同意該條款

評論 *

私密評論

名稱 *

??

郵箱

地址

react native小白入門之IDE選擇

cfscc ? 2020 年 05 月 13 日

Loading...

react native小白入門之IDE選擇

1.Atom+Nuclide
Atom 是由 Github 打造的下一代編程開發利器，支持 Windows、Mac OS X、Linux 三大桌面平臺，免費且開源。Atom 支持各種編程語言的代碼高亮，同時具備強大的代碼補全功能，能夠極大的提高編程效率，Atom 本質上是一個文本編輯器，而不是一個 IDE，因此在用來開發 React Native 時需要配合 Nuclide 一起使用。

Nuclide 是 Facebook 基于 Atom 的基礎上開發的一個插件 IDE，可以用來開發 React Native，iOS 和 Web 應用，目前不支持 Windows 平臺，只支持 Mac OS X 和 Linux。Nuclide 是 Facebook 官方提供的 React Native IDE，對 React Native 的支持應該是最好的，因此，推薦大家首選這個，如果在你的電腦運行起來不會卡頓的話。打開Atom，選擇Preferences --> +install，輸入Nuclide進行搜索并安裝。

Atom下載     Nuclide下載
![2020-05-12T16:12:17.png][1]

Atom + Nuclide已經被官方停止運行

github中開源軟件：Deco IDE是開發react-native項目的，目前只有Mac版本

Vscode

插件安裝：

atom：https://www.jianshu.com/p/a64863903277/
https://www.jianshu.com/p/a64863903277/
————————————————

2.Sublime Text 3
默認的Sublime 3中沒有Package Control，要進行安裝之后才能用這個去安裝其他的插件。

簡單的安裝方法

使用Ctrl+`快捷鍵或者通過View->Show Console菜單打開命令行，粘貼如下代碼：

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; 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)

這段命令行代碼是官網提供的哦  https://packagecontrol.io/installation#st3

安裝sublime的插件也是常見使用sublime的問題，步驟如下：

1.打開Sublime Text3 ，點擊菜單欄的“Preferences”-->"Package Control",或者可以使用快捷鍵CTRL+SHIFT+P 打開

2.在打開的終端窗口，輸入“install”,下方就會提示“Package Control:install package”,用鼠標點擊

3.這時候等待幾秒，就會彈出一個終端，在終端輸入你想要安裝的插件，進行查找，點擊下方列表中插件，就會自動會為你安裝了。

React Native開發推薦的一些插件：

ReactJS : 支持React開發，代碼提示，高亮顯示

Emmet ：前端開發必備。

react-native-snippets：react native 的代碼片段 snippets用法

Babel：支持ES6和React JSX語法定義，用它替代Sublime自帶的js語法定義。

Sublime Text 3下載

3.WebStorm
WebStorm IDE是jetbrains公司旗下一款 JavaScript 開發工具。被廣大中國JS開發者譽為“Web 前端開發 神器”、“最強大的 HTML5 編輯器”、“最智能的JavaScript IDE”等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。新版本已經支持了React了，WebStorm跟Android Studio是兄弟，看界面就不會覺得陌生，不過跟Android Studio不同的是 WebStorm不是免費的。

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

WebStorm下載

4.Deco
Deco是不久前剛發布的一個開源的專門為 React Native 打造的 IDE，目前只支持 Mac OS X 平臺。它封裝了 React Native 開發中經常會使用到的功能，例如集成 npm install 功能，集成 iPhone 和 iPad 模擬器，新建工程時快速生成 AwesomeProject，開發者不再需要通過執行 react-native init AwesomeProject 命令來生成了，關鍵是如果網絡不好的話，免去了漫長的等待。

Deco對UI功能的支持很好，可以直接編輯、調試JS腳本，以及添加UI控件、修改控件屬性等，很方便。修改后，直接在Deco里點擊"Simulator"或者 “CMD + R”刷新即可

Deco 區別于其他 IDE 最顯著的特性是支持常用控件的拖拽生成代碼和可視化編輯，這些控件既有 React Native 原生控件，也有一些知名的開源控件，

Deco下載

5.vscode
VSC 的編輯器界面依然是微軟經典的 VS 風格，對于常接觸的人來說會很親切。在編程語言和語法上支持 C++, jade, PHP , Python, XML, Batch, F#, DockerFile, Coffee Script, Java, HandleBars, R, Objective-C, PowerShell, Luna, Visual Basic, Markdown, JavaScript , JSON, HTML , CSS, LESS, SASS, C#, TypeScript。支持幾乎所有主流的開發語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、 Git 等特性，支持插件擴展，并針對網頁開發和云端應用開發做了優化。軟件跨平臺支持 Win、Mac 以及 Linux ，運行流暢，可謂是微軟的良心之作……

安裝擴展(0.10.8+)-插件地址: https://github.com/Microsoft/vscode-react-native

react natvie代碼提示

打開vs code ：

1.按下 F1 ，然后輸入 install 回車

2.輸入 react-native 然后選擇 React Native Tools 安裝，最后啟用。

VSCode下載

react native IDE比較多，可以每個試下再選擇，選擇適合自己的。我是用的VSCode，也推薦它。

再說下我用這些IDE的感受：

1.要用Nuclide就需要使用Atom，然而我Atom安裝好之后下載插件，不說下載插件，搜都搜不到，不知道是不是我沒科學上網的原因（被墻了），然后就放棄了Atom

2.下Sublime Text 3發現這個安裝包真的小，才10M不到，安裝完之后在下載Package Control費了點時間，網上那一串很長的代碼沒用會報錯，最后用官網這段代碼成功了，上面貼的一段很長的那個代碼。安裝完一些插件之后，也挺好用，我覺得很好的一個插件就是react-native-snippets 可以快速生成react native的模板,我用vscode還特意找了個插件，但是也有缺點，代碼錯誤不報錯，代碼提示有點問題，也許是我有些插件沒下

3.WebStorm也只是試過，不評價，Deco沒用過

4.VSCode可以中文英文切換，看你喜歡，錯誤代碼會提示，可以在vscode直接調試項目，插件下載方便，插件也多，自帶git工具

[1]: http://www.matrixbk.com/usr/uploads/2020/05/1965482971.png

天天日天天干天天_黄片免费在线播放_性开放按摩av片_18禁裸体黑丝美女自慰网站。