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

清秋發表於2019-03-02

本文將會介紹 5 款工具,可加速 React UI 元件和應用程式的開發工作。

React 非常適合快速開發具有出色的互動式 UI 的應用程式。React 元件是建立用於開發不同應用的隔離的、可複用的模組的很棒的方法。。

雖然一些最佳實踐有助於開發更好的應用程式,但正確的工具可以使開發過程更快。以下是 5(+)個實用的工具,可以幫助我們加速元件和應用程式的開發。

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

1. Bit

Bit 是一個開源平臺,用於使用元件構建應用程式。

使用 Bit,你可以組織來自不同應用程式和專案的元件(無需任何重構),並使其可以在構建新功能和應用程式時被發現、使用、開發和協作。

Bit 上共享的元件可自動地通過 NPM/Yarn 安裝,或與 Bit 本身一起使用。後者使你能夠同時開發來自不同專案的元件,並輕鬆更新(併合並)它們之間的更改。

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

為了使元件更容易被發現,Bit 為元件提供了視覺化渲染,測試結果(Bit 獨立執行元件的單元測試)和從原始碼本身解析的文件。

使用 Bit,你可以更快地開發多個應用程式和進行團隊協作,並將你的元件用作新功能和專案的構建塊。

2. StoryBook / Styleguidist

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

兩者之間存在一些重要的差異,這些差異也可以組合在一起以完成你的元件開發系統。

使用 Storybook,你可以在 JavaScript 檔案中編寫 stories。使用 Styleguidist,你可以在 Markdown 檔案中編寫示例。Storybook 一次顯示一個元件的變化,而 Styleguidist 可以顯示不同元件的多種變化。Storybook 非常適合顯示元件的狀態,而 Styleguidist 對於不同元件的文件和演示非常有用。

下面是一個簡短的綱要。

StoryBook

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

它允許你瀏覽元件庫,檢視每個元件的不同狀態,以及互動式開發和測試元件。

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

StoryBook 可幫助你獨立於應用程式開發元件,這也有助於提高元件的可重用性和可測試性。

你可以瀏覽庫中的元件,修改其屬性,並通過熱載入在網頁上獲得元件的即時效果。可以在這裡找到一些流行的例子

不同的外掛可以幫助你更快地開發,從而縮短程式碼調整到視覺輸出之間的週期。StoryBook 還支援 React NativeVue.js

Styleguidist

React Styleguidist 是一個元件開發環境,它具有熱過載的開發伺服器和線上樣式指南,列出元件的 propTypes 並顯示基於 .md 檔案的可編輯的用法示例。

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

它支援ES6,Flow 和 TypeScript,並且可以使用開箱即用的 Create React App。自動生成的使用文件可以讓 Styleguidist 充當團隊不同元件的文件門戶。

3. React devTools

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

這個官方的 React Chrome devTools 擴充套件程式可以讓你在 Chrome 開發者工具裡檢視 React 元件的層次結構。它也可以作為 FireFox 附加元件使用。

使用 React devTools,你可以在操作元件樹時檢視並編輯元件的 props 和 state。此功能可以讓你瞭解元件更改如何影響其他元件,以幫助你使用正確的元件結構和分離方式來設計 UI。

這個擴充套件程式的搜尋欄可讓你快速查詢和檢查所需的元件,從而節省寶貴的開發時間。

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

檢視適用於 Safari,IE 和 React Native 的獨立應用程式

4. Redux devTools

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

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)

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

這個廣泛使用且受歡迎的專案可能是快速建立新 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 非常相似,這個入門套件專注於快速開發的開發人員體驗。每次點選“儲存”時,更改都會熱過載,並且會執行自動化測試。

該專案甚至包括一個示例應用,因此你無需閱讀太多文件即可開始工作。

如果發現譯文存在錯誤或其他需要改進的地方,歡迎到 掘金翻譯計劃 對譯文進行修改並 PR,也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。


掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群,文章來源為 掘金 上的英文分享文章。內容覆蓋 AndroidiOS前端後端區塊鏈產品設計人工智慧等領域,想要檢視更多優質譯文請持續關注 掘金翻譯計劃官方微博知乎專欄

相關文章