本文經 Jsmanifest 授權 LeanCloud 翻譯轉載，原文連結。
眾所周知，React 是 JavaScript 庫，用於構建出色的使用者介面。但是，並不是每個人都在使用相同的工具或都知道所有有用的工具，這些工具有助於使 React 開發體驗更有趣，更主動。
如果大家還沒使用 React ，或者你有對它感興趣的朋友，當他們問你為什麼選擇這個庫的時候，你該怎麼回答呢？除了告訴他們這個庫有多棒以外（這應該是首先要說的事），我還想提一下，這些由開源社群建立的工具有助於把開發體驗帶到一個全新的令人興奮的水平。
以下是 2019 年大家可以用來構建 React 應用程式的 22 個工具（該列表沒有按它們的重要性排序）。
1. webpack-bundle-analyzer
大家有沒有想過自己的應用程式哪些包或哪部分佔用了全部空間？好了，我們可以用 webpack-bundle-analyzer 來檢視，它將幫助我們識別出佔用最多空間的輸出檔案。
它將建立一個實時伺服器，並向我們提供捆綁包內容的互動式視覺化樹狀圖。藉助此工具包，我們可以檢視所顯示檔案的位置，它們的 gzip 大小，解析後的大小及其所屬的父子級檔案。
有什麼好處？我們可以根據看到的圖示來優化我們的 React 應用！
這是它的螢幕截圖：
我們可以清楚地看到 pdf 軟體包在應用程式中佔據了最大的空間。它還佔據了最大螢幕，這對我們都很有用。
不過，螢幕截圖質量非常小。我們還可以輸入有用的選項以檢視更多詳細資訊，如 generateStatsFile: true， 並且可以選擇生成靜態 HTML 檔案，儲存在開發環境之外的某個地方，以備後用。
2. React-Proto
React-Proto 是面向開發人員和設計人員的原型製作工具。這是一個桌面軟體，所以在使用之前，我們需要下載安裝該軟體。
以下是工具頁面樣式：
該應用程式允許我們宣告屬性及其型別，在樹狀圖中檢視元件，匯入背景影象，將其定義為有狀態或無狀態，定義其父元件，放大/縮小，以及將原型匯出到一個新的或已有的專案中。
該應用程式似乎更適合 Mac 使用者，不過，它也支援 Windows。
當我們完成使用者介面對映後，可以選擇匯出到現有專案或新專案中。如果選擇匯出到現有專案並選擇了根目錄，它們將被匯出到 ./src/components，如下所示：
以下是在示例中我們使用元件之一的例子：
React-Proto 在 GitHub 上獲得了 2,000 個星標。
不過，我認為這個應用程式還需要更新，並且還有很多需要做的工作，尤其是 React Hooks 的釋出。
除非我們有一張可見的背景圖片，不然就不能縮小。換句話說，如果匯入一張背景圖片，縮小，然後刪除這張圖片後，圖就無法放大了，因為操作按鈕已經變灰色，不可使用了。
放大的唯一方法是重新匯入背景圖片，放大後將其刪除。這個缺陷改變了我對這個工具產生的好感，但因為在其他地方看不到此開原始檔，所以把它加入了列表中。當然，成為開源軟體對這個應用程式來說是件好事，因為這使它有可能成為未來流行的開源儲存庫列表。
3. Why Did You Render
Why Did You Render 猴子補丁 React 通知我們可以避免重渲染。這不僅非常有用，還可以指導我們對專案進行效能修復，幫助我們瞭解 React 工作的方式。而且，當我們對 React 工作原理有更多的瞭解時，也能讓我們成為更好的 React 開發人員。
猴子補丁: 這個叫法起源於 Zope 框架，大家在修正 Zope 的 Bug 的時候經常在程式後面追加更新部分，這些被稱作是“雜牌軍補丁（guerilla patch）”，後來 guerilla 就漸漸的寫成了 gorllia（猩猩），再後來就寫了monkey（猴子），所以猴子補丁的叫法是這麼莫名其妙的得來的。
我們可以通過宣告一個額外的靜態屬性 whyDidYouRender，並將其值設定為 true，把一個偵聽器附加到任意自定義元件：
import React from 'react'
import Button from '@material-ui/core/Button'
const Child = (props) => <div {...props} />
const Child2 = ({ children, ...props }) => (
<div {...props}>
{children} <Child />
</div>
)
Child2.whyDidYouRender = true
const App = () => {
const [state, setState] = React.useState({})
return (
<div>
<Child>{JSON.stringify(state, null, 2)}</Child>
<div>
<Button type="button" onClick={() => setState({ hello: 'hi' })}>
Submit
</Button>
</div>
<Child2>Child #2</Child2>
</div>
)
}
export default App只有這樣做之後，我們的控制檯才會彈出令人難以置信的煩人警報：
但別誤會，請把它當成一件好事。利用那些煩人的訊息，我們就可以修復那些浪費的重渲染。
4. Create React App
大家都知道 Create React App 是啟動開發 React 專案最快的方法（擁有開箱即用的現代功能）。
還有什麼能比 npx create-react-app <name> 更簡單的呢？
我在 Medium 上的教程（以及 Dev.to）都是用 create-react-app 構建 React 介面介面的，就因為它又快又簡單。
我們當中有些人可能不知道如何用 CRA 來建立一個 TypeScript 專案。我們要做的就是在末尾加上 --typescript：
npx create-react-app <name> --typescript這會幫我們省去給 CRA 專案手工新增 TypeScript 的麻煩。
5. React-Lifecycle-Visualizer
React-Lifecycle-Visualizer 是一個 npm 軟體包，用於跟蹤和視覺化任意 React 元件的生命週期方法。
與 Why Did You Render 相似，我們可以選擇任何元件來啟動生命週期視覺化工具：
import React from 'react'
import {
Log,
VisualizerProvider,
traceLifecycle,
} from 'react-lifecycle-visualizer'
class TracedComponent extends React.Component {
state = {
loaded: false,
}
componentDidMount() {
this.props.onMount()
}
render() {
return <h2>Traced Component</h2>
}
}
const EnhancedTracedComponent = traceLifecycle(TracedComponent)
const App = () => (
<VisualizerProvider>
<EnhancedTracedComponent />
<Log />
</VisualizerProvider>
)執行結果，如下所示：
但是，其中一個缺點是它目前僅適用於類元件，因此尚不支援 Hook 。
6. Guppy
Guppy 是 React 的一個友好且免費的應用程式管理器和任務執行器，可以在桌面上執行且支援跨平臺，大家可以放心使用。
它提供了很多友好的圖形介面，為 React 開發人員的一些典型任務專案提供支援。例如建立新專案，執行任務和管理依賴項。並在 2018 年 8 月新增支援 Windows，因此可以放心，它肯定是跨平臺的。
以下是 Guppy 使用時的樣子：
7. react-testing-library
我一直很喜歡 react-testing-library，因為在編寫單元測試時感覺不錯。這個包提供了實用的 DOM 測試程式，鼓勵良好的測試實踐。
此解決方案旨在解決測試實施細節的問題，就像使用者可以看到它們一樣，而不是測試 React 元件的輸入/輸出。
測試實施細節並不是確保應用按預期執行的有效方法。當然，我們能夠更清楚的瞭解如何獲取元件所需的資料，使用哪種排序方法等。但是，如果我們必須更改實現方式以指向另一個資料庫的話，單元測試就會失敗，因為這些是耦合邏輯的實現細節。
這是 react-testing-library 解決的一個問題，因為理想情況下，我們只希望我們的使用者介面能夠正常工作並最終正確顯示。只要這些元件能夠提供預期的輸出，資料如何獲取到這些元件實際上並不重要。
以下是使用此庫進行測試的示例程式碼：
// Hoist helper functions (but not vars) to reuse between test cases
const renderComponent = ({ count }) =>
render(
<StateMock state={{ count }}>
<StatefulCounter />
</StateMock>,
)
it('renders initial count', async () => {
// Render new instance in every test to prevent leaking state
const { getByText } = renderComponent({ count: 5 })
await waitForElement(() => getByText(/clicked 5 times/i))
})
it('increments count', async () => {
// Render new instance in every test to prevent leaking state
const { getByText } = renderComponent({ count: 5 })
fireEvent.click(getByText('+1'))
await waitForElement(() => getByText(/clicked 6 times/i))
})8. React Developer Tools
React Developer Tools 是一個擴充套件外掛，它允許在 Chrome 和 Firefox 開發人員工具中檢視 React 元件層次結構。
這是 React 開發中最常見的擴充套件外掛，並且是 React 開發人員用來除錯其應用程式的最有用的工具之一。
9. Bit
在使用諸如 material-ui 或 semantic-ui-react 之類的元件庫時，Bit 是一個很好的替代方案。它可以讓我們探索數千個開源元件，並使用它們來構建專案。
有很多不同的 React 元件，可供任何人使用，包括選項卡、按鈕、圖表、表格、導航條、下拉選單、載入旋轉器、日期選擇器、麵包屑導航（breadcrumbs）、圖示、佈局等等。
這些是由其他 React 開發人員上傳的，這些開發人員就跟你我一樣。
但是，也有一些可用的實用程式，如格式化日期之間的距離。
10. Storybook
如果大家還不瞭解 Storybook，並且希望能夠輕鬆地構建 UI 元件，我強烈建議你立即使用它。該工具啟動了支援熱過載的實時開發伺服器，讓我們可以在其中獨立地實時開發 React 元件。
另一個很棒的事情是，我們可以使用現有的開源外掛，將我們的開發經驗提升到一個全新的水平。例如，利用 Storybook README 包，我們可以在同一頁面上建立 README 文件，同時開發供生產使用的 React 元件。這足以作為常規文件頁面了：
11. React Sight
大家有沒有想過自己的應用程式在流程圖中看起來是什麼樣的？React -sight 可以讓整個應用程式以樹狀圖的形式展示層次結構，清楚檢視我們的 React 應用程式。它還支援 React Router，Redux 和 React Fibre。
使用此工具，我們可以將滑鼠懸停在節點上，這些節點是指向樹中與它們直接相關的元件的連結。
如果大家在檢視結果時遇到問題，可以在位址列上輸入 chrome:extensions，找到 React Sight
框並單擊 Allow access to file URLs 開關，如下所示：
12. React-cosmos
React-cosmos 是用於建立可重複使用 React 元件的開發工具。
它會掃描專案中的元件，並且可以實現以下功能：
- 用屬性、上下文和狀態的任意組合下渲染元件
- 模擬每個外部依賴項（例如 API 響應、localStorage 等）
- 與正在執行的例項進行互動時，檢視應用程式狀態的實時變化
13. CodeSandbox
這是本次推薦中最好的可用工具之一，它可以讓我們手動使用 React 的速度比眨眼還快（好吧，也許也沒那麼快）。
這個稱為 CodeSandbox的工具是一個線上編輯器，我們從建立原型到 Web 應用程式部署 - 都可以在這個網站實現！
在早期，Codesandbox 僅支援 React，但現在已經擴充套件到 Vue 和 Angular 等庫。他們還支援常見的靜態站點生成器（如 gatsby 或 nextjs ）建立專案來啟動下一個 React Web 專案。
關於 codesandbox，它不僅活躍，還有很多有意思的事情可以討論。
如果大家需要探索一下人們為方便大家起見正在構建的一些專案，那麼單擊 explore 就可以輕鬆訪問到大量程式碼示例，來幫助大家更新下一個專案：
大家一旦開始編輯專案，就會意識到，實際上要使用的是個功能強大的 VSCode 編輯器。
我很想寫一篇完整的文章，介紹我們今天在 codeandbox 上可以使用的所有功能，不過，現在看起來工作已經完成了。
14. React bits
React bits 是 React 模式、技術、技巧和竅門的集合，所有這些都以類似線上文件的格式編寫，大家可以在同一個選項卡上快速訪問不同的設計模式和技術、反模式、樣式、UX 變體以及其他有用的與 React 相關的材料。
他們有一個 GitHub 儲存庫，目前有 10437 星。
一些示例包括諸如道具代理，在不同場景下處理各種 UX 的組合之類的概念，甚至還提示了每個開發人員應該避免的一些陷阱。
這是他們頁面上的樣子，如大家在左側的選單上看到的那樣，有很多資訊：）
15. Folderize
Folderize 是一個 VSCode 擴充套件。它可以讓我們將元件檔案轉換為元件資料夾結構。轉換後的 React 元件仍將是一個元件，只是現在已轉換為一個目錄。
例如，假設我們正在建立一個 React 元件，它把檔案作為屬性以顯示有用的資訊，比如它們的後設資料。後設資料元件的邏輯佔用了很多行，因此我們決定將其拆分為一個單獨的檔案。但是，當我們決定這樣做時，我們就有了兩個相互關聯的檔案。
因此，如果我們的目錄如下所示：
我們可能想把 FileView.js 和 FileMetadata.js 抽象到目錄結構中，像 Apples- 那樣，特別是如果我們希望新增更多與檔案相關的元件，比如 FileScanner.js 。這就是 folderize 可以為我們做的事情，這樣它們就可以具有以下類似結構：
import React from 'react'
import FileView from './src/components/FileView'
const App = (props) => <FileView {...props} />
export default App16. React Starter Projects
React Starter Projects 是一個很棒的依賴庫列表，我們可以在一個頁面中檢視全部專案。因此，如果我們覺得能同時快速檢視到大量選項是非常有用的，那麼這個很適合我們。
一旦看到喜歡的入門專案後，我們就可以簡單克隆儲存庫，根據開發中的應用需要進行簡單修改。但是，並非所有的庫都用來克隆儲存庫，因為其中一些庫需要通過安裝形式，才能成為專案的依賴項。這樣可以更輕鬆地獲取更新並保持專案整潔。
以下是該頁面看起來的樣子：
17. Highlight Updates
可以說，這是每個開發者工具包裡都應該有的重要工具。Highlight Updates 是 React DevTools 的一項擴充套件功能，可以檢視頁面中的哪些元件正在不必要地重渲染。
它們會用橙色/紅色標出嚴重的重渲染問題，幫助我們在開發頁面時更容易的發現一些效能問題。
除非我們的目標是構建平庸的應用程式，否則為什麼不試試這個在我們身邊的好東西。
18. React Diff Viewer
React Diff Viewer 是使用 Diff 和 React 製作的簡單美觀的文字差異檢視器。支援多種功能，如：分屏檢視，內聯檢視，單詞差異，行高亮顯示等。
如果我們想將此功能嵌入記事本（如 Boostnote）和自定義至應用程式（比如主題顏色、故事演示文件組合等），那麼，它將非常有用。
19. JS.coach
JS.coach 是我經常用來查詢 React 相關材料的網站。我不知道為什麼提到這個網站的人不多，但在這個頁面我發現了幾乎所有我需要的資訊，它快捷、方便，並不斷更新，總是能為我所有的專案提供所需的結果。
最近，他們新增了 React VR 選項卡，這真是太好了！
20. Awesome React
Awesome React 開源庫是一個與 React 相關的並非常棒的列表。
這讓我可能會忘記其他網站只從這個連結學習 React 。因為可以在此找到大量有用的資源，這些資源肯定會幫助我們構建出色的 React 應用程式！
21. Proton Native
Proton Native 為大家提供了一個 React 環境來構建跨平臺的本機桌面應用程式。
它是 Electron 的替代產品，只有一些簡潔的功能，包括：
- 與 React Native 相同的語法
- 適用於現存的 React 庫，例如 Redux
- 跨平臺
- 原生元件，不再有 Electron
- 與所有正常的 Node.js 包相容
有興趣瞭解更多嗎？請閱讀他們的文件。
22. Devhints React.js Cheatsheet
一個不錯的 React 速查表，儘管它缺少 React Hooks。不用擔心，我將為 Reactv16.8 + 建立速查表，請繼續關注。
結論
以上就是本次分享的全部工具。
希望大家在這裡找到了有價值的資訊。