最终的

反应

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

在空的 IntelliJ IDEA 项目中安装 React

在这种情况下，您必须自行配置构建管道，如下面构建 React 应用程序中所述。从React 官方网站了解有关将 React 添加到项目的更多信息。

项目安全

当您打开在 IntelliJ IDEA 外部创建并导入其中的项目时，IntelliJ IDEA 会显示一个对话框，您可以在其中决定如何使用不熟悉的源代码处理该项目。

选择以下选项之一：

• 在安全模式下预览：在这种情况下，IntelliJ IDEA 以预览模式打开项目。这意味着您可以浏览项目的源代码，但无法运行任务和脚本或运行/调试项目。

  IntelliJ IDEA 在编辑器区域顶部显示一条通知，您可以单击“信任项目...”链接并随时加载您的项目。

• 信任项目：在这种情况下，IntelliJ IDEA 打开并加载项目。这意味着项目已初始化，项目的插件已解析，依赖项已添加，并且所有 IntelliJ IDEA 功能均可用。

• 不要打开：在这种情况下，IntelliJ IDEA 不会打开该项目。

从项目安全中了解更多信息。

提示

从欢迎屏幕或通过文件 |创建的项目 新 | 中描述的项目将自动被视为可信。

完整的 React 方法、属性和事件

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

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

所有React 事件，例如onClick或，也可以与大括号或引号onChange一起自动完成 。={}""

动图

默认情况下，插入花括号。您可以让 IntelliJ IDEA 始终添加引号，或者根据TypeScript 定义文件 (d.ts)中的类型在引号或大括号之间进行选择。要更改默认设置，请打开“设置”对话框 ( )，转至编辑器 | 代码风格| HTML并从“添加 JSX 属性”列表中选择适用的选项。CtrlAlt0S

补全也适用于大括号内的 JavaScript 表达式。这适用于您定义的所有方法和函数：

完整的 HTML 标签和组件名称

IntelliJ IDEA 为您在 JavaScript 方法或其他组件内定义的 HTML 标签和组件名称提供代码补全：

补全也适用于具有 ES6 样式语法的导入组件：

完整的组件属性

propTypesIntelliJ IDEA 为使用并解析它们定义的组件属性提供代码完成，以便您可以快速跳转或预览它们的定义：

动图

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