Java開發平臺IntelliJ IDEA教程：與React集成（中）
IntelliJ IDEA是Java語言開發的集成環境，IntelliJ在業界被公認為優秀的Java開發工具之一，尤其在智能代碼助手、代碼自動提示、重構、J2EE支持、Ant、JUnit、CVS整合、代碼審查、 創新的GUI設計等方面的功能可以說是超常的。
IntelliJ IDEA現已更新至2019.2版本，新版本改進了java13預覽等20余項功能，提高了開發效率，趕快下載體驗吧~（點擊查看更新詳情）
僅Ultimate Edition 支持此功能。
完成代碼
IntelliJ IDEA 使用JavaScript代碼為React API和JSX提供代碼完成。代碼完成適用于React方法，React特定的屬性，HTML標記和組件名稱， React事件，組件屬性等。
為了獲得React方法和特定于React的屬性的代碼完成，您需要在項目中的某個地方放置react.js庫文件。通常，該庫已經在您的node_modules文件夾中。
完成React方法，屬性和事件
默認情況下，鍵入時會自動顯示代碼完成彈出窗口。例如：
在JSX標簽中，IntelliJ IDEA為React特定的屬性（例如className或classID）和非DOM屬性（例如key或）提供編碼幫助ref。此外，自動完成還適用于項目的CSS文件中定義的類的名稱：
所有React事件（例如onClick或onChange）也可以與花括號一起自動完成 ={}：
完成還適用于花括號內的JavaScript表達式。這適用于您定義的所有方法和功能：
完成HTML標簽和組件名稱
IntelliJ IDEA為您在JavaScript的方法或其他組件內部定義的HTML標記和組件名稱提供代碼完成：
完成還適用于采用ES6樣式語法的導入組件：
完成組件屬性
IntelliJ IDEA為使用定義的組件屬性提供代碼完成propTypes并解析它們，因此您可以快速跳轉或預覽它們的定義：
當您自動完成組件的名稱時，IntelliJ IDEA會自動添加其所有必需的屬性。如果組件的使用中缺少某些必需的屬性，則IntelliJ IDEA會警告您。
將HTML屬性傳輸到JSX
當您復制一段HTML代碼級的屬性或事件處理程序并將其粘貼到JSX，IntelliJ IDEA的自動替換陣營特定的人，這些屬性（className，onClick， onChange，等。）
要將HTML代碼“按原樣”復制到JSX，請使用Paste Simple Ctrl+Shift+Alt+V。
使用陣營代碼片段
IntelliJ IDEA隨附了50多個代碼段的集合，這些代碼段可擴展為React應用程序中經常使用的不同語句和代碼塊。下面的示例顯示了如何使用rcjc縮寫來創建定義新的React組件的類：
要創建一個片斷一個陣營代碼構造
在編輯器中鍵入所需的縮寫，然后按Tab。
按下Ctrl+J并選擇相關的代碼段。要縮小搜索范圍，請開始輸入縮寫，然后從完成列表中選擇它。
查看所有可用React代碼段的列表
借助IntelliJ IDEA，您不僅可以在HTML中使用Emmet，而且可以利用一些特殊的React扭曲在JSX代碼中使用Emmet。例如，縮寫div.my-class在JSX中擴展為，
在HTML中擴展為：
通過應用程序做出反應導航
除了基本導航之外，IntelliJ IDEA還可以幫助您在React特定的代碼元素之間跳轉。
要跳到花括號內的方法或JavaScript表達式的定義{}，請選擇方法或表達式，然后按Ctrl+B。
要跳至組件的定義，請選擇組件名稱，然后按Ctrl+B。
要查看組件的文檔，請按Ctrl+Shift+I。
IntelliJ IDEA使您可以使用面包屑和在編輯器裝訂線中標記樹的彩色突出顯示輕松瀏覽JSX標記：
=====================================================
IntelliJ IDEA示例/使用教程/視頻資源合集，請點擊此處查看
想要了解或購買IntelliJ IDEA正版授權的朋友，歡迎
關注下方微信公眾號，及時獲取產品最新消息和最新資訊
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線