2020 年值得你去試試的 10 個 React 開發工具

本文由葡萄城技術團隊翻譯並首發

轉載請註明出處：葡萄城官網，葡萄城爲開發者提供專業的開發工具、解決方案和服務，賦能開發者。

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的，也不是全部的工具都是可視化的，也不是全部的工具都是用來幫助你編寫代碼的。但這裏的重點是，它們中的許多能夠一塊兒使用，並相互補充。