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：該指令将檢查你項目的結構，并嘗試了解你正在使用的視圖層（因為Storybook支援React以外的其他視圖層，例如Vue，Angular等）。
$ npm run storybook 這是另一個非常有趣的互動式工具，可讓您建立和展示您的UI元件。
5、 React Styleguideist
請仔細檢視上圖。在右側，你可以看到實際的代碼，它在左側生成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 $ npm init react-app my-app 或者，如果你不喜歡npx，你還可以使用npm或yarn：
或者
$ 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相關的10個工具，并不是所有的工具都是Web的，也不是所有的工具都是可視化的，也不是所有的工具都是用來幫助你編寫代碼的。但這裡的重點是，它們中的許多可以一起使用，并互相補充。