您好,登錄后才能下訂單哦!
本文由葡萄城技術(shù)團(tuán)隊(duì)翻譯并首發(fā)
轉(zhuǎn)載請注明出處:葡萄城官網(wǎng),葡萄城為開發(fā)者提供專業(yè)的開發(fā)工具、解決方案和服務(wù),賦能開發(fā)者。
?
JavaScript每天都在出現(xiàn)大量的框架和工具,而React是除了上次我們提到的Vue和Ember之外另一款比較流行的框架。但因?yàn)樾碌墓ぞ呙刻於荚诓粩嗟某霈F(xiàn),開發(fā)者在嘗試時(shí)總會有些不知所措。
因此,當(dāng)為你的新React項(xiàng)目選擇合適的IDE,合適的可視化工具甚至是合適的樣式時(shí),你都會有很多選擇,你該怎么選擇合適的?這是一件令人犯愁的事兒。
在本文中,我將介紹11個(gè)關(guān)于React的開發(fā)工具,以幫助你選擇以及帶你了解如何用它們來使你更充分的使用框架。
我們將從React開發(fā)人員最受歡迎的工具之一的Chrome React Dev Tools開始說起,它是一個(gè)Chrome 擴(kuò)展程序,最近它發(fā)布了它的v4版。
?
?
安裝完成后,打開Chrome的開發(fā)人員工具你就能看到多出了Components和Profiler選項(xiàng)卡,“Components”選項(xiàng)能幫助你查看屏幕上組件列表以及從其他組件派生出的子組件,你能夠選擇檢查甚至編輯組件的狀態(tài)和屬性。使用“Profiler”選項(xiàng)卡,你也可以評估應(yīng)用程序的性能。
這兩個(gè)選項(xiàng)都可以在Chrome DevTools選項(xiàng)卡上找到,為了能更好的體驗(yàn)該插件的功能和特性,你可以使用這個(gè)在線站點(diǎn)去體驗(yàn)。
除了上面的擴(kuò)展外,我們需要提到另一個(gè)Chrome 擴(kuò)展程序React Sight,它可以幫助你在檢查React應(yīng)用程序時(shí)發(fā)揮作用。
在安裝DevTools后,在你已經(jīng)在React Dev Tools和React Sight的擴(kuò)展設(shè)置中啟用了“允許訪問文件URL”選項(xiàng),你就可以在DevTools種找到一個(gè)新的名為“React Sight”的標(biāo)簽,當(dāng)你運(yùn)行本地程序時(shí),你將可以使用React Sight以可視化樹狀的形式查看和創(chuàng)建不同的組件,這將讓你能夠方便的理解它們的連接方式,在你把鼠標(biāo)懸停在元素上時(shí),就可以看到它們當(dāng)前的狀態(tài)和屬性。
到目前為止,Visual Studio可能是JavaScript開發(fā)人員最喜愛的IDE之一。這里說的是之一而不是唯一,因?yàn)橛泻芏嗖诲e(cuò)的其他IDE也非常棒,例如Sublime,IntelliJ和Vim。
但在這里我們就不再展開了,這所以這里提到了VS,是因?yàn)閂S背后有著強(qiáng)大的社區(qū),所以讓我們看看React Extension Pack。
本質(zhì)上,它是一組為完成與React相關(guān)任務(wù)的擴(kuò)展包,在一般情況下,VS在解析和在做一般JS需求時(shí)做的很出色,但這個(gè)小工具套包將它帶入了一個(gè)新的高度。在這個(gè)包里,你將找到:
ReactJS代碼片段:它提供了40個(gè)React代碼片段,它可以滿足你所有通用需求以及34個(gè)propTypes特定的代碼片段。它能避免你浪費(fèi)大量時(shí)間重復(fù)勞作,從而提高日常的工作效率。
ES Lint:添加了對命令行工具的支持。它集成到你的IDE中,并幫助你改進(jìn)語法,設(shè)置自己的編碼樣式,甚至在某些情況下能為你自動(dòng)修復(fù)錯(cuò)誤。
npm:當(dāng)你需要安裝新的插件、重新啟動(dòng)服務(wù)器或是運(yùn)行某些npm特定命令時(shí),你都必須從IDE跳到終端,這可能會令你有一些累,所以這個(gè)擴(kuò)展增加了直接從IDE直接運(yùn)行npm命令的功能。
JS ES6片段:這個(gè)插件將包含40多個(gè)代碼片段,這將是你提高開發(fā)效率的絕對必要條件。
搜索node_modules:使用這個(gè)擴(kuò)展,你可以輕松找到模塊并在編輯器中將其打開。
npm IntelliSense:使用此模塊,你可以輕松列出所有已安裝的模塊,快速搜索它們,并插入正確的代碼片段以將其導(dǎo)入代碼中。
Path intelliSense:最后,與上一個(gè)擴(kuò)展名內(nèi)聯(lián),在當(dāng)你不是處理大型項(xiàng)目的唯一一人時(shí),記住所有路徑和文件名變得非常困難和麻煩。此擴(kuò)展名將幫助您自動(dòng)完成本地導(dǎo)入的路徑。
一共是7個(gè)擴(kuò)展,它們分別為項(xiàng)目提供了一些價(jià)值,安裝這個(gè)擴(kuò)展包,你可以從VS的命令面板使用以下命令(使用CTRL + P打開它)中輕松進(jìn)行安裝:
1 | ext? install ?jawandarajbir.react-vscode-extension-pack |
?
React是為了幫助你以非常直觀的方式編寫UI而設(shè)計(jì)的。但必須通過寫代碼才能創(chuàng)建可視的組件并不是真正自然的事情,這就是為什么我們通常會從代碼跳到瀏覽器,然后再回到代碼。
Storybook是一個(gè)開源工具,它可以用來開發(fā)自己的UI組件。它不僅僅只是一個(gè)代碼庫,他們的在線UI編輯器允許你開發(fā)、檢查并最終以交互的方式展示你的作品(這在開發(fā)可視化組件時(shí)是至關(guān)重要的)。
?
?
為了將Storybook安裝到你現(xiàn)有的React項(xiàng)目中,你所要做的就是:
1 | $ npx -p @storybook /cli ?sb init |
該命令將檢查你項(xiàng)目的結(jié)構(gòu),并嘗試了解你正在使用的視圖層(因?yàn)镾torybook支持React以外的其他視圖層,例如Vue,Angular等)。
命令完成后,您可以通過運(yùn)行以下命令運(yùn)行Storybook:
1 | $ npm run storybook |
這是另一個(gè)非常有趣的交互式工具,可讓您創(chuàng)建和展示您的UI組件。
?
?
請仔細(xì)查看上圖。在右側(cè),你可以看到實(shí)際的代碼,它在左側(cè)生成UI。你可以通過這種方式展示UI,甚至可以通過直接在顯示的界面上更改代碼來對其進(jìn)行測試和編輯UI。
為了將其包含到你的React項(xiàng)目中,你所需要做的就是(假設(shè)您已經(jīng)安裝了webpack,并且您使用Create React App創(chuàng)建了項(xiàng)目):
1 | $ npm? install ?--save-dev react-styleguidist |
然后運(yùn)行以下命令啟動(dòng)你的樣式設(shè)置服務(wù)器:
1 | $ npx styleguidist server |
如果你想了解有關(guān)在項(xiàng)目上使用Styleguideist的更多信息,請查閱文檔及演示。
標(biāo)準(zhǔn)的項(xiàng)目結(jié)構(gòu)是使用眾多React工具的基礎(chǔ),這就是Facebook的Create React App發(fā)揮作用的地方。事實(shí)上,這個(gè)工具使用方式非常簡單,簡單到你使用一條命令就能創(chuàng)建一個(gè)全新的React項(xiàng)目,而不必去思考什么項(xiàng)目結(jié)構(gòu)才是最好的或是哪些模塊要添加到項(xiàng)目才是正確的。這個(gè)工具將為您完成所有的工作。
如果你已經(jīng)安裝了npx,則無需安裝任何內(nèi)容,只需以下行即可:
1 | $ npx create-react-app my-app |
或者,如果你不喜歡npx,你還可以使用npm或yarn:
1 | $ npm init react-app my-app |
或者
1 | $ yarn create react-app my-app |
但無論如何,都需要在系統(tǒng)上安裝Node.js(8.16.0或10.16.0或更高版本)。
使用這些命令之一,你將獲得一個(gè)文件夾結(jié)構(gòu),如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | my-app ├── README.md ├── node_modules ├── package.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── App.css ├── App.js ├── App. test .js ├── index.css ├── index.js ├── logo.svg └── serviceWorker.js |
有了如上的結(jié)構(gòu),你就可以如果如下命令啟動(dòng)服務(wù)器開始開發(fā)工作了:
1 2 | $? cd ?my-app $ npm start? #根據(jù)喜好使用yarn start 也可以 |
運(yùn)行完成后,你可以通過http://localhost:3000訪問到這個(gè)全新創(chuàng)建的應(yīng)用。
你聽過Bootstrap嗎?這是一個(gè)較為流行的CSS框架。它提供了一組CSS類和JavaScript函數(shù),可讓您輕松制作精美且響應(yīng)式的UI。
現(xiàn)在React Bootstrap的作者重寫了JS部分的代碼,使其能與React兼容。因此,你現(xiàn)在就可以像使用React組件一樣使用它的組件了:
?
?
為了將其添加到您的項(xiàng)目中,您可以使用?npm
1 | $ npm? install ?react-bootstrap bootstrap |
準(zhǔn)備就緒后,您可以將所需的樣式表添加到項(xiàng)目App.js或src/index.js文件中。
1 2 3 | {/* The following line can be included? in ?your src /index .js or App.js? file */} ? import ?'bootstrap/dist/css/bootstrap.min.css' ; |
如果你對代碼不太感興趣,而對視覺設(shè)計(jì)更感興趣,那么也許react-proto就是適合你的工具。有了它,您可以使用拖放來創(chuàng)建UI原型,而不必為其編寫代碼。
你可以從設(shè)計(jì)者為你提供的設(shè)計(jì)稿開始,使用此工具標(biāo)記所有可能的組件,為它們提供名稱、屬性和層次結(jié)構(gòu)的設(shè)置。完成后,你能夠?qū)⑺鼈儗?dǎo)出到實(shí)際的自動(dòng)生成的代碼中,而后你就可以對其進(jìn)行自定義。
?
?
如果你即將開始一個(gè)新項(xiàng)目,這個(gè)工具將會為你為項(xiàng)目初始階段節(jié)省很多時(shí)間。
Why did you render是一個(gè)用來檢測React組件是否需要重新渲染的工具,若被判定不需要重新渲染,那么則會console出一段標(biāo)記組件的屬性、狀態(tài)和建議,供開發(fā)者進(jìn)行調(diào)整。
您可以使用以下簡單的方法安裝它:
1 | $ npm? install ?@ welldone-software / why-did-you-render --save |
然后,您可以使用以下幾行將其包含到您的項(xiàng)目中:
1 2 3 4 5 6 | import ?React from? 'react' ; ? if ?(process. env .NODE_ENV !==? 'production' ) { ?? const whyDidYouRender = require( '@welldone-software/why-did-you-render' ); ?? whyDidYouRender(React); } |
之后,剩下要做的就是標(biāo)記要通知您的組件,如下所示:
1 2 3 4 5 6 7 8 | class BigListPureComponent extends React.PureComponent { ?? static whyDidYouRender =? true ?? render(){ ???? return ?( ?????? //some ?heavy render you want to ensure doesn't happen? if ?its not neceserry ???? ) ?? } } |
一切準(zhǔn)備就緒后,您可以期待以下輸出:
?
?
最后,對于最后一個(gè)工具,我想介紹一種使用React來創(chuàng)建桌面應(yīng)用程序的方法,因?yàn)楫吘梗馝lectron這樣的項(xiàng)目,用JavaScript做這件事已經(jīng)有一段時(shí)間了。
現(xiàn)在,有了Proton Native,你也可以用React來實(shí)現(xiàn)了。你可以通過定義React組件來定義GUI元素,并且該工具與所有Node.js模塊、Redux兼容,并且由于Proton的特性,它完全是跨平臺的!
為了將它安裝到你的系統(tǒng)中,你所需要做的就是通過NPM并執(zhí)行以下命令:
1 | $ npm? install ?-g create-proton-app |
但是請注意,如果你使用的是Linux,則需要先安裝以下依賴項(xiàng):
1 | libgtk-3-dev build-essential python2 pkg-config |
最后,創(chuàng)建應(yīng)用程序,只需執(zhí)行以下操作:
1 2 3 4 5 | $ create-proton-app my-app # 進(jìn)入項(xiàng)目目錄 $? cd ?my-app # 運(yùn)行app $ npm run start |
他們已經(jīng)有一個(gè)可用的示例供你查看,如果你想了解如何將其用于自己的項(xiàng)目,可以隨時(shí)查看它的完整文檔。
這些是與React相關(guān)11個(gè)工具,并不是所有的工具都是Web的,也不是所有的工具都是可視化的,也不是所有的工具都是用來幫助你編寫代碼的。但這里的重點(diǎn)是,它們中的許多可以一起使用,并相互補(bǔ)充。
?
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。