Java开发平台IntelliJ IDEA教程:与React集成(中)

翻译|使用教程|编辑:吴园园|2019-10-10 15:10:39.080|阅读 72 次

概述:本系列教程内容为如何将IntelliJ IDEA与您喜欢的语言,平台或框架结合使用。IntelliJ IDEA与React集成在一起,可在配置,编辑,整理,运行,调试和维护应用程序方面提供帮助。

相关链接:

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

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

点击下载IntelliJ IDEA最新试用版

仅Ultimate Edition 支持此功能。

完成代码

IntelliJ IDEA 使用JavaScript代码为React API和JSX提供代码完成。代码完成适用于React方法,React特定的属性,HTML标记和组件名称, React事件,组件属性等。

为了获得React方法和特定于React的属性的代码完成,您需要在项目中的某个地方放置react.js库文件。通常,该库已经在您的node_modules文件夹中。

完成React方法,属性和事件

默认情况下,键入时会自动显示代码完成弹出窗口。例如:

Java开发平台IntelliJ IDEA教程:与React集成(中)

在JSX标签中,IntelliJ IDEA为React特定的属性(例如className或classID)和非DOM属性(例如key或)提供编码帮助ref。此外,自动完成还适用于项目的CSS文件中定义的类的名称:

所有React事件(例如onClick或onChange)也可以与花括号一起自动完成  ={}:

1570689866.png

完成还适用于花括号内的JavaScript表达式。这适用于您定义的所有方法和功能:

1570691378.png

完成HTML标签和组件名称

IntelliJ IDEA为您在JavaScript的方法或其他组件内部定义的HTML标记和组件名称提供代码完成:

1570690005.png

完成还适用于采用ES6样式语法的导入组件:

1570690038.png

完成组件属性

IntelliJ IDEA为使用定义的组件属性提供代码完成propTypes并解析它们,因此您可以快速跳转或预览它们的定义:

1570690092.png

当您自动完成组件的名称时,IntelliJ IDEA会自动添加其所有必需的属性。如果组件的使用中缺少某些必需的属性,则IntelliJ IDEA会警告您。

将HTML属性传输到JSX 

当您复制一段HTML代码级的属性或事件处理程序并将其粘贴到JSX,IntelliJ IDEA的自动替换阵营特定的人,这些属性(className,onClick, onChange,等。)

1570691038.gif

要将HTML代码“按原样”复制到JSX,请使用Paste Simple Ctrl+Shift+Alt+V。

使用阵营代码片段

IntelliJ IDEA随附了50多个代码段的集合,这些代码段可扩展为React应用程序中经常使用的不同语句和代码块。下面的示例显示了如何使用rcjc缩写来创建定义新的React组件的类:

要创建一个片断一个阵营代码构造 

  • 在编辑器中键入所需的缩写,然后按Tab。

  • 按下Ctrl+J并选择相关的代码段。要缩小搜索范围,请开始输入缩写,然后从完成列表中选择它。

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

在“ 设置/首选项”对话框(Ctrl+Alt+S)中,单击“ 编辑器”下的“ 实时模板”,然后展开“ 反应”节点。

在JSX使用Emmet

借助IntelliJ IDEA,您不仅可以在HTML中使用Emmet,而且可以利用一些特殊的React扭曲在JSX代码中使用Emmet。例如,缩写div.my-class在JSX中扩展为,

在HTML中扩展为:


1570691115.gif

通过应用程序做出反应导航

除了基本导航之外,IntelliJ IDEA还可以帮助您在React特定的代码元素之间跳转。

  • 要跳到花括号内的方法或JavaScript表达式的定义{},请选择方法或表达式,然后按Ctrl+B。

  • 要跳至组件的定义,请选择组件名称,然后按Ctrl+B。

  • 要查看组件的文档,请按Ctrl+Shift+I。

IntelliJ IDEA使您可以使用面包屑和在编辑器装订线中标记树的彩色突出显示轻松浏览JSX标记:


1570691219.png

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

IntelliJ IDEA示例/使用教程/视频资源合集,请点击此处查看

想要了解或购买IntelliJ IDEA正版授权的朋友,欢迎咨询慧都官方客服

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

图片2.jpg



标签:

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

文章转载自:IntelliJ IDEA https://www.jetbrains.com/help/idea/react.html

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
IntelliJ IDEA

IntelliJ在业界被公认为优秀的Java开发平台之一,在智能代码助手、代码自动提示、重构、J2EE支持、Ant、JUnit、CVS整合、代码审查、 创新的GUI设计等方面表现突出,并支持基于Android平台的程序开发。

在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat