react 整合java_Java开发平台IntelliJ IDEA教程:与React集成(上)

本文介绍了如何在Java开发平台IntelliJ IDEA中与React集成,包括使用create-react-app创建React应用的步骤,以及手动配置React空项目的流程。详细讲解了从新建项目到下载依赖,启动Node.js服务器的过程。
摘要由CSDN通过智能技术生成

IntelliJ IDEA是Java语言开发的集成环境,IntelliJ在业界被公认为优秀的Java开发工具之一,尤其在智能代码助手、代码自动提示、重构、J2EE支持、Ant、JUnit、CVS整合、代码审查、 创新的GUI设计等方面的功能可以说是超常的。

IntelliJ IDEA现已更新至2019.2版本,新版本改进了java13预览等20余项功能,提高了开发效率,赶快下载体验吧~(点击查看更新详情)

仅Ultimate Edition 支持此功能。

React是一个JavaScript库,用于从封装的组件构建复杂的交互式用户界面。

IntelliJ IDEA与React集成在一起,可在配置,编辑,整理,运行,调试和维护应用程序方面提供帮助。

在开始之前,请确保您的计算机上装有Node.js。

创建一个新的应用程序做出反应

建议开始构建新的React单页应用程序的方法是create-react-app软件包,IntelliJ IDEA使用npx下载并运行该软件包。因此,您的开发环境已预先配置为使用webpack,Babel,ESLint和其他工具。

当然,您仍然可以自己下载Create React App或创建一个空的IntelliJ IDEA项目并在其中安装React。

使用create-react-app生成React应用

1、选择文件| 新增| 项目从主菜单或单击新建项目的按钮欢迎屏幕。

2、在“ 新建项目”向导的第一页的“ 项目类别和选项”对话框中,在左侧窗格中选择“ 静态Web ”。

3、在右侧窗格中,选择React App并单击Next。

4、在向导的第二页上,指定项目名称和用于创建项目的文件夹。

在“ 节点解释器”字段中,指定要使用的Node.js解释器。从列表中选择已配置的解释器,或选择添加以配置新的解释器。

从create-react-app列表中,选择npx create-react-app。

另外,对于npm 5.1及更早版本,请 在Terminal中create-react-app运行npm install --g create-react-app以自行安装软件包。创建应用程序时,选择存储包的文件夹。 Alt+F12create-react-app

5、可选地:

指定在项目生成期间要使用的自定义程序包,而不是 react-scripts。这可以是从react-scripts分叉的软件包之一,例如, react-awesome-scripts, custom-react-scripts, react-scripts-ts等。

IntelliJ IDEA保证仅使用react-scripts软件包运行和调试Jest测试。

6、当您单击Finish时,IntelliJ IDEA会使用所有必需的配置文件生成一个特定于React的项目,并下载所需的依赖项。IntelliJ IDEA还使用默认设置创建一个npm start 和JavaScript Debug配置,以运行或调试您的应用程序。

或者,打开内置终端并输入:npx create-react-app

cd

npm start 启动Node.js服务器。

要下载项目依赖项,请执行以下一项操作:在嵌入式终端(Alt+F12)中,键入:

npm install

从项目根目录中package.json文件的上下文菜单中 选择Run'npm install'。

安装作出反应空IntelliJ IDEA的项目

在这种情况下,您将必须按照下面构建React应用程序中的描述自行配置构建管道 。要创建一个空的IntelliJ IDEA的项目选择文件| 新增| 项目从主菜单或单击新建项目的按钮欢迎屏幕。

在“ 新建项目”向导的第一页的“ 项目类别和选项”对话框中,在左侧窗格中选择“ 静态Web ”。

在右侧窗格中,再次选择“ 静态Web”,然后单击“ 下一步”。

在向导的第二页上,指定项目文件夹和名称,然后单击完成。要安装作出反应空项目打开将使用React的空项目。

在嵌入式终端(Alt+F12)中,键入:

npm install --save react react-dom

您还可以 按照npm和Yarn中的说明将软件包安装在Node.js和NPM页面上。

与现有的应用程序做出反应开始

要继续开发现有的React应用程序,请在IntelliJ IDEA中打开它并下载所需的依赖项。打开计算机上已经存在的应用程序源

单击“ 欢迎”屏幕上的“ 打开 ”,或选择“ 文件” 从主菜单打开。在打开的对话框中,选择存储源的文件夹。为了从你的版本控制检查出的应用程序源单击“ 欢迎”屏幕上的“ 从版本控制中签出”,或选择“ VCS | 从主菜单中的“ 版本控制”中签出。

从列表中选择您的版本控制系统。

在打开的特定于VCS的对话框中,键入您的凭据和存储库以从中检出应用程序源。运行的依赖项

在弹出窗口中 单击运行“ npm install”:

7f32a6157fee16dbfd0b5f969e1cd561.png

更多与React集成的内容,欢迎持续关注我们即将推出的后续教程

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

关注下方微信公众号,及时获取产品最新消息和最新资讯

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

a6e1590ae4b228073faff3806334194e.png0

好文不易,鼓励一下吧!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值