正如我們所知，React是JavaScript庫，用於構建精彩的用戶界面。然而，並不是每個人都在使用相同的工具或知道有這麼一些出色的工具，可以讓Reacat開發體驗變得更加有趣和積極主動。
如果大家還沒有用過React，或者大家的朋友可能有興趣使用它，那麼，當被問及爲什麼要使用這個庫的時候，我們該怎麼回答呢？
除了告訴他們這個庫多麼棒以外（這應該是首先要說的事），我還會提一下，由開源社區創建的工具有助於把開發體驗帶到一個全新的令人興奮的水平。
以下是2019年大家可以用來構建React應用程序的22個工具（該列表沒有按它們的重要性排序）
1. Webpack Bundle Analyzer
有沒有想過自己的應用程序中的哪些包或哪些部分佔用了全部的空間？好了，我們可以用Webpack Bundle Analyzer來找出答案。這個包將幫助我們識別出佔用最多空間的輸出文件。
它將創建一個活動服務器，可視化我們的包的內容，用一個交互式樹狀圖呈現給我們。在我們的工具包裏有了這個工具之後，我們就能夠看到呈現的文件所處的位置、它們的gzip大小、解析後的大小以及它們的父文件/子文件。
好處？嗯，我們可以根據所看到的來優化自己的React應用程序！
下面是個截屏，它看起來就是這樣的：
我們可以清楚地看到，PDF包在應用程序中佔用了大部分空間。並且，它還佔據了大部分的屏幕。這非常有用。
然而，截屏是最低限度的展示。我們還可以傳入有用的選項，以更詳細地查看它，如generateStatesFile：true，還可以選擇生成一個靜態HTML文件，我們可以把它保存在我們的開發環境外面的某個地方，以便以後使用。
2. React-Proto
React-Proto是開發人員和設計人員的原型工具。它是一個桌面軟件，因此，在使用之前，我們必須下載並安裝該軟件。
以下是該軟件在使用時的一個示例：
該應用程序允許我們聲明屬性及其類型、在樹狀圖中查看我們的組件，導入一張背景圖片、把它們定義爲有狀態或無狀態、定義其父組件、放大/縮小，並把原型導出到一個新的或現有的項目中。
該應用程序似乎更適合Mac用戶，但是，它也適合Windows用戶。
當我們完成用戶界面的映射時，可以選擇導出到一個現有項目或一個新項目中。如果選擇導出到一個現有項目並選擇了根目錄，它將把它們導出到./src/components，如下所示：
以下是在示例中我們使用的組件之一的例子：
React-Proto在GitHub上已經獲得了2000多個星標。
但是，我本人認爲該應用程序需要更新，而且還有更多的工作要做，尤其是React Hooks的發佈。
除非我們有一張可見的背景圖片，不然就不會縮小。換句話說，如果導入一張背景圖片，縮小，然後刪除這張圖片，那麼，就無法放大了，因爲操作按鈕已經變灰色，不可使用了。
唯一能夠放大的方法是再次導入該背景圖片，然後在放大後刪除它。這個缺陷改變了我對該應用程序的看法，但是，因爲我們在其他地方都看不到這個開源工具，所以還是把它放進了列表中。
還有，成爲開源軟件對這個應用程序來說是件好事，因爲這使它有可能成爲未來流行的開源存儲庫列表（它們的特點是重要的，但是，它們似乎缺人手。）
3. Why Did You Render
Why Did You Render 猴補丁（monkey patches） React通知我們可以避免的重渲染。這非常有用，不僅可以指導我們爲我們的項目進行修復，而且可以幫助我們理解React的工作原理。並且，當我們對React的工作原理有更好的理解時，我們就會成爲更好的React開發人員。
我們可以通過聲明一個額外的靜態屬性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應用程序
大家都知道Create React應用程序是啓動開發React項目最快的方法（擁有開箱即用的現代功能）。
還有什麼能比npx create-react-app
我在Medium上的教程都是用create-react-app構建React接口界面的，只是因爲它又快又簡單。
我們當中有些人可能不知道如何用CRA來創建一個TypeScript項目。我們要做的就是在末尾加上typescript：
npx create-react-app
這會幫我們省去給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>
)
這將呈現可視化器，所示如下：
然而，這有個缺點，目前只能用於類組件，因此還不支持Hooks。（問題是，它們能夠做到嗎？因爲這跟生命週期有關。）
6. Guppy
Guppy是一個友好且免費的React應用程序管理器和任務運行器，可以在桌面上運行。
它們似乎優先考慮那些React的開發新手。但是，對於高級開發人員也可能是有用的。
它提供了一種友好的圖形化用戶界面，用於React開發人員經常面對的很多典型任務，如：創建一個新項目、執行任務和管理依賴項。2018年8月添加了對Windows的支持，因此，可以肯定它是跨平臺的。以下是Guppy看起來的樣子：
7. react-testing-library
在編寫單元測試時，react-testing-library用起來感覺很好，因此，我一直喜歡用它。這個包提供了React 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 Developer Tools中查看React的組件層次結構。
這是在本列表中最常見的擴展，並仍然是React開發人員能夠用於調試應用程序的最有幫助的工具之一。
9. Bit
在使用組件庫（如Material-UI或Semantic UI React）時，Bit是一個很好的替代方法。
Bit讓我們探索數以千計的開源組件，並允許我們使用它們來構建項目。
有很多不同的React組件，可供任何人使用，包括選項卡、按鈕、圖表、表格、導航條、下拉菜單、加載旋轉器、日期選擇器、麪包屑導航（breadcrumbs）、圖標、佈局等等。
這些是由其他React開發人員上傳的，這些開發人員就跟你我一樣。
但是，也有一些可用的實用程序，如格式化日期之間的距離。
10. Storybook
如果你還不知道Storybook，並希望能夠更容易地構建UI組件，那麼，我強烈建議你開始使用它。
該工具啓動一個實時開發服務器，支持開箱即用的熱重載，我們可以在其中獨立地實時開發React組件。
關於這個還有一件很棒的事情是，我們可以使用現有的開源插件，把我們的開發體驗提升到一個全新的水平。
比如，藉助Storybook README包，我們可以創建README文檔，同時，在同一頁面上開發用於生產的React組件。
這足以作爲普通的文檔頁面了：
11. React Sight
大家有沒有想過，自己的應用程序在流程圖中看起來是什麼樣子？React Sight可以讓大家可視化自己的React應用程序，藉助整個應用程序的實時組件層次結構樹呈現。
它還支持反應路由器（react-router）、Redux，以及React Fiber。
藉助該工具，大家可以將鼠標懸停於節點上，它們是指向那些跟樹中直接跟它們有關的組件的鏈接。
如果大家在查看結果時遇到困難，那麼，可以在地址欄中鍵入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等庫的附加啓動模板。
它們還通過使用Gateby或Next.js等常用靜態站點生成器創建項目，支持啓動下一個React web項目。
談到CodeSandbox，有很多好東西可以講。首先，它非常活躍。
如果大家需要探索一下人們爲方便大家起見正在構建的一些項目，那麼簡單地點擊一下explore就可以訪問一大堆代碼示例，來幫助大家更新下一個項目：
一旦大家開始編輯一個項目，就會意識到，將要使用的實際上是個強大的VS Code編輯器。
我很想寫一篇文章全面介紹一下如今我們可以在CodeSandbox使用的功能，但是，看起來，這項工作已經完成了。
14. React Bits
React Bits是React模式、技術、技巧和竅門的集合，都是用類似於在線類文檔的格式編寫的，大家可以快速地訪問不同的設計模式和技術、反模式、樣式、UX變體和其他有幫助的與React相關的材料，所有這一切都在同一個選項卡上。
他們有個GitHub存儲庫，目前有9923個星標。
一些示例包括一些概念，如屬性代理、用於在不同場景中處理不同UX的組合，甚至公開了一些每個React開發人員都應該知道的一些陷阱。
這就是在他們頁面上的感覺。正如大家可以在左側菜單上看到的，上面有很多信息：
15. folderize
folderize是一個VS Code擴展，發佈的時間還不到7天。它使我們能夠把一個組件文件轉換爲組件文件夾結構。我們的React組件仍將是個組件，只是現在它轉換成一個目錄而已。
比如，假設我們在創建一個React組件，它把文件作爲屬性以顯示有用的信息，比如它們的元數據。
用於元數據組件的邏輯佔用了很多行，因此，我們決定把這個拆分成一個單獨的文件。但是，當我們決定這麼做的時候，我們就有了兩個相互關聯的文件。
因此，如果我們有個像這樣的目錄：
我們可能想把FileView.js和FileMetadata.js抽象到一個目錄結構中，就像Apples那樣——尤其是，如果我們正在考慮添加更多與FileScanner.js等文件相關的組件。
這就是folderize爲我們所做的事，這樣，它們可以得到與下面類似的結構：
16. React啓動項目
以下是一個很棒的React啓動項目列表，我們可以在一個頁面上看到全部項目。因此，如果我們是那種覺得用一個巨大的列表來同時列出所有的選項是很有用的人，那麼這個就很適合我們。
一旦看到我們喜歡的啓動項目，我們可以簡單地克隆存儲庫，並根據我們將要開發的應用程序做一些修改。
然而，並不是所有的庫都打算通過克隆存儲庫來使用，因爲它們中有一些是要安裝的，這將成爲我們項目中的依賴項。
這使獲得更新並保持項目簡潔變得更容易。
以下是該頁面看起來的樣子：
17. 高亮顯示更新（Highlight Updates）
按理說，這是最重要的工具，任何人都會把它放在自己的開發工具包裏。高亮顯示更新是React DevTools擴展的功能，可以讓我們查看頁面中有哪些組件進行了不必要的重渲染：
它有助於我們看到開發頁面時的瓶頸問題，並且因爲它們用橙色或紅色對嚴重的重渲染問題進行了着色，所以更容易發現問題。
除非我們的目標是構建一個平庸的應用程序，否則爲什麼不試試這個在我們身邊的好東西呢？
18. React Diff Viewer
React Diff Viewer是個簡單又美觀的文本差異查看器，用Diff和React構建而成。它支持這些功能，如：分屏視圖、內聯視圖、單詞差異、行高亮等等。
如果我們想把這個功能嵌入我們的記事簿（如Boostnote），並對其進行定製以更適合我們的應用程序（主題顏色、文檔與故事書演示文本的組合等等），那麼，這是很有用的。
19. JS.coach
我用來尋找React相關資料最常用的網站是JS.coach。現在，我不確定爲什麼提到這個網站的人不多，但是，僅僅從這個網頁，我已經找到了所有我需要的東西。
它又快又簡單，並且不斷地更新，總是能爲我所有的項目提供所需的結果。
最近，他們添加了React VR選項卡，非常棒！
20. Awesome React
這個GitHub 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。不要擔心，我將爲React v16.8+創建一張速查表，請繼續關注。
原文鏈接：