【譯】5個工具 幫助你在React中提高開發效率
文章翻譯自： ofollow,noindex">blog.bitsrc.io/5-tools-for…
譯者注：
React非常適合快速開發具有漂亮互動式UI的應用程式。React元件是建立隔離和可重用構建塊的好方法，可以用於開發不同應用程式。
一些最佳實踐有助於開發更好的應用程式，但正確的工具可以使開發過程更快。以下是5（+）個有用的工具，可以加快元件和應用程式的開發效率。
5個工具，可以提高 React UI元件和應用程式的開發效率
1.Bit
Bit是一個開源平臺，用於使用元件構建應用程式。 使用Bit，您可以組織來自不同應用程式和專案的元件（無需任何重構），並使其可以在構建新功能和應用程式時被發現，使用，開發和協作。
這裡有一段介紹 Bit 的視訊
Bit共享的元件可用NPM / Yarn自動安裝，或與Bit本身一起使用。 後者使您能夠同時開發來自不同專案的元件，並輕鬆更新（和合並）它們之間的更改。
為了使元件更容易被發現，Bit為元件提供了視覺化渲染，測試結果（Bit執行元件單元測試）和從原始碼本身解析的文件。
使用Bit，您可以更快地開發多個應用程式，在團隊協作時將您的元件用作新功能和專案的構建塊。
譯者注：
我在看完這篇文章之後也去了解了下 Bit（因為我本來覺得 npm 包已經夠用了:joy:）。 Bit 的最大優勢我覺得由以下幾點（有什麼錯誤歡迎大家指正）：
- 使用 npm 包來共享元件的方案需要您新開一個倉庫來寫元件併發布 npm 包，而 Bit 可以讓您不新開一個倉庫就可以從任何現有儲存庫中無縫隔離元件（檔案集）並共享它們，在其他專案中您可以使用Bit來匯入您所需的元件並進行開發和同步。
- Bit 的官網提供了可以做互動式預覽的playground，您可以線上實時修改程式碼看到元件的變化，進而判斷這個元件是不是符合您的使用預期。
然而，目前 Bit 在 GitHub 上的star數量才3k+，大家可以作為一個輔助工具稍作了解
2. StoryBook / Styleguidist
Storybook 和 Styleguidist 是 React 中快速 UI 開發的環境。兩者都是提高 React 應用程式開發效率的絕佳工具。兩者之間存在一些重要的差異，您可以把兩者組合在一起以完成元件開發系統。
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 。