文章翻譯自：blog.bitsrc.io/5-tools-for…
譯者注：
這篇文章中，除了 React devTools 和 Redux devTools，其餘的工具我之前都沒接觸過，看過原文後覺得收穫很大，所以將它翻譯出來，希望可以傳播給更多的人。
- React devTools 和 Redux devTools 這兩個應該大多數人都知道，並且經常在開發中使用，還未使用過的話那本文可以作為你的入坑指南?
- 如果你正在開發業務元件，那這篇文章可以給你不少幫助：StoryBook 可以幫助你提高不少效率；Bit 可以作為團隊中業務元件共享的另一種方案。
- 說起開發react應用的腳手架，你肯定會想起create-react-app，看完文章的第五點，你會發現原來開發react應用的腳手架不只有 create-react-app，還有幾個可能更適合你目前的開發需求。
React非常適合快速開發具有漂亮互動式UI的應用程式。React元件是建立隔離和可重用構建塊的好方法，可以用於開發不同應用程式。
一些最佳實踐有助於開發更好的應用程式，但正確的工具可以使開發過程更快。以下是5（+）個有用的工具，可以加快元件和應用程式的開發效率。
1. Bit
這裡有一段介紹 Bit 的視訊
Bit共享的元件可用NPM / Yarn自動安裝，或與Bit本身一起使用。 後者使您能夠同時開發來自不同專案的元件，並輕鬆更新（和合並）它們之間的更改。
為了使元件更容易被發現，Bit為元件提供了視覺化渲染，測試結果（Bit執行元件單元測試）和從原始碼本身解析的文件。
使用Bit，您可以更快地開發多個應用程式，在團隊協作時將您的元件用作新功能和專案的構建塊。
譯者注：
我剛看完這一點的時候並沒有感受到 Bit 的優勢，覺得使用 npm 包 來共享元件已經是一種很好的方案?，後來再去官網上了解了下發現 Bit 的最大優勢應該是以下幾點（有什麼錯誤歡迎大家指正）：
- 使用 npm 包來共享元件的方案需要您新開一個倉庫來寫元件併發布 npm 包，而 Bit 可以讓您不新開一個倉庫就可以從任何現有專案的倉庫中無縫隔離元件，並共享它們，在其他專案中您可以使用 Bit 來匯入您所需的元件並進行開發和同步。
- Bit 的官網提供了可以做互動式預覽的playground，您可以線上實時修改程式碼看到元件的變化，進而判斷這個元件是不是符合您的使用預期。
然而，目前 Bit 在 GitHub 上的star數量才3k+，大家可以作為一個輔助工具稍作了解
2. StoryBook / Styleguidist
Storybook 和 Styleguidist 是 React 中快速 UI 開發的環境。兩者都是提高 React 應用程式開發效率的絕佳工具。兩者之間存在一些重要的差異，您可以把兩者組合在一起以完成元件開發系統。
- 使用Storybook，您可以在JavaScript檔案中編寫故事。
- 使用Styleguidist，您可以在Markdown檔案中編寫示例。
Storybook一次顯示一個元件的變體，但Styleguidist可以顯示不同元件的多種變體。 Storybook非常適合顯示元件的狀態，而Styleguidist對於不同元件的文件和演示非常有用。
StoryBook
下面有一個簡短的介紹
Storybook是UI元件的快速開發環境。 它允許您瀏覽元件庫，檢視每個元件的不同狀態，以及互動式開發和測試元件。
StoryBook可幫助您獨立於應用程式開發元件，這也有助於提高元件的可重用性和可測試性。
您可以瀏覽庫中的元件，使用其屬性進行播放，並通過網路上的熱重新載入獲得即時印象。
你可以在這裡看一些例子。
不同的外掛可以幫助您更快地開發過程，從而縮短程式碼調整到視覺輸出之間的週期。 StoryBook還支援React Native和Vue.js.
譯者注: 這個真的強推！！！強推！！！
Styleguidist
React Styleguidist是一個具有熱過載的開發伺服器的元件開發環境，它基於.md檔案列出了元件的propTypes並顯示可編輯用法示例。
它支援ES6，Flow和TypeScript，並且可以直接使用Create React App。
自動生成的使用文件意味著你可以使用Styleguidist來充當你們團隊中元件的文件入口。
另請參閱Formidable Labs的React Live。 此元件渲染環境也用於Bit的實時元件playground。
3. React devTools
此官方React Chrome devTools擴充套件程式允許您檢查Chrome開發者工具中的React元件層次結構。它也可以作為FireFox附加元件使用。
使用React devTools，您可以檢查和編輯元件 props 和 state, 通過組織層次結構樹,React devTools可讓您瞭解元件的update如何影響其他元件，以幫助使用正確的元件結構和拆分來設計UI。
擴充套件程式的搜尋欄可讓您快速查詢和檢查所需的元件，從而節省寶貴的開發時間。
您可以在這裡檢視適用於Safari，IE和React Native的獨立應用程式。
4. Redux devTools
此Chrome擴充套件程式（和FireFox附加元件）是一個開發除錯的工具，為您的Redux開發工作提供幫助。它允許您檢查每個state和action的payload，重新評估“分階段”action。
您可以將Redux DevTools Extension與任何處理狀態的體系結構整合。 每個React元件的本地狀態可以有多個儲存或不同的例項。 您甚至可以“時間旅行”取消操作（觀看此Dan Abramov視訊）。 日誌記錄UI本身甚至可以自定義為React元件。
5. Boilerplates & Kick-Starters
雖然這些並不完全是devTools，但它們有助於快速設定React應用程式，同時節省構建和其他配置的時間。
React有許多入門套件，這裡有一些我覺得值得推薦的。您可以快速建立應用程式結構並將元件組合到其中。
Create React App (50k stars)
這個專案被廣泛使用並且非常受歡迎，如果你要快速建立一個簡單的新React應用程式並直接可以執行，它可能是最好用的方法。
此軟體包封裝了開發一個新的React應用程式所需的複雜配置（Babel，Webpack等），因此您可以節省新應用程式的時間。
要建立新應用程式，只需執行一個命令即可。
npx create-react-app my-app
複製程式碼此命令在當前資料夾中建立名為my-app的目錄。 在目錄中，它將生成初始專案結構並安裝依賴項，因此您可以直接開始編碼。
React Boilerplate (18k stars)
這是 Max Stoiber 為您的React應用程式提供的一個啟動模板，該模板專注於離線開發，並在構建時考慮了可擴充套件性和效能。
它的快速腳手架有助於直接從CLI建立元件，容器，路由，選擇器和sagas - 以及它們的測試，而CSS和JS更改可以在您寫程式碼時立即反映出來。
與create-react-app不同，這個樣板不是為初學者設計的，而是為經驗豐富的開發人員準備的（它提供管理效能，非同步，樣式等工具）。
React Slingshot (8.5k stars)
Cory House的這個精彩專案是React + Redux入門套件/模版，帶有Babel，熱過載，測試，linting等等。
與React Boilerplate非常相似，這個入門套件專注於快速開發的開發人員體驗。 每次點選“儲存”時，都會對熱更改進行熱重灌並執行自動化測試。
該專案甚至包括一個示例應用程式，因此您可以直接開始工作，而無需過多地閱讀文件。
- 您還可以檢視這篇文章中解釋的simple-react-app。