[譯] 5 款工具助力 React 快速開發

• 原文地址：5 Tools for Faster Development in React
• 原文做者：Jonathan Saring
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：Ivocin
• 校對者：Haoze Xu, Junkai Liu

本文將會介紹 5 款工具，可加速 React UI 組件和應用程序的開發工做。

React 很是適合快速開發具備出色的交互式 UI 的應用程序。React 組件是建立用於開發不一樣應用的隔離的、可複用的模塊的很棒的方法。。

雖然一些最佳實踐有助於開發更好的應用程序，但正確的工具可使開發過程更快。如下是 5（+）個實用的工具，能夠幫助咱們加速組件和應用程序的開發。

歡迎你發表評論並提出建議。

1. Bit

• Bit — 分享和構建組件代碼：Bit 幫助你在不一樣的項目和應用程序中共享、發現和使用代碼組件，以構建新功能和...

Bit 是一個開源平臺，用於使用組件構建應用程序。

使用 Bit，你能夠組織來自不一樣應用程序和項目的組件（無需任何重構），並使其能夠在構建新功能和應用程序時被發現、使用、開發和協做。

• YouTube 視頻連接：youtu.be/P4Mk_hqR8dU

Bit 上共享的組件可自動地經過 NPM/Yarn 安裝，或與 Bit 自己一塊兒使用。後者使你可以同時開發來自不一樣項目的組件，並輕鬆更新（併合並）它們之間的更改。

爲了使組件更容易被發現，Bit 爲組件提供了可視化渲染，測試結果（Bit 獨立運行組件的單元測試）和從源代碼自己解析的文檔。

使用 Bit，你能夠更快地開發多個應用程序和進行團隊協做，並將你的組件用做新功能和項目的構建塊。

2. StoryBook / Styleguidist

Storybook 和 Styleguidist 是在 React 中快速開發 UI 的環境。二者都是加速 React 應用程序開發的絕佳工具。

二者之間存在一些重要的差別，這些差別也能夠組合在一塊兒以完成你的組件開發系統。

使用 Storybook，你能夠在 JavaScript 文件中編寫 stories。使用 Styleguidist，你能夠在 Markdown 文件中編寫示例。Storybook 一次顯示一個組件的變化，而 Styleguidist 能夠顯示不一樣組件的多種變化。Storybook 很是適合顯示組件的狀態，而 Styleguidist 對於不一樣組件的文檔和演示很是有用。

下面是一個簡短的綱要。

StoryBook

• storybooks/storybook: storybook — Interactive UI component dev & test: React, React Native, Vue, Angular.

Storybook 是 UI 組件的快速開發環境。

它容許你瀏覽組件庫，查看每一個組件的不一樣狀態，以及交互式開發和測試組件。

StoryBook 可幫助你獨立於應用程序開發組件，這也有助於提升組件的可重用性和可測試性。

你能夠瀏覽庫中的組件，修改其屬性，並經過熱加載在網頁上得到組件的即時效果。能夠在這裏找到一些流行的例子。

不一樣的插件能夠幫助你更快地開發，從而縮短代碼調整到視覺輸出之間的週期。StoryBook 還支持 React Native 和 Vue.js。

Styleguidist

• React Styleguidist：具備在線樣式指南的獨立的 React 組件開發環境：具備在線樣式指南的獨立的 React 組件開發環境。

React Styleguidist 是一個組件開發環境，它具備熱重載的開發服務器和在線樣式指南，列出組件的 propTypes 並顯示基於 .md 文件的可編輯的用法示例。

它支持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。此功能可讓你瞭解組件更改如何影響其餘組件，以幫助你使用正確的組件結構和分離方式來設計 UI。

這個擴展程序的搜索欄可以讓你快速查找和檢查所需的組件，從而節省寶貴的開發時間。

查看適用於 Safari，IE 和 React Native 的獨立應用程序。

4. Redux devTools

此 Chrome 擴展程序（和 FireFox 附加組件）是一個開發時間程序包，是 Redux 開發工做流程的利器。它容許你檢查每一個 state 和 action payload，從新計算「分階段」的 actions。

你能夠將 Redux DevTools 擴展程序 與任何處理狀態的體系結構集成。每一個 React 組件的本地狀態能夠有多個存儲或不一樣的實例。你甚至能夠經過「時間旅行」來取消 actions（能夠觀看 Dan Abramov 的 視頻）。日誌記錄 UI 自己甚至能夠自定義爲 React 組件。

5. Boilerplates & Kick-Starters

雖然這些並不徹底是開發者工具，但它們有助於快速建立 React 應用程序，同時節省構建和其餘配置的時間。雖然 React 有許多入門套件，但這裏有一些最好的。

當與預製組件（在 Bit 或其餘來源上）結合使用時，你能夠快速建立應用程序結構並將組件組合到其中。

Create React App (50k stars)

這個普遍使用且受歡迎的項目多是快速建立新 React 應用程序並從頭開始運行的最有效方法。

此軟件包封裝了新 React 應用程序所需的複雜配置（Babel，Webpack等），所以你能夠節省新建應用程序所需的這段時間。

要建立新應用程序，只需運行一個命令便可。

npx create-react-app my-app
複製代碼

此命令在當前文件夾中建立名爲 my-app 的目錄。 在目錄中，它將生成初始項目結構並安裝傳遞依賴項，而後你就能夠簡單地開始編碼了。

React Boilerplate (18k stars)

Max Stoiber 的這個 React 樣板文件模板爲你的 React 應用程序提供了一個啓動模板，該模板專一於離線開發，並在考慮到了可擴展性和性能。

它的快速腳手架有助於直接從 CLI 建立組件、容器、路由、選擇器和 sagas —— 以及它們的測試，而 CSS 和 JS 的更改能夠當即反映出來。

與 create-react-app 不一樣，這個樣板文件不是爲初學者設計的，而是爲經驗豐富的開發人員提供的。使用它能夠管理性能、異步、樣式等等，從而構建產品級的應用程序。

React Slingshot (8.5k stars)

Cory House 的這個極好的項目是 React + Redux 入門套件/樣板，帶有Babel、熱重載、測試和 linting 等等。

與 React Boilerplate 很是類似，這個入門套件專一於快速開發的開發人員體驗。每次點擊「保存」時，更改都會熱重載，而且會運行自動化測試。

該項目甚至包括一個示例應用，所以你無需閱讀太多文檔便可開始工做。

• 另外也能夠了解一下 simple-react-app，這篇文章對此工具進行了解釋。

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。