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ā)效率,趕快下載體驗吧~(點擊查看更新詳情)
僅Ultimate Edition 支持此功能。
React是一個JavaScript庫,用于從封裝的組件構(gòu)建復(fù)雜的交互式用戶界面。
IntelliJ IDEA與React集成在一起,可在配置,編輯,整理,運行,調(diào)試和維護應(yīng)用程序方面提供幫助。
創(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)置終端并輸入:
npx create-react-app
cd
npm start 啟動Node.js服務(wù)器。
要下載項目依賴項,請執(zhí)行以下一項操作:
在嵌入式終端(Alt+F12)中,鍵入:
npm install
從項目根目錄中package.json文件的上下文菜單中 選擇Run'npm install'。
在這種情況下,您將必須按照下面構(gòu)建React應(yīng)用程序中的描述自行配置構(gòu)建管道 。
要創(chuàng)建一個空的IntelliJ IDEA的項目
選擇文件| 新增| 項目從主菜單或單擊新建項目的按鈕歡迎屏幕。
在“ 新建項目”向?qū)У牡谝豁摰摹?nbsp;項目類別和選項”對話框中,在左側(cè)窗格中選擇“ 靜態(tài)Web ”。
在右側(cè)窗格中,再次選擇“ 靜態(tài)Web”,然后單擊“ 下一步”。
在向?qū)У牡诙撋?,指定項目文件夾和名稱,然后單擊完成。
打開將使用React的空項目。
在嵌入式終端(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中打開它并下載所需的依賴項。
單擊“ 歡迎”屏幕上的“ 從版本控制中簽出”,或選擇“ VCS | 從主菜單中的“ 版本控制”中簽出。
從列表中選擇您的版本控制系統(tǒng)。
在打開的特定于VCS的對話框中,鍵入您的憑據(jù)和存儲庫以從中檢出應(yīng)用程序源。
在彈出窗口中 單擊運行“ npm install”:
更多與React集成的內(nèi)容,歡迎持續(xù)關(guān)注我們即將推出的后續(xù)教程
=====================================================
IntelliJ IDEA示例/使用教程/視頻資源合集,請點擊此處查看
想要了解或購買IntelliJ IDEA正版授權(quán)的朋友,歡迎咨詢慧都官方客服
關(guān)注下方微信公眾號,及時獲取產(chǎn)品最新消息和最新資訊