JavaScript庫(kù)：React

React

React是一個(gè)JavaScript庫(kù)，用于從封裝組件構(gòu)建復(fù)雜的交互式用戶界面。相關(guān)信息可以查看本站的《React教程》。

IntelliJ IDEA與React集成，在配置，編輯，linting，運(yùn)行，調(diào)試和維護(hù)應(yīng)用程序方面提供幫助。

提示：在開始之前，請(qǐng)確保您的計(jì)算機(jī)上有Node.js。

創(chuàng)建一個(gè)新的React應(yīng)用程序

您可以使用create-react-app包或創(chuàng)建一個(gè)空的IntelliJ IDEA項(xiàng)目并在其中安裝React。

使用create-react-app生成React應(yīng)用程序

創(chuàng)建React App是開始構(gòu)建新的React單頁(yè)面應(yīng)用程序的推薦方法。因此，您的開發(fā)環(huán)境已預(yù)先配置為使用webpack，Babel，ESLint和其他工具。

全局安裝create-react-app

• 打開內(nèi)置終端（查看|工具查看|終端）并在命令提示符下輸入：npm install -g create-react-app。

創(chuàng)建應(yīng)用程序

1. 在主菜單上選擇文件|新建|項(xiàng)目，或單擊歡迎屏幕上的“新建項(xiàng)目”按鈕。
   或者，打開內(nèi)置終端并鍵入：
   1. create-react-app <application-name>以創(chuàng)建一個(gè)應(yīng)用程序。
   2. cd <application-name>以切換到應(yīng)用程序文件夾。
   3. npm start以啟動(dòng)Node.js服務(wù)器。
2. 在“項(xiàng)目類別和選項(xiàng)”對(duì)話框（“新建項(xiàng)目”向?qū)У牡谝豁?yè)）中，在左側(cè)窗格中選擇“靜態(tài)Web”。
3. 在右側(cè)窗格中，選擇“React App”，然后單擊“下一步”。
4. 在向?qū)У牡诙?yè)上，指定項(xiàng)目名稱和要在其中創(chuàng)建的文件夾。在Node Interpreter字段中，指定要使用的Node.js解釋器。從下拉列表中選擇已配置的解釋器，或選擇“添加”以在create-react-app字段中配置新的解釋器，指定create-react-app包的路徑。
5. 可選：在項(xiàng)目生成期間指定要使用的自定義程序包而不是react-scripts。這可以是來(lái)自react-scripts分叉的軟件包之一，例如，react-awesome-scripts，custom-react-scripts，react-scripts-ts等。
   IntelliJ IDEA僅保證使用react-scripts包運(yùn)行和調(diào)試Jest測(cè)試。
6. 單擊“完成”后，IntelliJ IDEA將生成一個(gè)包含所有必需配置文件的React特定項(xiàng)目。

要下載項(xiàng)目依賴項(xiàng)，請(qǐng)執(zhí)行以下操作之一：

• 打開嵌入式終端（查看|工具窗口|終端，或按Alt+F12）并在命令提示符下鍵入npm install。
• 在項(xiàng)目根目錄中的文件的上下文菜單中選擇Run'npm install'package.json。

在空的IntelliJ IDEA項(xiàng)目中安裝React

在這種情況下，您必須自己配置構(gòu)建管道，如下面的“構(gòu)建React應(yīng)用程序”中所述。

創(chuàng)建一個(gè)空的IntelliJ IDEA項(xiàng)目：

1. 在主菜單上選擇文件|新建|項(xiàng)目，或單擊歡迎屏幕上的“新建項(xiàng)目”按鈕。在“項(xiàng)目類別和選項(xiàng)”對(duì)話框（“新建項(xiàng)目”向?qū)У牡谝豁?yè)）中，在左側(cè)窗格中選擇“靜態(tài)Web”。
2. 在右側(cè)窗格中，再次選擇“靜態(tài)Web”，然后單擊“下一步”。
3. 在向?qū)У牡诙?yè)上，指定項(xiàng)目文件夾和名稱，然后單擊“完成”。

在空項(xiàng)目中安裝React：

1. 打開您將使用React的空項(xiàng)目。
2. 打開嵌入式終端（查看|工具窗口|終端，或按Alt+F12）并輸入npm install --save react react-dom。

從現(xiàn)有的React應(yīng)用程序開始

要繼續(xù)開發(fā)現(xiàn)有的React應(yīng)用程序，請(qǐng)?jiān)贗ntelliJ IDEA中打開它并下載所需的依賴項(xiàng)。

打開計(jì)算機(jī)上已有的應(yīng)用程序源

• 單擊歡迎屏幕上的打開或在主菜單上選擇：文件|打開。在打開的對(duì)話框中，選擇存儲(chǔ)源的文件夾。

從版本控制中檢出應(yīng)用程序源

1. 單擊“歡迎”屏幕上的“從版本控制中簽出”或從主菜單上選擇：VCS|從版本控制中簽出。
2. 從列表中選擇您的版本控制系統(tǒng)。
3. 在打開的特定于VCS的對(duì)話框中，鍵入您的憑據(jù)和存儲(chǔ)庫(kù)以檢出應(yīng)用程序源。

下載依賴項(xiàng)

• 單擊彈出窗口中的“Run 'npm install'”：
  

代碼完成

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

要獲得React方法和React特定屬性的代碼完成，您需要將react.js庫(kù)文件放在項(xiàng)目的某個(gè)位置。通常該庫(kù)已經(jīng)在您的node_modules文件夾中。

完成React方法，屬性和事件

默認(rèn)情況下，代碼完成彈出窗口會(huì)在您鍵入時(shí)自動(dòng)顯示。例如：

在JSX標(biāo)記中，IntelliJ IDEA為特定于React的屬性（如className或者classID）和非DOM屬性（如key或者ref）提供編碼幫助。此外，自動(dòng)完成也適用于項(xiàng)目的CSS文件中定義的類的名稱：

所有React事件（例如onClick或者onChange）也可以與花括號(hào)（={}）一起自動(dòng)完成：

完成也適用于花括號(hào)內(nèi)的JavaScript表達(dá)式。

這適用于您定義的所有方法和功能：

完成HTML標(biāo)記和組件名稱

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

完成也適用于具有ES6樣式語(yǔ)法的導(dǎo)入組件：

完成組件屬性

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

當(dāng)您自動(dòng)完成組件的名稱時(shí)，IntelliJ IDEA會(huì)自動(dòng)添加其所有必需的屬性。

如果組件的使用中缺少某些必需的屬性，IntelliJ IDEA會(huì)向您發(fā)出警告。

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

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

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

使用React代碼段

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

從代碼段創(chuàng)建React代碼構(gòu)造

• 在編輯器中鍵入所需的縮寫，然后按Tab。
• 按Ctrl+J，然后選擇相關(guān)的代碼段。要縮小搜索范圍，請(qǐng)先鍵入縮寫，然后從完成列表中選擇它。

查看所有可用的React代碼段列表

• 在“設(shè)置/首選項(xiàng)”對(duì)話框（Ctrl+Alt+S）中，單擊“編輯器”下的“實(shí)時(shí)模板”，然后展開“React”節(jié)點(diǎn)。

在JSX中使用Emmet

使用IntelliJ IDEA，您不僅可以在HTML中使用Emmet，還可以在JSX代碼中使用Emmet，利用一些特殊的React twists。例如，縮寫div.my-class在JSX中擴(kuò)展為<div className=”my-class"></div>而不是HTML中的<div class=”my-class"></div>：

瀏覽React應(yīng)用程序

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

• 要跳轉(zhuǎn)到花括號(hào){}內(nèi)的方法或JavaScript表達(dá)式的定義，請(qǐng)選擇方法或表達(dá)式，然后按Ctrl+B。
• 要跳轉(zhuǎn)到組件的定義，請(qǐng)選擇組件名稱并按Ctrl+B。
• 要查看組件的文檔，請(qǐng)按Ctrl+Shift+I。

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

Linting一個(gè)React應(yīng)用程序

所有IntelliJ IDEA內(nèi)置的JavaScript和HTML代碼檢查也可以在JSX代碼中使用。如果未使用的變量和函數(shù)，缺少結(jié)束標(biāo)記，缺少語(yǔ)句等，IntelliJ IDEA會(huì)提醒您：

提示：要自定義檢查列表，請(qǐng)打開 IntelliJ IDEA設(shè)置（Ctrl+Alt+S）的編輯器|檢查頁(yè)面，并禁用您不想查看的檢查或更改其嚴(yán)重性級(jí)別。 

對(duì)于某些檢查，IntelliJ IDEA提供快速修復(fù)，例如，建議添加缺少的方法。

要查看快速修復(fù)彈出窗口，請(qǐng)按Alt+Enter。

使用ESLint

除了提供內(nèi)置代碼檢查外，IntelliJ IDEA還集成了用于JSX代碼的連接器，例如ESLint。ESLint帶來(lái)了各種各樣的linting規(guī)則，這些規(guī)則也可以通過(guò)插件進(jìn)行擴(kuò)展。當(dāng)您鍵入時(shí)，IntelliJ IDEA會(huì)在編輯器中顯示ESLint報(bào)告的警告和錯(cuò)誤。使用ESLint，您還可以使用JavaScript標(biāo)準(zhǔn)樣式。

要讓ESLint正確理解React JSX語(yǔ)法，您需要eslint-plugin-react。使用此插件，例如，當(dāng)沒(méi)有為React組件設(shè)置顯示名稱時(shí)，或者使用某些危險(xiǎn)的JSX屬性時(shí)，會(huì)警告您：

提示：如果您使用create-react-app創(chuàng)建了應(yīng)用程序，則您的開發(fā)環(huán)境已預(yù)先配置為使用ESLint。 

1. 在內(nèi)置終端（查看|工具窗口|終端）中，鍵入npm install --save-dev eslint和npm install --save-dev eslint-plugin-react。
2. 將ESLint配置文件.eslintrc添加到項(xiàng)目中。
3. 在“設(shè)置/首選項(xiàng)”對(duì)話框（Ctrl+Alt+S）中，選擇：語(yǔ)言和框架|JavaScript|代碼質(zhì)量工具|ESLint。在打開的ESLint頁(yè)面上，選中“啟用”復(fù)選框。IntelliJ IDEA將自動(dòng)在項(xiàng)目的node_modules文件夾中找到ESLint ，然后默認(rèn)使用.eslintrc配置。

.eslintrc結(jié)構(gòu)示例（帶React插件的ESLint 1.x）

• 在ecmaFeatures對(duì)象中，添加："jsx" = true。在這里，您還可以指定要使用的其他語(yǔ)言功能，例如ES6類，模塊等。
• 在plugins對(duì)象中，添加react。
• 在該rules對(duì)象中，您可以列出要啟用的ESLint內(nèi)置規(guī)則，以及通過(guò)react插件提供的規(guī)則。

  {
    "parser": "babel-eslint",
    "env": {
      "browser": true
    },
    "ecmaFeatures": {
      "jsx": true
    },
    "plugins": [
      "react"
    ],
    "rules": {
      "semi": 2
    }
  }

從ESLint官方網(wǎng)站 了解有關(guān)ESLint和插件配置的更多信息。

重構(gòu)React應(yīng)用程序

除了常見的IntelliJ IDEA重構(gòu)之外，在React應(yīng)用程序中，您還可以運(yùn)行Rename for React組件并使用Extract Component 創(chuàng)建新組件。

重命名組件

• 將光標(biāo)放在組件名稱中，然后按Shift+F6

下面是重命名組件僅在一個(gè)文件中定義和使用的示例：

以同樣的方式，您可以重命名在一個(gè)文件中定義的組件，然后使用命名導(dǎo)出導(dǎo)入到另一個(gè)文件： 

提取組件

您可以通過(guò)從現(xiàn)有組件的render方法中提取JSX代碼來(lái)創(chuàng)建新的React組件。

1. 選擇要提取的代碼，然后從主菜單或上下文菜單中選擇：Refactor |提取|組件。
2. 命名組件。
3. 選擇類如果要定義組件作為一個(gè)類或函數(shù)，如果你想創(chuàng)建一個(gè)功能組件。
4. 單擊“確定”。新組件將在現(xiàn)有組件旁邊定義并在其中使用。
   
   

運(yùn)行和調(diào)試React應(yīng)用程序

開始構(gòu)建新的React單頁(yè)面應(yīng)用程序的推薦方法是Create React App。僅在這種情況下，您的開發(fā)環(huán)境已預(yù)先配置為使用webpack和Babel。否則，您需要首先配置構(gòu)建管道。

提示：僅適用于使用create-react-app的應(yīng)用程序。

要運(yùn)行React應(yīng)用程序，請(qǐng)執(zhí)行以下操作之一：

• 在npm工具窗口（View | Tool Windows | npm）中，雙擊該start任務(wù)。

  感謝Webpack Hot Module Replacement，當(dāng)開發(fā)服務(wù)器運(yùn)行時(shí)，只要更改任何源文件并保存更新，就會(huì)自動(dòng)重新加載應(yīng)用程序。

調(diào)試React應(yīng)用程序

1. 雙擊npm工具窗口中的start任務(wù)，在開發(fā)模式下啟動(dòng)應(yīng)用程序。
2. 等到編譯應(yīng)用程序并且Webpack開發(fā)服務(wù)器準(zhǔn)備就緒。打開瀏覽器http://localhost:3000/以查看應(yīng)用程序。
3. 復(fù)制運(yùn)行應(yīng)用程序的URL地址（默認(rèn)情況下是http://localhost:3000/），稍后在創(chuàng)建調(diào)試配置時(shí)需要此URL。
   
   
4. 創(chuàng)建一個(gè)新的JavaScript調(diào)試配置：選擇Run|編輯配置，單擊 ，然后從列表中選擇JavaScript Debug。在“運(yùn)行/調(diào)試配置：JavaScript調(diào)試”對(duì)話框中，將保存的URL（http://localhost:3000/）粘貼到URL字段中，保存配置。
5. 在代碼中設(shè)置斷點(diǎn)，然后單擊配置列表旁邊的 以啟動(dòng)調(diào)試會(huì)話。
6. 當(dāng)?shù)谝粋€(gè)斷點(diǎn)被點(diǎn)擊時(shí)，切換到調(diào)試工具窗口并照常進(jìn)行：逐步執(zhí)行程序，停止并恢復(fù)程序執(zhí)行，暫停時(shí)檢查它，瀏覽調(diào)用堆棧和變量，設(shè)置監(jiān)視，評(píng)估變量，查看實(shí)際HTML DOM等。
   
   

構(gòu)建React應(yīng)用程序

如果在現(xiàn)有的IntelliJ IDEA項(xiàng)目中安裝了React，則需要設(shè)置構(gòu)建過(guò)程。從React官方網(wǎng)站了解為React應(yīng)用程序配置構(gòu)建管道的各種方法 。

提示：如果您使用create-react-app創(chuàng)建了應(yīng)用程序，則您的開發(fā)環(huán)境已經(jīng)預(yù)先配置為使用Webpack和Babel。

測(cè)試React應(yīng)用程序

您可以在使用create-react-app創(chuàng)建的React應(yīng)用程序中運(yùn)行和調(diào)試Jest測(cè)試。在開始之前，請(qǐng)確保將react-scripts包添加到您的package.json中的dependencies對(duì)象中。

您可以通過(guò)運(yùn)行/調(diào)試配置運(yùn)行和調(diào)試Jest測(cè)試，也可以直接從編輯器或Project工具窗口運(yùn)行和調(diào)試Jest測(cè)試，有關(guān)詳細(xì)信息，請(qǐng)參閱Jest，這將在之后的章節(jié)進(jìn)行介紹。

創(chuàng)建Jest運(yùn)行/調(diào)試配置

1. 打開“運(yùn)行/調(diào)試配置”對(duì)話框（主菜單上的：運(yùn)行|編輯配置）。
2. 單擊工具欄上的 ，然后從列表中選擇Jest。將打開“運(yùn)行/調(diào)試配置：Jest”對(duì)話框。
3. 指定要使用的節(jié)點(diǎn)解釋器和應(yīng)用程序的工作目錄。

   默認(rèn)情況下，工作目錄字段顯示項(xiàng)目根文件夾。要更改此預(yù)定義設(shè)置，請(qǐng)指定所需文件夾的路徑，或從列表中選擇以前使用的文件夾。

4. 在Jest包字段中，指定react-scripts包的路徑。
5. 在“Jest選項(xiàng)”字段中，鍵入：--env=jsdom。
   
   

運(yùn)行測(cè)試

1. 從主工具欄上的列表中選擇Jest運(yùn)行/調(diào)試配置，然后單擊列表右側(cè)的 。
2. 測(cè)試服務(wù)器自動(dòng)啟動(dòng)，無(wú)需您執(zhí)行任何步驟。在“運(yùn)行”工具窗口中查看和分析來(lái)自測(cè)試服務(wù)器的消息。
3. 在“運(yùn)行”工具窗口的“測(cè)試運(yùn)行器”選項(xiàng)卡中監(jiān)視測(cè)試執(zhí)行。

調(diào)試測(cè)試

1. 從主工具欄上的列表中選擇Jest運(yùn)行/調(diào)試配置，然后單擊列表右側(cè)的 。
2. 在打開的調(diào)試工具窗口中，像往常一樣繼續(xù)：逐步完成測(cè)試，停止并恢復(fù)測(cè)試執(zhí)行，暫停時(shí)檢查測(cè)試等。

一些已知的限制

• 當(dāng)您第一次在調(diào)試會(huì)話期間打開應(yīng)用程序時(shí)，可能會(huì)發(fā)生在頁(yè)面加載時(shí)執(zhí)行的代碼中的某些斷點(diǎn)未被命中。原因是要在原始源代碼中停止斷點(diǎn)，IntelliJ IDEA需要從瀏覽器獲取源映射。但是，只有在頁(yè)面完全加載至少一次后，瀏覽器才能傳遞這些源映射。作為解決方法，請(qǐng)自行在瀏覽器中重新加載頁(yè)面。
• 如果您使用的webpack-dev-server是早于Webpack版本2的，建議您在IntelliJ IDEA中禁用安全寫入功能。否則，應(yīng)用程序?qū)⒉粫?huì)在更改時(shí)按時(shí)更新。Webpack 2中已修復(fù)此問(wèn)題。