003-代碼補全，運行，調試

1、代碼補全

　　IntelliJ IDEA爲JavaScript代碼中的React API和JSX提供代碼補全。代碼補全適用於React方法，特定於React的屬性，HTML標記和組件名稱，React事件，組件屬性等。從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會提醒您。

2、將HTML屬性傳輸給JSX

　　您使用類屬性或事件處理程序複製一段HTML代碼並將其粘貼到JSX中時，IntelliJ IDEA會自動用React特定的屬性（className，onClick，onChange等）替換這些屬性。

3、運行和調試React應用程序

　　開始構建新的React單頁應用程序的建議方法是建立React應用程序。只有在這種狀況下，您的開發環境纔會預先配置爲使用webpack和Babel。不然，您須要首先配置構建管道。

3.一、要運行React應用程序，請執行如下操做之一：

　　在npm tool window （View|tool window| npm）中，雙擊start任務【參看http://www.cnblogs.com/bjlhx/p/8967531.html】。感謝Webpack Hot Module Replacement，當開發服務器運行時，只要您更改任何源文件並保存更新，應用程序就會自動從新加載。

3.二、調試React應用程序

　　1》

　　

　　等待應用程序編譯完成而且Webpack開發服務器準備就緒。在http：// localhost：3000 /上打開瀏覽器查看應用程序。

　　複製正在運行應用程序的URL地址（默認狀況下爲http：// localhost：3000 /），建立調試配置時稍後須要此URL。

　　2》建立一個新的JavaScript調試配置：選擇Run |編輯配置「，單擊，而後從列表中選擇」JavaScript Debuging「。在run/debug配置：JavaScript調試對話框中，將保存的URL（http：// localhost：3000 /）粘貼到URL字段中。保存配置。

　　3》在代碼中設置斷點並經過單擊配置列表旁邊的開始調試會話。

　　4》當命中第一個斷點時，切換到調試工具窗口並照常進行：逐步執行程序，中止並恢復程序執行，在暫停時檢查它，探索調用堆棧和變量，設置監視，評估變量，查看實際的HTML DOM等。 　　

 

更多詳細參看：http://www.jetbrains.com/help/idea/react.html#react_code_completion