這篇文章將為大家詳細(xì)講解有關(guān)開發(fā)react用哪些工具，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

在西安等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站制作、成都做網(wǎng)站 網(wǎng)站設(shè)計(jì)制作定制網(wǎng)站開發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),成都全網(wǎng)營(yíng)銷推廣,成都外貿(mào)網(wǎng)站建設(shè)公司,西安網(wǎng)站建設(shè)費(fèi)用合理。

react可以用的開發(fā)工具有：1、Chrome React Dev Tools；2、React Sight；3、React Bootstrap；4、Create React App；5、React Styleguideist等等。

JavaScript每天都在出現(xiàn)大量的框架和工具，而React是除了上次我們提到的Vue和Ember之外另一款比較流行的框架。但因?yàn)樾碌墓ぞ呙刻於荚诓粩嗟某霈F(xiàn)，開發(fā)者在嘗試時(shí)總會(huì)有些不知所措。

因此，當(dāng)為你的新React項(xiàng)目選擇合適的IDE，合適的可視化工具甚至是合適的樣式時(shí)，你都會(huì)有很多選擇，你該怎么選擇合適的？這是一件令人犯愁的事兒。

在本文中，我將介紹11個(gè)關(guān)于React的開發(fā)工具，以幫助你選擇以及帶你了解如何用它們來(lái)使你更充分的使用框架。

1. React開發(fā)人員工具

我們將從React開發(fā)人員最受歡迎的工具之一的Chrome React Dev Tools開始說(shuō)起，它是一個(gè)Chrome 擴(kuò)展程序，最近它發(fā)布了它的v4版。

安裝完成后，打開Chrome的開發(fā)人員工具你就能看到多出了Components和Profiler選項(xiàng)卡，“Components”選項(xiàng)能幫助你查看屏幕上組件列表以及從其他組件派生出的子組件，你能夠選擇檢查甚至編輯組件的狀態(tài)和屬性。使用“Profiler”選項(xiàng)卡，你也可以評(píng)估應(yīng)用程序的性能。

這兩個(gè)選項(xiàng)都可以在Chrome DevTools選項(xiàng)卡上找到，為了能更好的體驗(yàn)該插件的功能和特性，你可以使用這個(gè)在線站點(diǎn)去體驗(yàn)。

2. React Sight

除了上面的擴(kuò)展外，我們需要提到另一個(gè)Chrome 擴(kuò)展程序React Sight，它可以幫助你在檢查React應(yīng)用程序時(shí)發(fā)揮作用。

在安裝DevTools后，在你已經(jīng)在React Dev Tools和React Sight的擴(kuò)展設(shè)置中啟用了“允許訪問(wèn)文件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)和屬性。

3. React Extension Pack (for VS Studio)

到目前為止，Visual Studio可能是JavaScript開發(fā)人員最喜愛的IDE之一。這里說(shuō)的是之一而不是唯一，因?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：添加了對(duì)命令行工具的支持。它集成到你的IDE中，并幫助你改進(jìn)語(yǔ)法，設(shè)置自己的編碼樣式，甚至在某些情況下能為你自動(dòng)修復(fù)錯(cuò)誤。

• npm：當(dāng)你需要安裝新的插件、重新啟動(dòng)服務(wù)器或是運(yùn)行某些npm特定命令時(shí)，你都必須從IDE跳到終端，這可能會(huì)令你有一些累，所以這個(gè)擴(kuò)展增加了直接從IDE直接運(yùn)行npm命令的功能。

• JS ES6片段：這個(gè)插件將包含40多個(gè)代碼片段，這將是你提高開發(fā)效率的絕對(duì)必要條件。

• 搜索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)行安裝：

ext install jawandarajbir.react-vscode-extension-pack

4. Storybook

React是為了幫助你以非常直觀的方式編寫UI而設(shè)計(jì)的。但必須通過(guò)寫代碼才能創(chuàng)建可視的組件并不是真正自然的事情，這就是為什么我們通常會(huì)從代碼跳到瀏覽器，然后再回到代碼。

Storybook是一個(gè)開源工具，它可以用來(lái)開發(fā)自己的UI組件。它不僅僅只是一個(gè)代碼庫(kù)，他們的在線UI編輯器允許你開發(fā)、檢查并最終以交互的方式展示你的作品(這在開發(fā)可視化組件時(shí)是至關(guān)重要的)。

為了將Storybook安裝到你現(xiàn)有的React項(xiàng)目中，你所要做的就是：

$ npx -p @storybook/cli sb init

該命令將檢查你項(xiàng)目的結(jié)構(gòu)，并嘗試了解你正在使用的視圖層（因?yàn)镾torybook支持React以外的其他視圖層，例如Vue，Angular等）。

命令完成后，您可以通過(guò)運(yùn)行以下命令運(yùn)行Storybook：

$ npm run storybook

5. React Styleguideist

這是另一個(gè)非常有趣的交互式工具，可讓您創(chuàng)建和展示您的UI組件。

請(qǐng)仔細(xì)查看上圖。在右側(cè)，你可以看到實(shí)際的代碼，它在左側(cè)生成UI。你可以通過(guò)這種方式展示UI，甚至可以通過(guò)直接在顯示的界面上更改代碼來(lái)對(duì)其進(jìn)行測(cè)試和編輯UI。

為了將其包含到你的React項(xiàng)目中，你所需要做的就是(假設(shè)您已經(jīng)安裝了webpack，并且您使用Create React App創(chuàng)建了項(xiàng)目)：

$ npm install --save-dev react-styleguidist

然后運(yùn)行以下命令啟動(dòng)你的樣式設(shè)置服務(wù)器：

$ npx styleguidist server

如果你想了解有關(guān)在項(xiàng)目上使用Styleguideist的更多信息，請(qǐng)查閱文檔及演示。

6. Create React App

標(biāo)準(zhǔn)的項(xiàng)目結(jié)構(gòu)是使用眾多React工具的基礎(chǔ)，這就是Facebook的Create React App發(fā)揮作用的地方。事實(shí)上，這個(gè)工具使用方式非常簡(jiǎn)單，簡(jiǎn)單到你使用一條命令就能創(chuàng)建一個(gè)全新的React項(xiàng)目，而不必去思考什么項(xiàng)目結(jié)構(gòu)才是最好的或是哪些模塊要添加到項(xiàng)目才是正確的。這個(gè)工具將為您完成所有的工作。

如果你已經(jīng)安裝了npx，則無(wú)需安裝任何內(nèi)容，只需以下行即可：

$ npx create-react-app my-app

或者，如果你不喜歡npx，你還可以使用npm或yarn：

$ npm init react-app my-app

或者

$ yarn create react-app my-app

但無(wú)論如何，都需要在系統(tǒng)上安裝Node.js（8.16.0或10.16.0或更高版本）。

使用這些命令之一，你將獲得一個(gè)文件夾結(jié)構(gòu)，如下所示：

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ā)工作了：

$ cd my-app
$ npm start #根據(jù)喜好使用yarn start 也可以

運(yùn)行完成后，你可以通過(guò)http://localhost:3000訪問(wèn)到這個(gè)全新創(chuàng)建的應(yīng)用。

7. React Bootstrap

你聽過(guò)Bootstrap嗎？這是一個(gè)較為流行的CSS框架。它提供了一組CSS類和JavaScript函數(shù)，可讓您輕松制作精美且響應(yīng)式的UI。

現(xiàn)在React Bootstrap的作者重寫了JS部分的代碼，使其能與React兼容。因此，你現(xiàn)在就可以像使用React組件一樣使用它的組件了：

為了將其添加到您的項(xiàng)目中，您可以使用 npm

$ npm install react-bootstrap bootstrap

準(zhǔn)備就緒后，您可以將所需的樣式表添加到項(xiàng)目App.js或src/index.js文件中。

{/* The following line can be included in your src/index.js or App.js file*/}

import 'bootstrap/dist/css/bootstrap.min.css';

8. React-Proto

如果你對(duì)代碼不太感興趣，而對(duì)視覺設(shè)計(jì)更感興趣，那么也許react-proto就是適合你的工具。有了它，您可以使用拖放來(lái)創(chuàng)建UI原型，而不必為其編寫代碼。

你可以從設(shè)計(jì)者為你提供的設(shè)計(jì)稿開始，使用此工具標(biāo)記所有可能的組件，為它們提供名稱、屬性和層次結(jié)構(gòu)的設(shè)置。完成后，你能夠?qū)⑺鼈儗?dǎo)出到實(shí)際的自動(dòng)生成的代碼中，而后你就可以對(duì)其進(jìn)行自定義。

如果你即將開始一個(gè)新項(xiàng)目，這個(gè)工具將會(huì)為你為項(xiàng)目初始階段節(jié)省很多時(shí)間。

9. Why did you render

Why did you render是一個(gè)用來(lái)檢測(cè)React組件是否需要重新渲染的工具，若被判定不需要重新渲染，那么則會(huì)console出一段標(biāo)記組件的屬性、狀態(tài)和建議，供開發(fā)者進(jìn)行調(diào)整。

您可以使用以下簡(jiǎn)單的方法安裝它：

$ npm install @ welldone-software / why-did-you-render --save

然后，您可以使用以下幾行將其包含到您的項(xiàng)目中：

import React from 'react';

if (process.env.NODE_ENV !== 'production') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React);
}

之后，剩下要做的就是標(biāo)記要通知您的組件，如下所示：

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)備就緒后，您可以期待以下輸出：

10. Proton Native

最后，對(duì)于最后一個(gè)工具，我想介紹一種使用React來(lái)創(chuàng)建桌面應(yīng)用程序的方法，因?yàn)楫吘梗馝lectron這樣的項(xiàng)目，用JavaScript做這件事已經(jīng)有一段時(shí)間了。

現(xiàn)在，有了Proton Native，你也可以用React來(lái)實(shí)現(xiàn)了。你可以通過(guò)定義React組件來(lái)定義GUI元素，并且該工具與所有Node.js模塊、Redux兼容，并且由于Proton的特性，它完全是跨平臺(tái)的！

為了將它安裝到你的系統(tǒng)中，你所需要做的就是通過(guò)NPM并執(zhí)行以下命令：

$ npm install -g create-proton-app

但是請(qǐng)注意，如果你使用的是Linux，則需要先安裝以下依賴項(xiàng)：

libgtk-3-dev build-essential python2 pkg-config

最后，創(chuàng)建應(yīng)用程序，只需執(zhí)行以下操作：

$ create-proton-app my-app 
# 進(jìn)入項(xiàng)目目錄
$ cd my-app 
# 運(yùn)行app 
$ npm run start

他們已經(jīng)有一個(gè)可用的示例供你查看，如果你想了解如何將其用于自己的項(xiàng)目，可以隨時(shí)查看它的完整文檔。

關(guān)于開發(fā)react用哪些工具就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

本文標(biāo)題：開發(fā)react用哪些工具
網(wǎng)站URL：http://m.rwnh.cn/article40/psgjeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、域名注冊(cè)、網(wǎng)站收錄、外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站制作、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)