[譯] 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、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。