• <menu id="w2i4a"></menu>
  • logo IntelliJ IDEA系列教程:

    文檔首頁>>IntelliJ IDEA系列教程:>>Java開發(fā)平臺IntelliJ IDEA教程:與React集成(上)

    Java開發(fā)平臺IntelliJ IDEA教程:與React集成(上)


    IntelliJ IDEA是Java語言開發(fā)的集成環(huán)境,IntelliJ在業(yè)界被公認(rèn)為優(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最新試用版

    僅Ultimate Edition 支持此功能。

    React是一個JavaScript庫,用于從封裝的組件構(gòu)建復(fù)雜的交互式用戶界面。

    IntelliJ IDEA與React集成在一起,可在配置,編輯,整理,運行,調(diào)試和維護應(yīng)用程序方面提供幫助。

    在開始之前,請確保您的計算機上裝有Node.js。

    創(chuàng)建一個新的應(yīng)用程序做出反應(yīng)

    建議開始構(gòu)建新的React單頁應(yīng)用程序的方法是create-react-app軟件包,IntelliJ IDEA使用npx下載并運行該軟件包。因此,您的開發(fā)環(huán)境已預(yù)先配置為使用webpack,Babel,ESLint和其他工具。

    當(dāng)然,您仍然可以自己下載Create React App或創(chuàng)建一個空的IntelliJ IDEA項目并在其中安裝React。

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

    1、選擇文件| 新增| 項目從主菜單或單擊新建項目的按鈕歡迎屏幕。

    2、在“ 新建項目”向?qū)У牡谝豁摰摹?nbsp;項目類別和選項”對話框中,在左側(cè)窗格中選擇“ 靜態(tài)Web ”。

    3、在右側(cè)窗格中,選擇React App并單擊Next。

    4、在向?qū)У牡诙撋?,指定項目名稱和用于創(chuàng)建項目的文件夾。

    在“ 節(jié)點解釋器”字段中,指定要使用的Node.js解釋器。從列表中選擇已配置的解釋器,或選擇添加以配置新的解釋器。

    從create-react-app列表中,選擇npx create-react-app。

    另外,對于npm 5.1及更早版本,請 在Terminal中create-react-app運行npm install --g create-react-app以自行安裝軟件包。創(chuàng)建應(yīng)用程序時,選擇存儲包的文件夾。 Alt+F12create-react-app

    5、可選地:
    指定在項目生成期間要使用的自定義程序包,而不是 react-scripts。這可以是從react-scripts分叉的軟件包之一,例如, react-awesome-scripts, custom-react-scripts, react-scripts-ts等。

    IntelliJ IDEA保證僅使用react-scripts軟件包運行和調(diào)試Jest測試。

    6、當(dāng)您單擊Finish時,IntelliJ IDEA會使用所有必需的配置文件生成一個特定于React的項目,并下載所需的依賴項。IntelliJ IDEA還使用默認(rèn)設(shè)置創(chuàng)建一個npm start 和JavaScript Debug配置,以運行或調(diào)試您的應(yīng)用程序。

    或者,打開內(nèi)置終端并輸入:

    1. npx create-react-app

    2. cd

    3. npm start 啟動Node.js服務(wù)器。

    要下載項目依賴項,請執(zhí)行以下一項操作:

    • 在嵌入式終端(Alt+F12)中,鍵入:

      npm install

    • 從項目根目錄中package.json文件的上下文菜單中 選擇Run'npm install'。 

    安裝作出反應(yīng)空IntelliJ IDEA的項目

    在這種情況下,您將必須按照下面構(gòu)建React應(yīng)用程序中的描述自行配置構(gòu)建管道 。

    要創(chuàng)建一個空的IntelliJ IDEA的項目

    1. 選擇文件| 新增| 項目從主菜單或單擊新建項目的按鈕歡迎屏幕。

      在“ 新建項目”向?qū)У牡谝豁摰摹?nbsp;項目類別和選項”對話框中,在左側(cè)窗格中選擇“ 靜態(tài)Web ”。

    2. 在右側(cè)窗格中,再次選擇“ 靜態(tài)Web”,然后單擊“ 下一步”。

    3. 在向?qū)У牡诙撋?,指定項目文件夾和名稱,然后單擊完成。

    要安裝作出反應(yīng)空項目

    1. 打開將使用React的空項目。

    2. 在嵌入式終端(Alt+F12)中,鍵入:

    npm install --save react react-dom

    您還可以 按照npm和Yarn中的說明將軟件包安裝在Node.js和NPM頁面上。

    與現(xiàn)有的應(yīng)用程序做出反應(yīng)開始

    要繼續(xù)開發(fā)現(xiàn)有的React應(yīng)用程序,請在IntelliJ IDEA中打開它并下載所需的依賴項。

    打開計算機上已經(jīng)存在的應(yīng)用程序源

    單擊“ 歡迎”屏幕上的“ 打開 ”,或選擇“ 文件” 從主菜單打開。在打開的對話框中,選擇存儲源的文件夾。

    為了從你的版本控制檢查出的應(yīng)用程序源

    1. 單擊“ 歡迎”屏幕上的“ 從版本控制中簽出”,或選擇“ VCS | 從主菜單中的“ 版本控制”中簽出。

    2. 從列表中選擇您的版本控制系統(tǒng)。

    3. 在打開的特定于VCS的對話框中,鍵入您的憑據(jù)和存儲庫以從中檢出應(yīng)用程序源。

    運行的依賴項

    在彈出窗口中 單擊運行“ npm install”:

    Java開發(fā)平臺IntelliJ IDEA教程:與React集成(上)

    更多與React集成的內(nèi)容,歡迎持續(xù)關(guān)注我們即將推出的后續(xù)教程

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

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

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

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

    Java開發(fā)平臺IntelliJ IDEA教程:與React集成(上)


    掃碼咨詢


    添加微信 立即咨詢

    電話咨詢

    客服熱線
    023-68661681

    TOP
    三级成人熟女影院,欧美午夜成人精品视频,亚洲国产成人乱色在线观看,色中色成人论坛 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();