Java開發(fā)平臺IntelliJ IDEA教程：與React集成（中）

IntelliJ IDEA是Java語言開發(fā)的集成環(huán)境，IntelliJ在業(yè)界被公認為優(yōu)秀的Java開發(fā)工具之一，尤其在智能代碼助手、代碼自動提示、重構(gòu)、J2EE支持、Ant、JUnit、CVS整合、代碼審查、 創(chuàng)新的GUI設(shè)計等方面的功能可以說是超常的。

 IntelliJ IDEA現(xiàn)已更新至2019.2版本，新版本改進了java13預(yù)覽等20余項功能，提高了開發(fā)效率，趕快下載體驗吧~（點擊查看更新詳情）

點擊下載IntelliJ IDEA最新試用版

• Java開發(fā)平臺IntelliJ IDEA教程：與React集成（上）

• Java開發(fā)平臺IntelliJ IDEA教程：與React集成（下）

僅Ultimate Edition 支持此功能。

完成代碼

IntelliJ IDEA 使用JavaScript代碼為React API和JSX提供代碼完成。代碼完成適用于React方法，React特定的屬性，HTML標(biāo)記和組件名稱， React事件，組件屬性等。

為了獲得React方法和特定于React的屬性的代碼完成，您需要在項目中的某個地方放置react.js庫文件。通常，該庫已經(jīng)在您的node_modules文件夾中。

IntelliJ IDEA為您在JavaScript的方法或其他組件內(nèi)部定義的HTML標(biāo)記和組件名稱提供代碼完成：

完成還適用于采用ES6樣式語法的導(dǎo)入組件：

完成組件屬性

IntelliJ IDEA為使用定義的組件屬性提供代碼完成propTypes并解析它們，因此您可以快速跳轉(zhuǎn)或預(yù)覽它們的定義：

當(dāng)您自動完成組件的名稱時，IntelliJ IDEA會自動添加其所有必需的屬性。如果組件的使用中缺少某些必需的屬性，則IntelliJ IDEA會警告您。

將HTML屬性傳輸?shù)絁SX 

當(dāng)您復(fù)制一段HTML代碼級的屬性或事件處理程序并將其粘貼到JSX，IntelliJ IDEA的自動替換陣營特定的人，這些屬性（className，onClick， onChange，等。）

要將HTML代碼“按原樣”復(fù)制到JSX，請使用Paste Simple Ctrl+Shift+Alt+V。

使用陣營代碼片段

IntelliJ IDEA隨附了50多個代碼段的集合，這些代碼段可擴展為React應(yīng)用程序中經(jīng)常使用的不同語句和代碼塊。下面的示例顯示了如何使用rcjc縮寫來創(chuàng)建定義新的React組件的類：

要創(chuàng)建一個片斷一個陣營代碼構(gòu)造 

在JSX使用Emmet

借助IntelliJ IDEA，您不僅可以在HTML中使用Emmet，而且可以利用一些特殊的React扭曲在JSX代碼中使用Emmet。例如，縮寫div.my-class在JSX中擴展為，

在HTML中擴展為：

通過應(yīng)用程序做出反應(yīng)導(dǎo)航

除了基本導(dǎo)航之外，IntelliJ IDEA還可以幫助您在React特定的代碼元素之間跳轉(zhuǎn)。

• 要跳到花括號內(nèi)的方法或JavaScript表達式的定義{}，請選擇方法或表達式，然后按Ctrl+B。

• 要跳至組件的定義，請選擇組件名稱，然后按Ctrl+B。

• 要查看組件的文檔，請按Ctrl+Shift+I。

IntelliJ IDEA使您可以使用面包屑和在編輯器裝訂線中標(biāo)記樹的彩色突出顯示輕松瀏覽JSX標(biāo)記：

=====================================================

IntelliJ IDEA示例/使用教程/視頻資源合集，請點擊此處查看

想要了解或購買IntelliJ IDEA正版授權(quán)的朋友，歡迎咨詢慧都官方客服

關(guān)注下方微信公眾號，及時獲取產(chǎn)品最新消息和最新資訊