正如我們所知， 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，把一個偵聽器附加到任意自定義組件：
複製代碼
importReactfrom'react'
importButtonfrom'@material-ui/core/Button'
constChild =(props) =>
constChild2 =({ children, ...props }) =>(
{children}<child>
)
Child2.whyDidYouRender =true
constApp =()=>{
const[state, setState] = React.useState({})
return(
<child>{JSON.stringify(state, null, 2)}/<child>
<buttontype>setState({ hello: 'hi' })}>
Submit
/<buttontype>
<child2>Child #2/<child2>
)
}
exportdefaultApp
只有在這麼做了以後，我們的控制檯才會彈出令人難以置信的惱人警報：
別誤會我的意思。要把它當做好事情。利用這些惱人的消息，這樣我們就可以修復這些很浪費的重渲染，並且，這些惱人的消息最終將不再煩人。
4. Create React 應用程序
大家都知道 Create React 應用程序 是啟動開發 React 項目最快的方法（擁有開箱即用的現代功能）。
還有什麼能比 npx create-react-app 更簡單的呢？
我在 Medium 上的教程都是用 create-react-app 構建 React 接口界面的，只是因為它又快又簡單。
我們當中有些人可能不知道如何用 CRA 來創建一個 TypeScript 項目。我們要做的就是在末尾加上 typescript：
npx create-react-app — typescript
這會幫我們省去給 CRA 項目手工添加 TypeScript 的麻煩。
5. React Lifecycle Visualizer
React Lifecycle Visualizer
與 Why Did You Render 類似，我們可以啟用我們選擇的任何組件來顯示生命週期可視化器：
複製代碼
importReactfrom'react'
import{
Log,
VisualizerProvider,
traceLifecycle,
}from'react-lifecycle-visualizer'
classTracedComponentextendsReact.Component{
state = {
loaded:false,
}
componentDidMount() {
this.props.onMount()
}
render() {
return
Traced Component
}
}
constEnhancedTracedComponent = traceLifecycle(TracedComponent)
constApp =()=>(
<visualizerprovider>
<enhancedtracedcomponent>
/<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
constrenderComponent =({ count }) =>
render(
<statemockstate>
<statefulcounter>
,
)
it('renders initial count',async() => {
// Render new instance in every test to prevent leaking state
const{ getByText } = renderComponent({count:5})
awaitwaitForElement(()=>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'))
awaitwaitForElement(()=>getByText(/clicked 6 times/i))
})
/<statemockstate>
8. React Developer Tools
React Developer Tools 是一個擴展，它允許在 Chrome 和 Firefox Developer Tools 中查看 React 的組件層次結構。
這是在本列表中最常見的擴展，並仍然是 React 開發人員能夠用於調試應用程序的最有幫助的工具之一。
9. 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 等庫的附加啟動模板。
它們還通過使用
談到 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+ 創建一張速查表，請繼續關注。