【譯】提升React開發效率的5個工具

文章翻譯自:blog.bitsrc.io/5-tools-for…react

譯者注:git

  • 這篇文章中,除了 React devTools 和 Redux devTools,其他的工具我以前都沒接觸過,看過原文後以爲收穫很大,因此將它翻譯出來,但願能夠傳播給更多的人。github

    • React devTools 和 Redux devTools 這兩個應該大多數人都知道,而且常常在開發中使用,還未使用過的話那本文能夠做爲你的入坑指南😜
    • 若是你正在開發業務組件,那這篇文章能夠給你很多幫助:StoryBook 能夠幫助你提升很多效率;Bit 能夠做爲團隊中業務組件共享的另外一種方案。
    • 提及開發react應用的腳手架,你確定會想起create-react-app,看完文章的第五點,你會發現原來開發react應用的腳手架不僅有 create-react-app,還有幾個可能更適合你目前的開發需求。

React很是適合快速開發具備漂亮交互式UI的應用程序。React組件是建立隔離和可重用構建塊的好方法,能夠用於開發不一樣應用程序。npm

一些最佳實踐有助於開發更好的應用程序,但正確的工具可使開發過程更快。如下是5(+)個有用的工具,能夠加快組件和應用程序的開發效率。bash

1. Bit

Bit是一個開源平臺,用於使用組件構建應用程序。 使用Bit,您能夠組織來自不一樣應用程序和項目的組件(無需任何重構),並使其能夠在構建新功能和應用程序時被發現,使用,開發和協做。

這裏有一段介紹 Bit 的視頻服務器

Bit共享的組件可用NPM / Yarn自動安裝,或與Bit自己一塊兒使用。 後者使您可以同時開發來自不一樣項目的組件,並輕鬆更新(和合並)它們之間的更改。網絡

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

使用Bit,您能夠更快地開發多個應用程序,在團隊協做時將您的組件用做新功能和項目的構建塊。app

譯者注:異步

我剛看完這一點的時候並無感覺到 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很是類似,這個入門套件專一於快速開發的開發人員體驗。 每次點擊「保存」時,都會對熱更改進行熱重裝並運行自動化測試。

該項目甚至包括一個示例應用程序,所以您能夠直接開始工做,而無需過多地閱讀文檔。

更多相關內容

如何寫出更好的 React 代碼

2018年你應該知道的11個 React UI 組件庫

構建UI組件設計系統

如何在項目和應用程序之間共享和同步React UI組件

相關文章
相關標籤/搜索