本文由葡萄城技術團隊翻譯并首發
轉載請注明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者，
JavaScript每天都在出現大量的框架和工具，而React是除了上次我們提到的Vue和Ember之外另一款比較流行的框架，但因為新的工具每天都在不斷的出現，開發者在嘗試時總會有些不知所措，
因此，當為你的新React專案選擇合適的IDE，合適的可視化工具甚至是合適的樣式時，你都會有很多選擇，你該怎么選擇合適的？這是一件令人犯愁的事兒，
在本文中，我將介紹11個關于React的開發工具，以幫助你選擇以及帶你了解如何用它們來使你更充分的使用框架，
1. React開發人員工具
我們將從React開發人員最受歡迎的工具之一的Chrome React Dev Tools開始說起，它是一個Chrome 擴展程式，最近它發布了它的v4版，
安裝完成后，打開Chrome的開發人員工具你就能看到多出了Components和Profiler選項卡，“Components”選項能幫助你查看螢屏上組件串列以及從其他組件派生出的子組件，你能夠選擇檢查甚至編輯組件的狀態和屬性，使用“Profiler”選項卡，你也可以評估應用程式的性能，
這兩個選項都可以在Chrome DevTools選項卡上找到，為了能更好的體驗該插件的功能和特性，你可以使用這個在線站點去體驗，
2. React Sight
除了上面的擴展外，我們需要提到另一個Chrome 擴展程式React Sight，它可以幫助你在檢查React應用程式時發揮作用，
在安裝DevTools后，在你已經在React Dev Tools和React Sight的擴展設定中啟用了“允許訪問檔案URL”選項，你就可以在DevTools種找到一個新的名為“React Sight”的標簽，當你運行本地程式時，你將可以使用React Sight以可視化樹狀的形式查看和創建不同的組件，這將讓你能夠方便的理解它們的連接方式，在你把滑鼠懸停在元素上時，就可以看到它們當前的狀態和屬性，
3. React Extension Pack (for VS Studio)
到目前為止，Visual Studio可能是JavaScript開發人員最喜愛的IDE之一，這里說的是之一而不是唯一，因為有很多不錯的其他IDE也非常棒，例如Sublime，IntelliJ和Vim，
但在這里我們就不再展開了，這所以這里提到了VS，是因為VS背后有著強大的社區，所以讓我們看看React Extension Pack，
本質上，它是一組為完成與React相關任務的擴展包，在一般情況下，VS在決議和在做一般JS需求時做的很出色，但這個小工具套包將它帶入了一個新的高度，在這個包里，你將找到：
- ReactJS代碼片段：它提供了40個React代碼片段，它可以滿足你所有通用需求以及34個propTypes特定的代碼片段，它能避免你浪費大量時間重復勞作，從而提高日常的作業效率，
- ES Lint：添加了對命令列工具的支持，它集成到你的IDE中，并幫助你改進語法，設定自己的編碼樣式，甚至在某些情況下能為你自動修復錯誤，
- npm：當你需要安裝新的插件、重新啟動服務器或是運行某些npm特定命令時，你都必須從IDE跳到終端，這可能會令你有一些累，所以這個擴展增加了直接從IDE直接運行npm命令的功能，
- JS ES6片段：這個插件將包含40多個代碼片段，這將是你提高開發效率的絕對必要條件，
- 搜索node_modules：使用這個擴展，你可以輕松找到模塊并在編輯器中將其打開，
- npm IntelliSense：使用此模塊，你可以輕松列出所有已安裝的模塊，快速搜索它們，并插入正確的代碼片段以將其匯入代碼中，
- Path intelliSense：最后，與上一個擴展名行內，在當你不是處理大型專案的唯一一人時，記住所有路徑和檔案名變得非常困難和麻煩，此擴展名將幫助您自動完成本地匯入的路徑，
一共是7個擴展，它們分別為專案提供了一些價值，安裝這個擴展包，你可以從VS的命令面板使用以下命令（使用CTRL + P打開它）中輕松進行安裝：
ext install jawandarajbir.react-vscode-extension-pack
4. Storybook
React是為了幫助你以非常直觀的方式撰寫UI而設計的，但必須通過寫代碼才能創建可視的組件并不是真正自然的事情，這就是為什么我們通常會從代碼跳到瀏覽器，然后再回到代碼，
Storybook是一個開源工具，它可以用來開發自己的UI組件，它不僅僅只是一個代碼庫，他們的在線UI編輯器允許你開發、檢查并最終以互動的方式展示你的作品(這在開發可視化組件時是至關重要的)，
為了將Storybook安裝到你現有的React專案中，你所要做的就是：
$ npx -p @storybook/cli sb init
該命令將檢查你專案的結構，并嘗試了解你正在使用的視圖層（因為Storybook支持React以外的其他視圖層，例如Vue，Angular等），
命令完成后，您可以通過運行以下命令運行Storybook：
$ npm run storybook
5. React Styleguideist
這是另一個非常有趣的互動式工具，可讓您創建和展示您的UI組件，
請仔細查看上圖，在右側，你可以看到實際的代碼，它在左側生成UI，你可以通過這種方式展示UI，甚至可以通過直接在顯示的界面上更改代碼來對其進行測驗和編輯UI，
為了將其包含到你的React專案中，你所需要做的就是(假設您已經安裝了webpack，并且您使用Create React App創建了專案)：
$ npm install --save-dev react-styleguidist
然后運行以下命令啟動你的樣式設定服務器：
$ npx styleguidist server
如果你想了解有關在專案上使用Styleguideist的更多資訊，請查閱檔案及演示，
6. Create React App
標準的專案結構是使用眾多React工具的基礎，這就是Facebook的Create React App發揮作用的地方，事實上，這個工具使用方式非常簡單，簡單到你使用一條命令就能創建一個全新的React專案，而不必去思考什么專案結構才是最好的或是哪些模塊要添加到專案才是正確的，這個工具將為您完成所有的作業，
如果你已經安裝了npx，則無需安裝任何內容，只需以下行即可：
$ npx create-react-app my-app
或者，如果你不喜歡npx，你還可以使用npm或yarn：
$ npm init react-app my-app
或者
$ yarn create react-app my-app
但無論如何，都需要在系統上安裝Node.js（8.16.0或10.16.0或更高版本），
使用這些命令之一，你將獲得一個檔案夾結構，如下所示：
my-app ├── README.md ├── node_modules ├── package.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg └── serviceWorker.js
有了如上的結構，你就可以如果如下命令啟動服務器開始開發作業了：
$ cd my-app $ npm start #根據喜好使用yarn start 也可以
運行完成后，你可以通過http://localhost:3000訪問到這個全新創建的應用，
7. React Bootstrap
你聽過Bootstrap嗎？這是一個較為流行的CSS框架，它提供了一組CSS類和JavaScript函式，可讓您輕松制作精美且回應式的UI，
現在React Bootstrap的作者重寫了JS部分的代碼，使其能與React兼容，因此，你現在就可以像使用React組件一樣使用它的組件了：
為了將其添加到您的專案中，您可以使用 npm
$ npm install react-bootstrap bootstrap
準備就緒后，您可以將所需的樣式表添加到專案App.js或src/index.js檔案中，
{/* The following line can be included in your src/index.js or App.js file*/}
import 'bootstrap/dist/css/bootstrap.min.css';
8. React-Proto
如果你對代碼不太感興趣，而對視覺設計更感興趣，那么也許react-proto就是適合你的工具，有了它，您可以使用拖放來創建UI原型，而不必為其撰寫代碼，
你可以從設計者為你提供的設計稿開始，使用此工具標記所有可能的組件，為它們提供名稱、屬性和層次結構的設定，完成后，你能夠將它們匯出到實際的自動生成的代碼中，而后你就可以對其進行自定義，
如果你即將開始一個新專案，這個工具將會為你為專案初始階段節省很多時間，
9. Why did you render
Why did you render是一個用來檢測React組件是否需要重新渲染的工具，若被判定不需要重新渲染，那么則會console出一段標記組件的屬性、狀態和建議，供開發者進行調整，
您可以使用以下簡單的方法安裝它：
$ npm install @ welldone-software / why-did-you-render --save
然后，您可以使用以下幾行將其包含到您的專案中：
import React from 'react';
if (process.env.NODE_ENV !== 'production') {
const whyDidYouRender = require('@welldone-software/why-did-you-render');
whyDidYouRender(React);
}
之后，剩下要做的就是標記要通知您的組件，如下所示：
class BigListPureComponent extends React.PureComponent {
static whyDidYouRender = true
render(){
return (
//some heavy render you want to ensure doesn't happen if its not neceserry
)
}
}
一切準備就緒后，您可以期待以下輸出：
10. Proton Native
最后，對于最后一個工具，我想介紹一種使用React來創建桌面應用程式的方法，因為畢竟，像Electron這樣的專案，用JavaScript做這件事已經有一段時間了，
現在，有了Proton Native，你也可以用React來實作了，你可以通過定義React組件來定義GUI元素，并且該工具與所有Node.js模塊、Redux兼容，并且由于Proton的特性，它完全是跨平臺的！
為了將它安裝到你的系統中，你所需要做的就是通過NPM并執行以下命令：
$ npm install -g create-proton-app
但是請注意，如果你使用的是Linux，則需要先安裝以下依賴項：
libgtk-3-dev build-essential python2 pkg-config
最后，創建應用程式，只需執行以下操作：
$ create-proton-app my-app # 進入專案目錄 $ cd my-app # 運行app $ npm run start
他們已經有一個可用的示例供你查看，如果你想了解如何將其用于自己的專案，可以隨時查看它的完整檔案，
總結
這些是與React相關11個工具，并不是所有的工具都是Web的，也不是所有的工具都是可視化的，也不是所有的工具都是用來幫助你撰寫代碼的，但這里的重點是，它們中的許多可以一起使用，并相互補充，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/124205.html
標籤：其他
下一篇：Github克隆加速