React 教程安裝—JSX—組件=集成所有教程—f

React 教程安裝—JSX—組件=集成所有教程—facebook跨平臺框架

eact 是一個用于構建用戶界面的 JAVASCRIPT 庫。

React主要用于構建UI，很多人認為 React 是 MVC 中的 V（視圖）。

React 起源于 Facebook 的內部項目，用來架設 Instagram 的網站，并于 2013 年 5 月開源。

React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關注和使用它。

React 特點

1.聲明式設計 ?React采用聲明范式，可以輕松描述應用。
2.高效 ?React通過對DOM的模擬，最大限度地減少與DOM的交互。
3.靈活 ?React可以與已知的庫或框架很好地配合。
4.JSX ? JSX 是 JavaScript 語法的擴展。React 開發不一定使用 JSX ，但我們建議使用它。
5.組件 ? 通過 React 構建組件，使得代碼更加容易得到復用，能夠很好的應用在大項目的開發中。
6.單向響應的數據流 ? React 實現了單向響應的數據流，從而減少了重復代碼，這也是它為什么比傳統數據綁定更簡單。

閱讀本教程前，您需要了解的知識：

在開始學習 React 之前，您需要具備以下基礎知識：

HTML5
CSS
JavaScript

React 第一個實例

在每個章節中，您可以在線編輯實例，然后點擊按鈕查看結果。

本教程使用了 React 的版本為 15.4.2，你可以在官網 http://facebook.github.io/react/ 下載最新版。

React 實例

<divid="example"></div><scripttype="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );</script>

React 安裝

React 可以直接下載使用，下載包中也提供了很多學習的實例。

本教程使用了 React 的版本為 15.4.2，你可以在官網 http://facebook.github.io/react/ 下載最新版。

你也可以直接使用 BootCDN 的 React CDN 庫，地址如下：

<scriptsrc="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><scriptsrc="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><scriptsrc="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

使用實例

以下實例輸出了 Hello, world!

React 實例

<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>Hello React!</title><scriptsrc="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><scriptsrc="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><scriptsrc="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script></head><body><divid="example"></div><scripttype="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script></body></html>

實例解析：

實例中我們引入了三個庫： react.min.js 、react-dom.min.js 和 babel.min.js：

react.min.js - React 的核心庫
react-dom.min.js - 提供與 DOM 相關的功能
babel.min.js - Babel 可以將 ES6 代碼轉為 ES5 代碼，這樣我們就能在目前不支持 ES6 瀏覽器上執行 React 代碼。Babel 內嵌了對 JSX 的支持。通過將 Babel 和 babel-sublime 包（package）一同使用可以讓源碼的語法渲染上升到一個全新的水平。

ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example'));

以上代碼將一個 h1 標題，插入 id="example" 節點中。

注意：
如果我們需要使用 JSX，則 <script> 標簽的 type 屬性需要設置為 text/babel。

通過 npm 使用 React

如果你的系統還不支持 Node.js 及 NPM 可以參考我們的 Node.js 教程。

我們建議在 React 中使用 CommonJS 模塊系統，比如 browserify 或 webpack，本教程使用 webpack。

國內使用 npm 速度很慢，你可以使用淘寶定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org$ npm config set registry https://registry.npm.taobao.org

這樣就可以使用 cnpm 命令來安裝模塊了：

$ cnpm install [name]

更多信息可以查閱：http://npm.taobao.org/。

使用 create-react-app 快速構建 React 開發環境

create-react-app 是來自于 Facebook，通過該命令我們無需配置就能快速構建 React 開發環境。

create-react-app 自動創建的項目是基于 Webpack + ES6 。

執行以下命令創建項目：

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/$ npm start

在瀏覽器中打開 http://localhost:3000/ ，結果如下圖所示：

項目的目錄結構如下：

my-app/

 README.md
 node_modules/
 package.json .gitignore public/
 favicon.ico
 index.html
 src/
 App.css App.js App.test.js
 index.css
 index.js
 logo.svg

嘗試修改 src/App.js 文件代碼：

src/App.js

importReact, {Component}from'react';importlogofrom'./logo.svg';import'./App.css'; classAppextendsComponent{render(){return( <divclassName="App"> <divclassName="App-header"> <imgsrc={logo}className="App-logo"alt="logo" /> <h2>歡迎來到菜鳥教程</h2> </div> <pclassName="App-intro"> 你可以在 <code>src/App.js</code> 文件中修改。 </p> </div> ); }}exportdefaultApp;

修改后，打開 http://localhost:3000/ （一般自動刷新），輸出結果如下：

React JSX

React 使用 JSX 來替代常規的 JavaScript。

JSX 是一個看起來很像 XML 的 JavaScript 語法擴展。

我們不需要一定使用 JSX，但它有以下優點：

JSX 執行更快，因為它在編譯為 JavaScript 代碼后進行了優化。
它是類型安全的，在編譯過程中就能發現錯誤。
使用 JSX 編寫模板更加簡單快速。

使用 JSX

JSX 看起來類似 HTML ，我們可以看下實例:

ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example'));

我們可以在以上代碼中嵌套多個 HTML 標簽，需要使用一個 div 元素包裹它，實例中的 p 元素添加了自定義屬性 data-myattribute，添加自定義屬性需要使用 data- 前綴。

React 實例

ReactDOM.render( <div> <h1>菜鳥教程</h1> <h2>歡迎學習 React</h2> <pdata-myattribute="somevalue">這是一個很不錯的 JavaScript 庫!</p> </div> , document.getElementById('example'));

獨立文件

你的 React JSX 代碼可以放在一個獨立文件上，例如我們創建一個 helloworld_react.js 文件，代碼如下：

ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example'));

然后在 HTML 文件中引入該 JS 文件：

React 實例

JavaScript 表達式

我們可以在 JSX 中使用 JavaScript 表達式。表達式寫在花括號 {} 中。實例如下：

React 實例

ReactDOM.render( <div> <h1>{1+1}</h1> </div> , document.getElementById('example'));

在 JSX 中不能使用 if else 語句，但可以使用 conditional (三元運算) 表達式來替代。以下實例中如果變量 i 等于 1 瀏覽器將輸出 true, 如果修改 i 的值，則會輸出 false.

React 實例

ReactDOM.render( <div> <h1>{i==1 ? 'True!' : 'False'}</h1> </div> , document.getElementById('example'));

樣式

React 推薦使用內聯樣式。我們可以使用 camelCase 語法來設置內聯樣式. React 會在指定元素數字后自動添加 px 。以下實例演示了為 h1 元素添加 myStyle 內聯樣式：

React 實例

varmyStyle={fontSize: 100, color: '#FF0000'};ReactDOM.render( <h1style={myStyle}>H5混合開發</h1>, document.getElementById('example'));

注釋

注釋需要寫在花括號中，實例如下：

React 實例

ReactDOM.render( <div> <h1>菜鳥教程</h1> {/*注釋...*/} </div>, document.getElementById('example'));

數組

JSX 允許在模板中插入數組，數組會自動展開所有成員：

React 實例

vararr=[ <h1>菜鳥教程</h1>, <h2>學的不僅是技術，更是夢想！</h2>,];ReactDOM.render( <div>{arr}</div>, document.getElementById('example'));

HTML 標簽 vs. React 組件

React 可以渲染 HTML 標簽 (strings) 或 React 組件 (classes)。

要渲染 HTML 標簽，只需在 JSX 里使用小寫字母的標簽名。

varmyDivElement=<divclassName="foo" />;ReactDOM.render(myDivElement, document.getElementById('example'));

要渲染 React 組件，只需創建一個大寫字母開頭的本地變量。

varMyComponent=React.createClass({/*...*/});varmyElement=<MyComponentsomeProperty={true} />;ReactDOM.render(myElement, document.getElementById('example'));

React 的 JSX 使用大、小寫的約定來區分本地組件的類和 HTML 標簽。

注意:由于 JSX 就是 JavaScript，一些標識符像 class和 for不建議作為 XML 屬性名。作為替代，React DOM 使用 className和 htmlFor 來做對應的屬性。

React 組件

本章節我們將討論如何使用組件使得我們的應用更容易來管理。

接下來我們封裝一個輸出 "Hello World！" 的組件，組件名為 HelloMessage：

React 實例

varHelloMessage=React.createClass({render: function(){return <h1>HelloWorld！</h1>; }}); ReactDOM.render( <HelloMessage />, document.getElementById('example'));

實例解析：

React.createClass 方法用于生成一個組件類 HelloMessage。

<HelloMessage /> 實例組件類并輸出信息。

注意，原生 HTML 元素名以小寫字母開頭，而自定義的 React 類名以大寫字母開頭，比如 HelloMessage 不能寫成 helloMessage。除此之外還需要注意組件類只能包含一個頂層標簽，否則也會報錯。

如果我們需要向組件傳遞參數，可以使用 this.props 對象,實例如下：

React 實例

varHelloMessage=React.createClass({render: function(){return <h1>Hello{this.props.name}</h1>; }}); ReactDOM.render( <HelloMessagename="Runoob" />, document.getElementById('example'));

以上實例中 name 屬性通過 this.props.name 來獲取。

注意，在添加屬性時， class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因為 class 和 for 是 JavaScript 的保留字。

復合組件

我們可以通過創建多個組件來合成一個組件，即把組件的不同功能點進行分離。

以下實例我們實現了輸出網站名字和網址的組件：

React 實例

varWebSite=React.createClass({render: function(){return( <div> <Namename={this.props.name} /> <Linksite={this.props.site} /> </div> ); }}); varName=React.createClass({render: function(){return( <h1>{this.props.name}</h1> ); }}); varLink=React.createClass({render: function(){return( <ahref={this.props.site}> {this.props.site} </a> ); }}); ReactDOM.render( <WebSitename="菜鳥教程"site=" http://www.runoob.com" />, document.getElementById('example'));

實例中 WebSite 組件使用了 Name 和 Link 組件來輸出對應的信息，也就是說 WebSite 擁有 Name 和 Link 的實例。

于任何開發人員來說，在其工具箱中使用Sublime都是一個不錯的選擇。作為一個跨平臺、高度可定制的高級文本編輯器，雖然近年來，受到了一些其他的文本編輯器，比如Visual Studio Code和Atom的強烈沖擊，但仍然擁有粉絲無數。

讓Sublime如此受到熱捧的核心，當然是其可擴展的插件架構，這使的開發人員可以輕松的在Sublime的核心功能基礎上，根據其需要，安裝各類第三方插件。在本文中，我將給所有JavaScript開發人員，推薦10款可以極大改進您工作流程，并提高您工作效率的Sublime插件，每個插件都可以通過Sublime的Package Control進行安裝。

讓我們開始吧！

1. Babel

名單上的第一個插件是Babel，這個插件為您的ES6/2015和React JSX代碼添加了正確的語法高亮顯示。

插件安裝后，別忘記，您首先應該將Babel設置為所有JavaScript/TypeScript文件的默認語法處理器。

如果你覺得，語法高亮并不是一個特別強大的功能，Babel的另一項功能，一定會讓你喜歡上它。

Babel可以與所有流行的構建工具和CLI很好地集成在一起，將ES6/ES7/ESNext，JSX和TypeScript代碼，編譯到ES5，以獲得完整的瀏覽器支持！當然，如果您需要支持IE10及更低版本，可以按照其警告頁面上的提示進行的修改。

2. SublimeLinter

接下來是SublimeLinter，它將兩款JavaScript代碼檢查工具ESLint和JSHint都集成到了一個插件下，實際上，它僅僅是一款Lint工具框架，根據您為項目選擇的具體驗證工具，您還需要安裝想要的SublimeLinter-eslint或SublimeLInter-jshint擴展包。

SublimeLinter會根據你在源代碼中的相關語法配置文件，查看你的代碼，并驗證它是否有適當的樣式和正確的語法。無論你是初學者，還是已經是業界大牛，我都推薦在您的JavaScript代碼開發使用這一插件。而為了使其中任何一個開始工作，您首先需要通過npm工具，將linter包含到您的項目依賴項中，或者在全局中進行安裝，比如：

npm install --save-dev eslint

如果您已正確的安裝并配置好了SublimeLinter，則當您打開或保存JavaScript文件時，就可以看到它令人驚訝的效果，錯誤本身可以通過多種方式進行報告，默認情況下，則顯示在編輯器底部的狀態欄中。

3. Vue Syntax Highlight

Vue已經變得越來越流行了，但令大部分開發人員感到撓頭的，則是在使用*.vue模板時，我們可能需要一些額外的幫助，來讓代碼變得更為可讀。Vue Syntax Highlight就可以幫助你實現這一點。

4. SideBar Enhancements

SideBar Enhancements是一款Sublime的側欄文件與文件夾增強工具，稍有遺憾的是，它只能使用Sumlime3中，而不能安裝在Sublime2中，但現在這貌似應該不應該成為一個問題了。

插件安裝后，則在Sublime的側欄中，使用鼠標右鍵，單擊任何的側欄文件與文件夾，你都可以看到遠比以前更為豐富的針對文件和文件夾的操作。

特別的，這個插件提供了一個非常別致的內容，即它可以通過Copy as Text -- Content as Data URI菜單，將一個文件的內容復制為data:uri base64表達形式，這對于在CSS中，直接嵌入Base64形式表達的圖像特別方便。

同時，插件還提供了大量的各種姿態的搜索操作。同時，作為一個額外的好處，插件可以與另一款插件：SideBarGit，很好地集成在一起，從而在側邊欄中，直接提供各種Git操作。

隨著JavaScript代碼庫規模的不斷增加，選擇一種瀏覽項目和操作項目文件的明智方式當然至關重要的。因此，至少我覺得，這個插件應該成為所有Sublime開發者的必須。

5. JsPrettier

SublimeLinter（其實就是ESLint或者JSHint），可以幫助我們解決代碼格式檢查的問題，那整個團隊種，所有代碼格式化的問題怎么解決呢？一個良好的方案，就是使用Prettier ，通過配置，我們可以制定整個團隊所想要的代碼風格，然后通過這里所介紹的編輯器插件JsPrettier來一鍵格式化/美化代碼。

關于Prettier的安裝，也是一件非常簡單的事情，通過npm工具即可完成

npm install --save-dev prettier

更多的關于pettier的使用，則不是我想在本文中所將的內容。但如果您和您的團隊，不喜歡在很多方面都有點自以為是的Prettier，那么，在這里，還可以介紹兩個其他的Sublime插件推薦給您，一個JsFormat，另一個是配合ESLint一起使用的ESLint-Formatter。

6. TrailingSpaces

這是一款向代碼潔癖癌患者推薦的利器，因為它就一個功能，即：可以清除代碼結尾打多了幾個空格或Tab！對于他們來說，這一插件絕對是他們的好基友。

但是，如果你是那種試圖讓自己的Sublime更輕的人，那么，在用戶首選項中添加配置：

"trailing_spaces_trim_on_save" : true

就絕對是一個好主意，因為這個配置項能讓Sublime在保存時，自動為你刪除這些插件。

突出顯示尾部空格

7. GitGutter

如果你是少數幾個不使用Git的人，那么你可以跳過這一插件。但對于我們大多數人來說，Git已經成為了代碼版本管理的必須，而GitGutter，雖然不會對您的工作流程，有什么大規模的改進，但確實是一個非常好的補充，特別是直接在代碼中對各種插入，修改或刪除的狀態的提示，以及對于所修改內容的說明，對于開發者而言，是非常有幫助的。

8. BracketHighlighter

雖然這個插件出現在整個列表的后面，但并不表示它不重要，甚至可以說，它可能是整個列表中最重要的一款Sublime插件。

當然，這樣說，并不是在說，BrackHighlighter的功能繁復，恰恰相反，其實際上，就非常專業的做好了一件事，即：用最直觀的方式，匹配了代碼中的各種塊標記，比如一對大括號，一對圓括號等等所包含的代碼。

隨著代碼規模的變大，我們實在是太想知道某個{，是在哪里開始，哪里結束的了，來一張圖，感受下它的應用：

9. Markdown Preview

Sublime默認包含一些非常好的Markdown語法突出顯示，但它缺少查看Markdown實際呈現效果的方式......如果你希望在.md文件提交前，就看到它的實際效果，那么，這個插件一定可以幫助到你。當然，可能這是您最不希望出現在這個列表中的插件，我還是少說幾句為上。

10. Boxy Theme

通常情況下，我并不會考慮在插件推薦列表中，加入對主題插件的推薦。但我還是實在忍不住向大家推薦這個插件，哪怕只為了一點，就是：現在我們可以在側邊欄中，為每一種不同類型的文件，指定不同的圖標。

這非常棒！當然Boxy不是唯一可以做到這一點的主題，但真的是其中非常不錯的一個，這算是一點私貨？

佳 React 開發IDE：

互聯網上還有很多的IDE和編輯器。我們為您收集了2022年React.JS開發的最佳IDE。在此集合中，您將找到可幫助您簡化工作流程的 IDE。

Visual Studio

URL： https://visualstudio.microsoft.com/
Github： https://github.com/microsoft/vscode
Documentation： https://docs.microsoft.com/en-us/visualstudio
Price： FreeLanguages
： C， Python， .NET， Javascript， React through extensionsPlatform
： Windows， Mac， LinuxExtension
or Plugins：https://marketplace.visualstudio.com/

VS Code由Microsoft發布：該工具在開源MIT許可證下可用。由于其功能和自由度，VScode經常贏得最受歡迎的IDE的投票。Visual Studio Code IDE 可用于 Windows、Linux 和 Mac 操作系統。它不僅支持JavaScript和React，而且還支持Node.js，TypeScript，并附帶了其他語言的整個擴展生態系統，包括C++，C #，Python，PHP和（當然）.NET。

VS Code是一個很好的IDE，可以啟動您的工作，因為它支持許多編程語言，并且具有許多功能，可以幫助您完成整個過程。

主要特點：

它具有對智能感知代碼完成的內置支持，并且對語義代碼有很好的理解。
導入模塊;
與GitHub集成;
廣泛的主題選擇;
用于測試代碼的集成工具;
通過擴展進行版本控制;
內置調試器;
支持語法高亮顯示;
集成終端;
Go to定義;
Peek定義;
您也可以跳轉到任何類定義;
用于JSX/React、Html和JSON的工具。

當然，您可能不需要VS Code的所有功能（如果您喜歡任何嚴肅的東西，這不太可能），因此可能想要選擇其他東西，但是這個東西在所有情況下都適合我。

當然，我們還沒有列出所有的功能，很可能你不會全部使用它們，但是這些東西在 React 開發方面效果很好。

如果我們看看VS Code和React這樣的東西，那么VS Code可以配置為一個非常高效和高效的機器，以加速開發，這要歸功于它的插件。其中一些插件增強了javascript編程;其中許多專門增強了 react、redux、react native 等的開發體驗。

請注意，通過使用無數的插件，您可以更改整個編碼過程并大大加快開發過程。

優點

它是免費的;
可在不同平臺上使用;
市場上有超過20000個插件;
支持 React.js智能感知;
內存使用率低;
多語言;
強大的定制;
這是一個開源項目，因此您也可以為GitHub上不斷發展的社區做出貢獻。

缺點

有時滯后;
代碼檢查功能不是那么好;
調試功能可能更有幫助;
包括用于包管理的內置屏幕;
有時支持不是很好。

值得注意的擴展

React.js Starter Kit 是在 Bootstrap 的幫助下構建的 react 應用程序前端初學者工具包。它是一個跨平臺的項目模板，由 Node.js 提供支持 - 基于 Gulp、Webpack、BrowserSync、Karma、Protractor 等開發工具，可加快 React 項目初始化速度。

顯然，React Snippet Pack 是一個用于 React JavaScript 框架的代碼段包。

WebStorm

URL： https://www.jetbrains.com/webstorm/
Github： –
Documentation： https://www.jetbrains.com/help/webstorm/meet-webstorm.html
價格： 9/year
語言： Angular， React， Vue， Node.js， Ionic， React NativePlatform
： Windows， Mac， LinuxExtension
or Plugins：https://plugins.jetbrains.com/webstorm

當然，我們不能不提到WebStorm——可能是最先進、最受歡迎的Web開發工具。這個強大的 JavaScript 開發 IDE 具有許多有用的功能，如智能編碼輔助、代碼完成、錯誤檢測以及針對多種語言（如 JavaScript、Node.js、HTML 和 CSS）的重構。創建此IDE的公司稱為JetBrains。

Webstorm IDE 的質量體現在它被絕大多數大型組織使用的事實中。

特征

內置調試器支持;
內置測試能力;
語法錯誤檢測;
與 Git 集成;
與Mercurial集成;
內置的Web服務器有助于在線運行項目;
React 和 JSX 的代碼完成;
它具有實時編輯功能，可讓您在更改代碼后立即在瀏覽器中查看更改;
版本控制系統;
內置終端。

最好的功能之一是，默認情況下，WebStorm配置為在您處理文件時自動保存文件，當您切換到其他IDE時，您會感受到WebStorm的美麗。另一件好事是，WebStorm有一個內置的版本控制系統，每次保存文件時都會提交。它與 Git 提交是分開的。

優點

與源代碼控制系統（如GitHub，Git）以及Subversion，Perforce和Mercurial的原生集成;
設置的靈活性;
默認情況下與Angular，TypeScript，Vue，React的良好集成;
大量插件;
出色的縮進，有關如何簡化代碼的提示以及針對錯誤的基本代碼驗證;
非常有用的合并工具。

缺點

在性能方面不是很好;
處理大量項目的速度很慢;
相對復雜的設置;
它不是開源的。

如果您正在尋找一個成熟的平臺，這可能是正確的選擇，因為它以其過去15年的出色開發功能而聞名。

在 React 開發方面，有以下特性：

WebStorm 附帶了 50 多個插件，使 React 開發更容易。
使用痕跡導航和標記樹的彩色突出顯示在 JSX 標記之間導航
與 Linters（如 ESLint）集成，用于 JSX 代碼

我們認為 WebStorm 是市場上 React 開發中收入最高的 IDE，這要歸功于它的許多功能、插件和良好的文檔。

Reactide

URL： https://reactide.io/
Github： https://github.com/reactide/reactide
Documentation： –
Price： Free， open-sourceLanguages
： ReactPlatform
： macOS， Windows， UbuntuExtension
or Plugins： none

Reactide 是為數不多的、也是第一個專門用于 React 開發的 IDE 之一。它是一個跨平臺的桌面應用程序，提供了一個自定義模擬器，使得構建工具和服務器配置變得不必要。

特征

無縫瀏覽器集成;
實時可視化;
在里面構建工具;
集成節點服務器;
集成終端。

優點

IDE內部組件的實時視圖;
由于在開發環境中實時重新加載，您不需要在代碼文件和瀏覽器之間翻轉來檢查所做的更改;
跨平臺工具。

缺點

沒有插件;
與其他工具相比，沒有社區。

如果你想快速開發一個 React 項目或更改它，那么沒有比 ReactIDE 更好的工具了。該工具運行迅速，并具有許多專門用于 React 開發的功能。

Vim Editor

URL： https://www.vim.org/
Github： https://github.com/vim/vim
Documentation： https://www.vim.org/docs.php
價格： FreeLanguages
：幾乎所有
平臺： Linux， macOSExtension
or Plugins： https://vimawesome.com/

Vim 是一個非常古老的 IDE。好吧，至少作為一個IDE。這是一個非常高級的文本編輯器，你永遠不會讓喜歡它的開發人員離開它，強迫他們切換到VScode或WebStorm。Vim因其配置屬性而在開發人員中非常知名。它是免費的，高度可定制的。

Vim具有搜索和語法突出顯示功能，并且超級輕量級。因此，它可以處理非常非常大的文件。但是，設置Vim需要很長時間。該工具具有圖形界面，但是 - 您可能已經猜到了 - 它需要自定義。即使鼠標要工作，您也需要出汗。默認情況下，Vim 由鍵盤和鍵盤快捷鍵控制。Vim可以是一個偉大的IDE，如果你自定義它，并熟悉它內外。但如果時間緊迫，這可能不是最佳選擇。

特征

它需要RAM上的很少空間來有效地運行;
不同的選項卡和窗口可以幫助同時處理不同的項目;
廣泛的插件系統;
支持數百種編程語言和文件格式;
強大的搜索和替換功能。

優點

可以安裝在非常多的操作系統上;
深度編輯器設置，您可以根據需要自定義所有內容;
代碼編輯過程很快。

缺點

由于它是終端，它非常快，但很難學習;
習慣用戶界面需要很長時間;

支持Vim的一個重要細節是，頂級公司的大量工程師使用VIM，例如Facebook。

用于 React 開發的著名插件

vim-jsx — JSX 的語法突出顯示和縮進。

vim-react-snippets — Vim 與 Facebook 的 React 庫配合使用的一組片段。

vim-babel — Vim 與 Facebook 的 React 庫配合使用的另一組片段。

GNU Emacs Editor

URL： https://www.gnu.org/software/emacs/
Github： https://github.com/emacs-mirror/emacs
Documentation： https://www.gnu.org/software/emacs/documentation.html
價格： FreeLanguages
： Language agnosticPlatform
： GNU， GNU/Linux， FreeBSD， NetBSD， OpenBSD， MacOS， MS Windows and SolarisExtension
or插件： https://github.com/emacs-tw/awesome-emacs

GNU Emacs是一個文本編輯器，帶有基本的用戶界面，但功能非常有用。該工具屬于以其可擴展性而聞名的文本編輯器系列。GNU Emacs對于那些知道如何使用Vim編輯器的人來說將非常熟悉。這個編輯器可以被稱為最簡單的編輯器，但是，它沒有錯過任何重要功能。

特征

提供有據可查的參考資料;
支持統一碼文件;
安裝和下載擴展的功能;
它可以做的不僅僅是React Native應用程序開發。
完全支持統一碼;

優點

高速編碼環境;
語法突出顯示;
很多有用的教程;
主題定制;

缺點

很難習慣;
初始設置時間很長;
許多功能：發現它們可能需要很長時間。

至于 React，Emacs 確實需要一些工作和插件才能真正讓它高效地工作。

擴展

web-mode.el — 它是一種自治的 emacs 主要模式，用于編輯 Web 模板。它與包括JSX（React）在內的許多語言兼容。

Spacemacs Editor

URL： https://www.spacemacs.org/
Github： https://github.com/syl20bnr/spacemacs
Documentation： https://www.spacemacs.org/doc/DOCUMENTATION.html
價格： FreeLanguages
：幾乎與語言無知
的平臺： Windows， Mac， LinuxExtension
or Plugins： –

尋找Emacs和Vim的最佳組合，這是將為您提供最佳服務的編輯器。Spacemacs是一個社區驅動的Emacs發行版，因此是最好的編輯器，從Emacs和Vim中獲取了最好的。

特征

一個偉大的用戶界面，與Vim相比，這里最好的功能之一;
組織良好的密鑰綁定;
Git 集成;
簡單的查詢系統，可快速查找可用的圖層、包等。

優點

可在多個平臺上使用;
這里提供的文檔綽綽有余;
Spacemacs有一個偉大的社區，這意味著你永遠不會長時間被困在一個問題上;
如果您已經是Emacs或Vim的粉絲，那就太好了;
可以配置 eslint 支持;
可以使用更漂亮的.js來格式化保存的文件。

缺點

CPU使用率不是很優化;
該工具有時會卡住。

Emacs依賴于社區編寫的開源軟件包，基本上每種語言的每個IDE功能。我們認為這很棒：您可以自己開發軟件包。肯定有一個學習曲線，但也有一些非常好的工具可以幫助自己在emacs中定位自己。

擴展

React layer — React 的 ES6 和 JSX ready configuration layer。它將自動識別 .jsx 和 .react.js 文件。一個用于 React 集成的包層。

Sublime Text

URL： https://www.sublimetext.com/
Github： https://github.com/SublimeText
Documentation： https://www.sublimetext.com/docs/
價格： > $0 — $99< —
語言： 幾乎與語言無關
平臺： Windows， Linux， macOSExtension
or Plugins： 沒有一個目錄，但有很多插件

Sublime Text是幾乎每種語言的強大文本編輯器。它輕量級，功能豐富，并在流行的平臺上受支持。用戶只需要一個許可證即可在任何計算機上使用崇高文本。該工具速度很快，與多個工具集成，并支持React和React Native以及所有Web編程語言。崇高文本提供了強大的插件支持，以增強編輯器的功能。它目前在Windows，Mac和Linux上可用。

Sublime文本編輯器的功能可以使用插件進行擴展和調整。在實踐中，許多JS插件有助于將Sublime Text變成一個優雅的Javascript IDE。

Sublime Text使用針對速度和美觀性進行了優化的自定義UI工具包，并利用了每個平臺上的本機功能。

特征

崇高文本支持代碼的自動完成以及用戶創建的變量;
命令面板有助于設置代碼的語法。
一個偉大的API和包庫對開發人員是有益的;
支持設置鍵綁定和宏，便于編碼;
編輯器的一個令人敬畏的功能是顯示長代碼的壓縮預覽，這有助于您更快地瀏覽代碼。

優點

易于導航;
可以擴展功能;
多行編輯可能;
初學者友好;
偉大的鍵盤快捷鍵和多選選項;
您可以快速轉到類或方法的定義。

缺點

不是開源的;
大文件加載緩慢;
不是一個完整的IDE;
不是免費的 - 對許多開發人員來說是一個大問題;
免費模式有很多煩人的通知。

我們并不是使用Sublime進行REACT開發的忠實粉絲，因為還有其他更好和免費的選項可用。如果你已經在組織中使用Sublime，并且想要在你的項目中包含React，這絕對是一個不錯的選擇，不需要撓撓頭去尋找其他任何東西。

包

react-native-snippets — 它是 React-native 的 Sublime Text Snippets 的集合

babel-sublime — 帶有 React JSX 擴展的 ES6 JavaScript 的語法定義。

Rekit Studio

URL： https://rekit.js.org/
Github： https://github.com/rekit/rekit
Documentation： https://rekit.js.org/
價格： FreeLanguages
： ReactPlatform
： WebExtension
or Plugins： https://rekit.js.org/docs/plugin.html

Rekit 是一個專門用于使用 React 開發應用程序的 IDE。它既可以用作IDE，也可以用作工具包，可用于使用React，React路由器和Redux開發Web應用程序。Rekit studio在節點服務器上運行，是一個npm包，因此，它在瀏覽器中運行。開發人員可以利用 Rekit Studio 的許多功能，包括代碼編輯、代碼生成、依賴關系圖、重構、生成、單元測試以及更簡單的代碼導航方法。我們喜歡Rekit的主要功能是每個React應用程序都有自己的Rekit工作室，因此事情仍然簡單可控。但是，我們不建議將 Rekit 用于企業級 React js 開發。

特征

重構;
單元測試;
代碼生成;
支持Less和Sass;
React 路由器;
命令行工具;
您還可以通過開發自己的插件來擴展Rekit功能。

Brackets

URL： http://brackets.io/
Github： https://github.com/adobe/brackets
Documentation： http://brackets.io/docs/current/modules/brackets.html
價格： FreeLanguages
： JS， Ruby， Python， Perl， etc.
平臺： Windows， Linux， macOSExtension
or Plugins： https://registry.brackets.io/

Brackets是一個非常輕量級和閃電般的Web開發IDE，但看起來更像是一個源代碼編輯器。它是主要為Web開發人員構建的IDE之一。支架具有巨大的插件支持，并且完全免費使用。由Adobe Systems創建，這個開源軟件可以幫助您使用所有Web編程語言構建代碼。Brackets 適用于 Mac、Windows 和 Linux。功能查找和快速項目切換是它提供的一些顯著功能。

特征

實時預覽，允許您實時連接到瀏覽器;每當您進行更改時，您都會立即在屏幕上看到更改;
支持預處理器;
內置的JavaScript調試器;
大量的插件支持;
啟用快速編輯功能;
適用于Windows，Linux和Mac OS;
允許多個開發人員協作處理代碼;
包括代碼折疊和語法突出顯示;
內聯編輯器。

優點

谷歌瀏覽器中的擴展程序。許多開發人員強調的Brackets編輯器的主要功能是與Google Chrome進行實時通信。在此機制的幫助下，開發人員可以立即觀察進行更改后所有這些更改將如何在瀏覽器中顯示;
廣泛開發的熱鍵系統;
將 Brackets 與其他 JS 編輯器區分開來的主要功能是 Extract 函數。提取功能允許您直接從PSD中提取信息 - 例如字體，顏色和尺寸，具有純CSS，沒有上下文代碼引用;
代碼縮小。

缺點

與市場上的其他編輯器相比，擴展很少;
缺乏對服務器端語言的支持;
困難的項目管理;
處理大文件時性能低下。

在 react 方面，有一些插件可用于增強 Brackets 功能，以便使用 React 組件進行快速開發。

括號是最好的Web IDE，如果你正在尋找一個理解網頁設計的編輯器。它附帶了一套很好的可視化工具，例如網站表單創建者或其他預處理器支持。它是由網頁設計師為網頁設計師創建的。

注意：Adobe 將于 2021 年 9 月 1 日結束對 Brackets 的支持。如果您想繼續使用、維護和改進 Brackets，可以在 GitHub 上分叉該項目。

Atom

URL： https://atom.io/
Github： https://github.com/atom
Documentation： https://atom.io/docs
價格： Free， open-sourceLanguages
： most JavascriptPlatforms
： Windows， Linux， macOSExtension
or Plugins： https://atom.io/packages

如果你在Github上開發一個Web應用程序，那么沒有比Atom更好的IDE了。這個開源編輯器是由GitHub開發的，因此與該平臺密切相關。Atom也是一個完全正常的Javascript編輯器，借助于可以實現的Web項目。Atom擁有廣泛的社區支持，可以傾聽并處理反饋。它可以在Windows，Linux和macOS上使用，并具有龐大的軟件包存儲庫，以滿足開發人員的需求。

特征

易于使用，具有出色的導航UI;
為多個開發人員提供協作支持;
內置自動完成和建議功能;
語法突出顯示;
Atom有一個內置的包管理器，可以不斷更新包;您也可以搜索軟件包或開始創建自己的軟件包;
它還具有一項功能，您可以在其中將文件的模塊或整個文件拖放到其他文件中;
跨平臺編輯;
在文件中鍵入內容時或在所有項目中查找、預覽和替換文本。

優點

完全免費使用;
大量套餐可滿足各種需求;
跨平臺;
即時文件切換;
包。Atom有一個內置的CoffeeScript包管理器;
內置的包管理器很棒;
簡單的界面學習和使用;
Git 集成。

缺點

Atom啟動緩慢;
超過 10–15 MB 的文件可能會導致崩潰。
文檔不是很好;
缺乏代碼執行;
比其他頂級編輯慢;
基于電子 - 因此速度問題。

Atom是真正可破解的，可以使用大量基于Node.js的插件進行定制，以擴展atom功能以滿足您的需求。由于來自不同社區的大力支持以及令人敬畏的UI界面和功能，它吸引了很多開發人員。

包

zenchat-snippets — 它是 react-native、redux 和 ES6 的片段集合。
language-babel — 這個軟件包包括所有JavaScript版本的語言語法，包括ES2016和ESNext，Facebook React使用的JSX語法，Atom的蝕刻等。

選擇正確的 IDE 將對您作為開發人員的性能產生非常大的影響。每個 IDE 都有自己的一組功能、優缺點，這些特性和優缺點是它們之間的區別。我們還討論了用于開發 React 應用程序的所有最佳 IDE。如果你遷移到 IDE 來幫助你進行 React 開發，我們保證你不會回到普通的編輯器。

希望您能為下一個Web開發項目找到合適的一個。畢竟，編寫代碼的是開發人員，而不是IDE。

在線咨詢

上一篇：使用簡單的HTML和CSS構建漂亮的Electron
下一篇：vue中的prop

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

React 教程安裝—JSX—組件=集成所有教程—f

React 特點

React 第一個實例

React 實例

React 安裝

React 實例

項目的目錄結構如下：

src/App.js

React JSX

使用 JSX

React 實例

React 實例

React 實例

樣式

注釋

數組

React 實例

React 組件

React 實例

實例解析：

React 實例

復合組件

React 實例

1. Babel

2. SublimeLinter

3. Vue Syntax Highlight

4. SideBar Enhancements

5. JsPrettier

7. GitGutter

8. BracketHighlighter

9. Markdown Preview

10. Boxy Theme

Sublime Text

Rekit Studio

Brackets

Atom

您的項目需求