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

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

eact 是一個(gè)用于構(gòu)建用戶界面的 JAVASCRIPT 庫。

React主要用于構(gòu)建UI，很多人認(rèn)為 React 是 MVC 中的 V（視圖）。

React 起源于 Facebook 的內(nèi)部項(xiàng)目，用來架設(shè) Instagram 的網(wǎng)站，并于 2013 年 5 月開源。

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

React 特點(diǎn)

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

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

在開始學(xué)習(xí) React 之前，您需要具備以下基礎(chǔ)知識：

HTML5
CSS
JavaScript

React 第一個(gè)實(shí)例

在每個(gè)章節(jié)中，您可以在線編輯實(shí)例，然后點(diǎn)擊按鈕查看結(jié)果。

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

React 實(shí)例

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

React 安裝

React 可以直接下載使用，下載包中也提供了很多學(xué)習(xí)的實(shí)例。

本教程使用了 React 的版本為 15.4.2，你可以在官網(wǎng) 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>

使用實(shí)例

以下實(shí)例輸出了 Hello, world!

React 實(shí)例

<!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>

實(shí)例解析：

實(shí)例中我們引入了三個(gè)庫： react.min.js 、react-dom.min.js 和 babel.min.js：

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

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

以上代碼將一個(gè) h1 標(biāo)題，插入 id="example" 節(jié)點(diǎn)中。

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

通過 npm 使用 React

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

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

國內(nèi)使用 npm 速度很慢，你可以使用淘寶定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認(rèn)的 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 快速構(gòu)建 React 開發(fā)環(huán)境

create-react-app 是來自于 Facebook，通過該命令我們無需配置就能快速構(gòu)建 React 開發(fā)環(huán)境。

create-react-app 自動(dòng)創(chuàng)建的項(xiàng)目是基于 Webpack + ES6 。

執(zhí)行以下命令創(chuàng)建項(xiàng)目：

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

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

項(xiàng)目的目錄結(jié)構(gòu)如下：

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/ （一般自動(dòng)刷新），輸出結(jié)果如下：

React JSX

React 使用 JSX 來替代常規(guī)的 JavaScript。

JSX 是一個(gè)看起來很像 XML 的 JavaScript 語法擴(kuò)展。

我們不需要一定使用 JSX，但它有以下優(yōu)點(diǎn)：

JSX 執(zhí)行更快，因?yàn)樗诰幾g為 JavaScript 代碼后進(jìn)行了優(yōu)化。
它是類型安全的，在編譯過程中就能發(fā)現(xiàn)錯(cuò)誤。
使用 JSX 編寫模板更加簡單快速。

使用 JSX

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

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

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

React 實(shí)例

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

獨(dú)立文件

你的 React JSX 代碼可以放在一個(gè)獨(dú)立文件上，例如我們創(chuàng)建一個(gè) helloworld_react.js 文件，代碼如下：

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

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

React 實(shí)例

JavaScript 表達(dá)式

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

React 實(shí)例

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

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

React 實(shí)例

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

樣式

React 推薦使用內(nèi)聯(lián)樣式。我們可以使用 camelCase 語法來設(shè)置內(nèi)聯(lián)樣式. React 會(huì)在指定元素?cái)?shù)字后自動(dòng)添加 px 。以下實(shí)例演示了為 h1 元素添加 myStyle 內(nèi)聯(lián)樣式：

React 實(shí)例

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

注釋

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

React 實(shí)例

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

數(shù)組

JSX 允許在模板中插入數(shù)組，數(shù)組會(huì)自動(dòng)展開所有成員：

React 實(shí)例

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

HTML 標(biāo)簽 vs. React 組件

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

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

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

要渲染 React 組件，只需創(chuàng)建一個(gè)大寫字母開頭的本地變量。

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

React 的 JSX 使用大、小寫的約定來區(qū)分本地組件的類和 HTML 標(biāo)簽。

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

React 組件

本章節(jié)我們將討論如何使用組件使得我們的應(yīng)用更容易來管理。

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

React 實(shí)例

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

實(shí)例解析：

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

<HelloMessage /> 實(shí)例組件類并輸出信息。

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

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

React 實(shí)例

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

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

注意，在添加屬性時(shí)， class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因?yàn)?class 和 for 是 JavaScript 的保留字。

復(fù)合組件

我們可以通過創(chuàng)建多個(gè)組件來合成一個(gè)組件，即把組件的不同功能點(diǎn)進(jìn)行分離。

以下實(shí)例我們實(shí)現(xiàn)了輸出網(wǎng)站名字和網(wǎng)址的組件：

React 實(shí)例

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'));

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

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

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

讓我們開始吧！

1. Babel

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

插件安裝后，別忘記，您首先應(yīng)該將Babel設(shè)置為所有JavaScript/TypeScript文件的默認(rèn)語法處理器。

如果你覺得，語法高亮并不是一個(gè)特別強(qiáng)大的功能，Babel的另一項(xiàng)功能，一定會(huì)讓你喜歡上它。

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

2. SublimeLinter

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

SublimeLinter會(huì)根據(jù)你在源代碼中的相關(guān)語法配置文件，查看你的代碼，并驗(yàn)證它是否有適當(dāng)?shù)臉邮胶驼_的語法。無論你是初學(xué)者，還是已經(jīng)是業(yè)界大牛，我都推薦在您的JavaScript代碼開發(fā)使用這一插件。而為了使其中任何一個(gè)開始工作，您首先需要通過npm工具，將linter包含到您的項(xiàng)目依賴項(xiàng)中，或者在全局中進(jìn)行安裝，比如：

npm install --save-dev eslint

如果您已正確的安裝并配置好了SublimeLinter，則當(dāng)您打開或保存JavaScript文件時(shí)，就可以看到它令人驚訝的效果，錯(cuò)誤本身可以通過多種方式進(jìn)行報(bào)告，默認(rèn)情況下，則顯示在編輯器底部的狀態(tài)欄中。

3. Vue Syntax Highlight

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

4. SideBar Enhancements

SideBar Enhancements是一款Sublime的側(cè)欄文件與文件夾增強(qiáng)工具，稍有遺憾的是，它只能使用Sumlime3中，而不能安裝在Sublime2中，但現(xiàn)在這貌似應(yīng)該不應(yīng)該成為一個(gè)問題了。

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

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

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

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

5. JsPrettier

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

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

npm install --save-dev prettier

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

6. TrailingSpaces

這是一款向代碼潔癖癌患者推薦的利器，因?yàn)樗鸵粋€(gè)功能，即：可以清除代碼結(jié)尾打多了幾個(gè)空格或Tab！對于他們來說，這一插件絕對是他們的好基友。

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

"trailing_spaces_trim_on_save" : true

就絕對是一個(gè)好主意，因?yàn)檫@個(gè)配置項(xiàng)能讓Sublime在保存時(shí)，自動(dòng)為你刪除這些插件。

突出顯示尾部空格

7. GitGutter

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

8. BracketHighlighter

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

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

隨著代碼規(guī)模的變大，我們實(shí)在是太想知道某個(gè){，是在哪里開始，哪里結(jié)束的了，來一張圖，感受下它的應(yīng)用：

9. Markdown Preview

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

10. Boxy Theme

通常情況下，我并不會(huì)考慮在插件推薦列表中，加入對主題插件的推薦。但我還是實(shí)在忍不住向大家推薦這個(gè)插件，哪怕只為了一點(diǎn)，就是：現(xiàn)在我們可以在側(cè)邊欄中，為每一種不同類型的文件，指定不同的圖標(biāo)。

這非常棒！當(dāng)然Boxy不是唯一可以做到這一點(diǎn)的主題，但真的是其中非常不錯(cuò)的一個(gè)，這算是一點(diǎn)私貨？

佳 React 開發(fā)IDE：

互聯(lián)網(wǎng)上還有很多的IDE和編輯器。我們?yōu)槟占?022年React.JS開發(fā)的最佳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發(fā)布：該工具在開源MIT許可證下可用。由于其功能和自由度，VScode經(jīng)常贏得最受歡迎的IDE的投票。Visual Studio Code IDE 可用于 Windows、Linux 和 Mac 操作系統(tǒng)。它不僅支持JavaScript和React，而且還支持Node.js，TypeScript，并附帶了其他語言的整個(gè)擴(kuò)展生態(tài)系統(tǒng)，包括C++，C #，Python，PHP和（當(dāng)然）.NET。

VS Code是一個(gè)很好的IDE，可以啟動(dòng)您的工作，因?yàn)樗С衷S多編程語言，并且具有許多功能，可以幫助您完成整個(gè)過程。

主要特點(diǎn)：

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

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

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

如果我們看看VS Code和React這樣的東西，那么VS Code可以配置為一個(gè)非常高效和高效的機(jī)器，以加速開發(fā)，這要?dú)w功于它的插件。其中一些插件增強(qiáng)了javascript編程;其中許多專門增強(qiáng)了 react、redux、react native 等的開發(fā)體驗(yàn)。

請注意，通過使用無數(shù)的插件，您可以更改整個(gè)編碼過程并大大加快開發(fā)過程。

優(yōu)點(diǎn)

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

缺點(diǎn)

有時(shí)滯后;
代碼檢查功能不是那么好;
調(diào)試功能可能更有幫助;
包括用于包管理的內(nèi)置屏幕;
有時(shí)支持不是很好。

值得注意的擴(kuò)展

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

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

WebStorm

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

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

Webstorm IDE 的質(zhì)量體現(xiàn)在它被絕大多數(shù)大型組織使用的事實(shí)中。

特征

內(nèi)置調(diào)試器支持;
內(nèi)置測試能力;
語法錯(cuò)誤檢測;
與 Git 集成;
與Mercurial集成;
內(nèi)置的Web服務(wù)器有助于在線運(yùn)行項(xiàng)目;
React 和 JSX 的代碼完成;
它具有實(shí)時(shí)編輯功能，可讓您在更改代碼后立即在瀏覽器中查看更改;
版本控制系統(tǒng);
內(nèi)置終端。

最好的功能之一是，默認(rèn)情況下，WebStorm配置為在您處理文件時(shí)自動(dòng)保存文件，當(dāng)您切換到其他IDE時(shí)，您會(huì)感受到WebStorm的美麗。另一件好事是，WebStorm有一個(gè)內(nèi)置的版本控制系統(tǒng)，每次保存文件時(shí)都會(huì)提交。它與 Git 提交是分開的。

優(yōu)點(diǎn)

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

缺點(diǎn)

在性能方面不是很好;
處理大量項(xiàng)目的速度很慢;
相對復(fù)雜的設(shè)置;
它不是開源的。

如果您正在尋找一個(gè)成熟的平臺，這可能是正確的選擇，因?yàn)樗云溥^去15年的出色開發(fā)功能而聞名。

在 React 開發(fā)方面，有以下特性：

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

我們認(rèn)為 WebStorm 是市場上 React 開發(fā)中收入最高的 IDE，這要?dú)w功于它的許多功能、插件和良好的文檔。

Reactide

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

Reactide 是為數(shù)不多的、也是第一個(gè)專門用于 React 開發(fā)的 IDE 之一。它是一個(gè)跨平臺的桌面應(yīng)用程序，提供了一個(gè)自定義模擬器，使得構(gòu)建工具和服務(wù)器配置變得不必要。

特征

無縫瀏覽器集成;
實(shí)時(shí)可視化;
在里面構(gòu)建工具;
集成節(jié)點(diǎn)服務(wù)器;
集成終端。

優(yōu)點(diǎn)

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

缺點(diǎn)

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

如果你想快速開發(fā)一個(gè) React 項(xiàng)目或更改它，那么沒有比 ReactIDE 更好的工具了。該工具運(yùn)行迅速，并具有許多專門用于 React 開發(fā)的功能。

Vim Editor

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

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

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

特征

它需要RAM上的很少空間來有效地運(yùn)行;
不同的選項(xiàng)卡和窗口可以幫助同時(shí)處理不同的項(xiàng)目;
廣泛的插件系統(tǒng);
支持?jǐn)?shù)百種編程語言和文件格式;
強(qiáng)大的搜索和替換功能。

優(yōu)點(diǎn)

可以安裝在非常多的操作系統(tǒng)上;
深度編輯器設(shè)置，您可以根據(jù)需要自定義所有內(nèi)容;
代碼編輯過程很快。

缺點(diǎn)

由于它是終端，它非?？?，但很難學(xué)習(xí);
習(xí)慣用戶界面需要很長時(shí)間;

支持Vim的一個(gè)重要細(xì)節(jié)是，頂級公司的大量工程師使用VIM，例如Facebook。

用于 React 開發(fā)的著名插件

vim-jsx — JSX 的語法突出顯示和縮進(jìn)。

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
價(jià)格： FreeLanguages
： Language agnosticPlatform
： GNU， GNU/Linux， FreeBSD， NetBSD， OpenBSD， MacOS， MS Windows and SolarisExtension
or插件： https://github.com/emacs-tw/awesome-emacs

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

特征

提供有據(jù)可查的參考資料;
支持統(tǒng)一碼文件;
安裝和下載擴(kuò)展的功能;
它可以做的不僅僅是React Native應(yīng)用程序開發(fā)。
完全支持統(tǒng)一碼;

優(yōu)點(diǎn)

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

缺點(diǎn)

很難習(xí)慣;
初始設(shè)置時(shí)間很長;
許多功能：發(fā)現(xiàn)它們可能需要很長時(shí)間。

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

擴(kuò)展

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

Spacemacs Editor

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

尋找Emacs和Vim的最佳組合，這是將為您提供最佳服務(wù)的編輯器。Spacemacs是一個(gè)社區(qū)驅(qū)動(dòng)的Emacs發(fā)行版，因此是最好的編輯器，從Emacs和Vim中獲取了最好的。

特征

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

優(yōu)點(diǎn)

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

缺點(diǎn)

CPU使用率不是很優(yōu)化;
該工具有時(shí)會(huì)卡住。

Emacs依賴于社區(qū)編寫的開源軟件包，基本上每種語言的每個(gè)IDE功能。我們認(rèn)為這很棒：您可以自己開發(fā)軟件包?？隙ㄓ幸粋€(gè)學(xué)習(xí)曲線，但也有一些非常好的工具可以幫助自己在emacs中定位自己。

擴(kuò)展

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

Sublime Text

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

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

Sublime文本編輯器的功能可以使用插件進(jìn)行擴(kuò)展和調(diào)整。在實(shí)踐中，許多JS插件有助于將Sublime Text變成一個(gè)優(yōu)雅的Javascript IDE。

Sublime Text使用針對速度和美觀性進(jìn)行了優(yōu)化的自定義UI工具包，并利用了每個(gè)平臺上的本機(jī)功能。

特征

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

優(yōu)點(diǎn)

易于導(dǎo)航;
可以擴(kuò)展功能;
多行編輯可能;
初學(xué)者友好;
偉大的鍵盤快捷鍵和多選選項(xiàng);
您可以快速轉(zhuǎn)到類或方法的定義。

缺點(diǎn)

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

我們并不是使用Sublime進(jìn)行REACT開發(fā)的忠實(shí)粉絲，因?yàn)檫€有其他更好和免費(fèi)的選項(xiàng)可用。如果你已經(jīng)在組織中使用Sublime，并且想要在你的項(xiàng)目中包含React，這絕對是一個(gè)不錯(cuò)的選擇，不需要撓撓頭去尋找其他任何東西。

包

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

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

Rekit Studio

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

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

特征

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

Brackets

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

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

特征

實(shí)時(shí)預(yù)覽，允許您實(shí)時(shí)連接到瀏覽器;每當(dāng)您進(jìn)行更改時(shí)，您都會(huì)立即在屏幕上看到更改;
支持預(yù)處理器;
內(nèi)置的JavaScript調(diào)試器;
大量的插件支持;
啟用快速編輯功能;
適用于Windows，Linux和Mac OS;
允許多個(gè)開發(fā)人員協(xié)作處理代碼;
包括代碼折疊和語法突出顯示;
內(nèi)聯(lián)編輯器。

優(yōu)點(diǎn)

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

缺點(diǎn)

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

在 react 方面，有一些插件可用于增強(qiáng) Brackets 功能，以便使用 React 組件進(jìn)行快速開發(fā)。

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

注意：Adobe 將于 2021 年 9 月 1 日結(jié)束對 Brackets 的支持。如果您想繼續(xù)使用、維護(hù)和改進(jìn) Brackets，可以在 GitHub 上分叉該項(xiàng)目。

Atom

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

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

特征

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

優(yōu)點(diǎn)

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

缺點(diǎn)

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

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

包

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

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

希望您能為下一個(gè)Web開發(fā)項(xiàng)目找到合適的一個(gè)。畢竟，編寫代碼的是開發(fā)人員，而不是IDE。

在線咨詢

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

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

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

React 特點(diǎn)

React 第一個(gè)實(shí)例

React 實(shí)例

React 安裝

React 實(shí)例

項(xiàng)目的目錄結(jié)構(gòu)如下：

src/App.js

React JSX

使用 JSX

React 實(shí)例

React 實(shí)例

React 實(shí)例

樣式

注釋

數(shù)組

React 實(shí)例

React 組件

React 實(shí)例

實(shí)例解析：

React 實(shí)例

復(fù)合組件

React 實(shí)例

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

您的項(xiàng)目需求