React開(kāi)發(fā)工具有哪些

 )  Child2.whyDidYouRender = true  const App = () => {   const [state, setState] = React.useState({})    return (        ) }  export default App

這樣做之后，你的控制臺(tái)才會(huì)發(fā)出令人難以置信的令人討厭的警告：

不要誤解，把它當(dāng)作一件好事。充分利用那些煩人的消息，這樣你就可以修復(fù)那些浪費(fèi)的重新渲染，那些煩人的消息最終會(huì)離你而去!

4. Create React App

大家都知道，Create React App 是開(kāi)始開(kāi)發(fā)React項(xiàng)目的最快方法(開(kāi)箱即用，具有現(xiàn)代功能)。

有什么比 npx create-react-app容易?

我們中有些人可能不知道的是如何使用CRA創(chuàng)建TypeScript項(xiàng)目，你要做的就是在末尾添加 --typescript：

npx create-react-app  --typescript

這樣可以省去手動(dòng)將TypeScript添加到CRA項(xiàng)目中的麻煩。

5. React Lifecycle Visualizer

React Lifecycle Visualizer 是一個(gè)npm軟件包，用于跟蹤和可視化任意React組件的生命周期方法。

與 Why Did You Render 一樣，你可以啟用你選擇的任何組件以帶出生命周期可視化器：

import React from 'react' import {   Log,   VisualizerProvider,   traceLifecycle, } from 'react-lifecycle-visualizer'  class TracedComponent extends React.Component {   state = {     loaded: false,   }    componentDidMount() {     this.props.onMount()   }    render() {     return 
Traced Component
   } }  const EnhancedTracedComponent = traceLifecycle(TracedComponent)  const App = () => (                 )

這將顯示可視化器，如下所示：

https://github.com/Oblosys/react-lifecycle-visualizer

但是，這樣做的缺點(diǎn)是，它目前僅適用于類(lèi)組件，因此尚不支持Hooks。

6. Guppy

Guppy是React的好朋友，免費(fèi)的應(yīng)用程序管理器和任務(wù)運(yùn)行器，它在桌面上運(yùn)行。

他們似乎會(huì)優(yōu)先考慮那些在React中進(jìn)行開(kāi)發(fā)的新手。不過(guò)，這可能對(duì)高級(jí)開(kāi)發(fā)人員也有幫助。

它為React開(kāi)發(fā)人員經(jīng)常面對(duì)的許多典型任務(wù)提供了友好的圖形用戶界面，例如創(chuàng)建新項(xiàng)目，執(zhí)行任務(wù)和管理依賴(lài)項(xiàng)。

Windows支持已于2018年8月添加，因此你可以放心，它是跨平臺(tái)的。

這是Guppy的樣子：

https://github.com/joshwcomeau/guppy

7. react-testing-library

我一直都很喜歡react-testing-library，因?yàn)樵诰帉?xiě)單元測(cè)試時(shí)感覺(jué)不錯(cuò)。這個(gè)包提供了React  DOM測(cè)試實(shí)用程序，可以鼓勵(lì)良好的測(cè)試實(shí)踐。

該解決方案旨在解決測(cè)試你的實(shí)現(xiàn)細(xì)節(jié)的問(wèn)題，而不是像用戶看到的那樣測(cè)試React組件的輸入/輸出。

測(cè)試實(shí)現(xiàn)細(xì)節(jié)并不是確保應(yīng)用程序按預(yù)期工作的有效方法。

當(dāng)然，你會(huì)對(duì)你的組件所需要的數(shù)據(jù)的獲取方式、使用哪種排序方式等等，都會(huì)更有信心。但是，如果必須更改實(shí)現(xiàn)的方式以指向另一個(gè)數(shù)據(jù)庫(kù)，則單元測(cè)試將失敗，因?yàn)樗鼈兪邱詈线壿嫷膶?shí)現(xiàn)細(xì)節(jié)。

這是react-test -library解決的一個(gè)問(wèn)題，因?yàn)樵诶硐氲那闆r下，你只希望你的用戶界面能夠正常工作，并且最終能夠正確地呈現(xiàn)出來(lái)。

只要這些組件仍能提供預(yù)期的輸出，如何將數(shù)據(jù)獲取到這些組件并不重要。

以下是使用此庫(kù)如何放置測(cè)試的示例代碼：

// 提升輔助函數(shù)(但不是vars)以在測(cè)試用例之間重用 const renderComponent = ({ count }) =>   render(                 ,   )  it('renders initial count', async () => {   // 在每次測(cè)試中渲染新的實(shí)例，以防止泄漏狀態(tài)。   const { getByText } = renderComponent({ count: 5 })    await waitForElement(() => getByText(/clicked 5 times/i)) })  it('increments count', async () => {   // 在每次測(cè)試中渲染新的實(shí)例，以防止泄漏狀態(tài)。   const { getByText } = renderComponent({ count: 5 })    fireEvent.click(getByText('+1'))   await waitForElement(() => getByText(/clicked 6 times/i)) })

8. React Developer Tools

React Developer Tools是一個(gè)擴(kuò)展，可以檢查Chrome和Firefox Developer  Tools中React的組件層次結(jié)構(gòu)。

這是該列表中最廣為人知的擴(kuò)展，并且仍然是React開(kāi)發(fā)人員可以用來(lái)調(diào)試其應(yīng)用程序的最有用的工具之一。

9. Bit

Bit是使用組件庫(kù)(例如Material-UI或Semantic UI React)的一個(gè)很好的選擇。

利用Bit，你可以探索數(shù)千個(gè)開(kāi)源組件，并可以使用它們來(lái)構(gòu)建項(xiàng)目。

https://bit.dev/

有許多不同的React組件供任何人使用，包括標(biāo)簽、按鈕、圖表、表格、導(dǎo)航欄、下拉菜單、加載旋轉(zhuǎn)器、日期選擇器、面包屑、圖標(biāo)、布局等。

這些都是由其他React開(kāi)發(fā)人員上傳的，就像你和我一樣。

但是，還有一些有用的實(shí)用程序，例如格式化日期。

10. Storybook

如果你還不了解Storybook，我強(qiáng)烈建議你開(kāi)始使用它，如果你想更輕松的體驗(yàn)構(gòu)建UI組件，那么你可以開(kāi)始使用它。

該工具啟動(dòng)了具有即時(shí)支持的熱重載功能的實(shí)時(shí)開(kāi)發(fā)服務(wù)器，你可以在其中獨(dú)立地實(shí)時(shí)開(kāi)發(fā)React組件。

這其中的另一個(gè)好處是，你可以使用目前已有的開(kāi)源插件，將你的開(kāi)發(fā)體驗(yàn)提升到一個(gè)全新的高度。

例如，使用Storybook README包，你可以在開(kāi)發(fā)React組件的同時(shí)創(chuàng)建README文檔，以便在同一頁(yè)面上直接用于生產(chǎn)。

這足以用作常規(guī)文檔頁(yè)面：

11. React Sight

React Sight通過(guò)向你展示整個(gè)應(yīng)用程序的實(shí)時(shí)組件層次結(jié)構(gòu)樹(shù)，使你可視化React應(yīng)用程序。

它還支持react-router，Redux和React Fiber。

使用此工具，你可以將鼠標(biāo)懸停在節(jié)點(diǎn)上，這些節(jié)點(diǎn)是指向樹(shù)中與它們直接相關(guān)的組件的鏈接。

如果你無(wú)法查看結(jié)果，則可能需要在地址欄中輸入chrome:extensions，找到“ React  Sight”框，然后單擊“允許訪問(wèn)文件URL”開(kāi)關(guān)。

12. React Cosmos

React Cosmos是用于創(chuàng)建可重復(fù)使用的React組件的開(kāi)發(fā)工具。

它會(huì)掃描項(xiàng)目中的組件，并使你能夠：

• 使用props，context和state的任意組合渲染組件。

• 模擬每個(gè)外部依賴(lài)項(xiàng)(例如API響應(yīng)，localStorage等)。

• 與正在運(yùn)行的實(shí)例進(jìn)行交互時(shí)，查看應(yīng)用程序狀態(tài)的實(shí)時(shí)變化。

13. CodeSandbox

這無(wú)疑是最好的工具之一，讓你的手比眨眼的速度更快(好吧，也許不是那么快)。

這個(gè)稱(chēng)為CodeSandbox的工具是一個(gè)在線編輯器，可以讓你創(chuàng)建從原型到部署的Web應(yīng)用程序——全部從網(wǎng)站上完成!

CodeSandbox最初僅在較早的階段支持React，但現(xiàn)在已擴(kuò)展到適用于Vue和Angular等庫(kù)的其他入門(mén)模板。

他們還支持通過(guò)使用常見(jiàn)的靜態(tài)站點(diǎn)生成器(例如Gatsby或Next.js)創(chuàng)建項(xiàng)目來(lái)啟動(dòng)下一個(gè)React Web項(xiàng)目。

關(guān)于CodeSandbox，有很多很棒的事情要談?wù)?。首先，它非?；钴S。

如果你需要探索一些別人正在建設(shè)的項(xiàng)目，為了方便你，點(diǎn)擊探索(explore)，可以很容易地獲得一堆代碼示例，幫助你翻新下一個(gè)項(xiàng)目。

開(kāi)始編輯項(xiàng)目后，你將開(kāi)始意識(shí)到要使用的實(shí)際上是功能強(qiáng)大的VS Code編輯器。

14. React Bits

React Bits 是一個(gè) React  模式、技術(shù)、技巧和竅門(mén)的集合，所有這些都是以類(lèi)似于在線文檔的形式寫(xiě)成的，在這里你可以快速訪問(wèn)不同的設(shè)計(jì)模式和技術(shù)、反模式、風(fēng)格設(shè)計(jì)、用戶體驗(yàn)變化，以及其他有用的  React 相關(guān)材料，所有這些都在同一個(gè)標(biāo)簽頁(yè)上。

他們有一個(gè)GitHub倉(cāng)庫(kù)，目前有9923星。

一些示例包括諸如prop代理，在不同場(chǎng)景下處理各種UX的組合之類(lèi)的概念，甚至還揭示了每個(gè)React開(kāi)發(fā)人員都應(yīng)注意的一些陷阱。

這就是他們頁(yè)面上的樣子。正如你在左側(cè)的側(cè)菜單中所看到的，有很多信息：

15. folderize

folderize是一個(gè)不到7天前發(fā)布的VS  Code擴(kuò)展。它使你可以將組件文件轉(zhuǎn)換為組件文件夾結(jié)構(gòu)，你的React組件仍然是一個(gè)組件，它現(xiàn)在只是轉(zhuǎn)換成了一個(gè)目錄。

例如，假設(shè)你正在創(chuàng)建一個(gè)React組件，該組件將文件作為顯示有用信息(如其元數(shù)據(jù))的props。

元數(shù)據(jù)組件的邏輯占用了很多行，所以你決定把這個(gè)拆成一個(gè)單獨(dú)的文件。但是，當(dāng)你決定這樣做時(shí)，現(xiàn)在你有了兩個(gè)相互關(guān)聯(lián)的文件。

因此，如果你的目錄如下所示：

你可能想要像 Apples一樣將 FileView.js 和 FileMetadata.js 抽象到目錄結(jié)構(gòu)中，尤其是在考慮添加更多與  FileScanner.js 之類(lèi)的文件相關(guān)的組件時(shí)。

這就是folderize為你所做的，以便它們可以具有類(lèi)似于以下的結(jié)構(gòu)：

16. React Starter Projects

這是一個(gè)很棒的React啟動(dòng)程序項(xiàng)目列表，你可以在一個(gè)頁(yè)面上全部查看。所以，如果你是那種覺(jué)得同時(shí)面對(duì)一大堆選項(xiàng)很有用的人，那么這個(gè)就是適合你的。

一旦你看到一個(gè)你喜歡的入門(mén)項(xiàng)目，你就可以簡(jiǎn)單地克隆這個(gè)資源庫(kù)，并為你即將到來(lái)的應(yīng)用做你自己的修改。

但是，并不是所有的都要通過(guò)克隆資源庫(kù)來(lái)使用，因?yàn)槠渲杏行┦且惭b的，這就成了你的項(xiàng)目的依賴(lài)。

這樣可以更輕松地獲取更新并保持項(xiàng)目整潔。

頁(yè)面樣子如下：

17. Highlight Updates

這可以說(shuō)是任何人在開(kāi)發(fā)工具箱中最重要的工具。Highlight Updates是React  DevTools擴(kuò)展的一個(gè)功能，它可以讓你看到你的頁(yè)面中哪些組件在不必要地重新渲染。

它可以幫助你在開(kāi)發(fā)頁(yè)面時(shí)發(fā)現(xiàn)瓶頸，并使其更容易，因?yàn)樗鼈儠?huì)將嚴(yán)重的重新呈現(xiàn)問(wèn)題著色為橙色或紅色。

除非你的目標(biāo)是構(gòu)建一個(gè)平庸的應(yīng)用程序，否則為什么不希望這個(gè)美麗的東西站在你的身邊?

18. React Diff Viewer

React Diff  Viewer是使用Diff和React制作的簡(jiǎn)單美觀的文本diff查看器。這支持諸如拆分視圖，內(nèi)聯(lián)視圖，單詞差異，行高亮顯示等功能。

如果你試圖將此功能嵌入到您的筆記(如Boostnote)中，并對(duì)其進(jìn)行定制，使其更適合你的應(yīng)用程序(主題顏色、文檔與故事書(shū)演示的組合，等等)，那么這將非常有用。

19. JS.coach

我最常用于查找與React相關(guān)的資料的站點(diǎn)是JS.coach。它快速，簡(jiǎn)單，不斷更新，并且始終為我提供所有項(xiàng)目所需的結(jié)果。

他們最近添加了React VR標(biāo)簽，這很棒!

20. Awesome React

GitHub Awesome React開(kāi)源庫(kù)列出了一系列與React相關(guān)的精彩內(nèi)容。

我可能會(huì)忘記其他網(wǎng)站，而僅從此鏈接學(xué)習(xí)React。你會(huì)發(fā)現(xiàn)大量有用的資源，這些資源肯定會(huì)幫助你構(gòu)建出色的React應(yīng)用!

21. Proton Native

Proton Native提供了一個(gè)React環(huán)境來(lái)構(gòu)建跨平臺(tái)的本地桌面應(yīng)用程序。

它是Electron的替代產(chǎn)品，并具有一些簡(jiǎn)潔的功能，包括：

• 與React Native的語(yǔ)法相同。

• 與現(xiàn)有的React庫(kù)一起使用，例如Redux。

• 跨平臺(tái)。

• 原生組件。Electron沒(méi)有。

• 兼容所有正常的Node.js包。

有興趣了解更多嗎?閱讀他們的文檔。

22. Devhints React.js Cheatsheet

一個(gè)很好的React備忘單，盡管它缺少React Hooks。

到此，相信大家對(duì)“React開(kāi)發(fā)工具有哪些”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！

當(dāng)前文章：React開(kāi)發(fā)工具有哪些
標(biāo)題網(wǎng)址：http://weahome.cn/article/jscehj.html