反应
React是一个 JavaScript 库，用于从封装的组件构建复杂的交互式用户界面。从React 官方网站了解有关该库的更多信息。
WebStorm 与 React 集成，在配置、编辑、linting、运行、调试和维护应用程序方面提供帮助。
在你开始前
确保您的计算机上有Node.js。
创建一个新的 React 应用程序
开始构建新的 React 单页应用程序的推荐方法是create-react-app包，WebStorm 使用 npx 为您下载和运行它。因此，您的开发环境已预先配置为使用 webpack、Babel、ESLint 和其他工具。
当然，你仍然可以自己下载 Create React App 或者创建一个空的 WebStorm 项目并在其中安装 React。
使用 create-react-app 生成 React 应用程序
在欢迎屏幕 上单击创建新项目或选择。创建新项目对话框打开。
在左侧窗格中，选择React。
在右侧窗格中：
指定将存储项目相关文件的文件夹的路径。
在Node Interpreter字段中，指定要使用的 Node.js 解释器。从列表中选择一个已配置的解释器或选择添加以配置一个新解释器。
从create-react-app列表中，选择npx create-react-app。
或者，对于 npm 5.1 及更早版本，通过在终端
create-react-app中运行自己安装包。创建应用程序时，选择存储包的文件夹。npm install --g create-react-appAlt+F12create-react-app可选：
要使用 TSX 而不是 JSX，请选中创建 TypeScript 项目复选框。WebStorm 将为您的应用程序生成.tsx文件和tsconfig.json 配置文件。
当您单击 Create时，WebStorm 会生成一个包含所有必需配置文件的特定于React的项目并下载所需的依赖项。WebStorm 还使用默认设置创建npm start和JavaScript 调试配置，以运行或调试您的应用程序。
在一个空的 WebStorm 项目中安装 React
在这种情况下，您必须自己配置构建管道，如下面的构建 React 应用程序中所述。从React 官方网站了解有关将 React 添加到项目的更多信息。
创建一个空的 WebStorm 项目
在欢迎屏幕 上单击创建新项目或选择。创建新项目对话框打开。
在左侧窗格中，选择Empty Project。在右侧窗格中，指定应用程序文件夹并单击Create。
在空项目中安装 React
打开您将使用React的空项目。
在嵌入式终端( Alt+F12) 中，键入：
npm install --save react react-dom
从现有的 React 应用程序开始
要继续开发现有的 React 应用程序，请在 WebStorm 中打开它并下载所需的依赖项。
打开您机器上已有的应用程序源
在欢迎屏幕上单击打开或选择从主菜单在打开的对话框中，选择存储源的文件夹。
从您的版本控制中查看应用程序源
在欢迎屏幕上单击从 VCS 获取。或者，选择或从主菜单中
<Your_VCS> 代表与您当前打开的项目相关联的版本控制系统。
在打开的对话框中，从列表中选择您的版本控制系统并指定要从中签出应用程序源的存储库。有关详细信息，请参阅签出项目（克隆）。
下载依赖项
在弹出窗口中单击Run 'npm install'或Run 'yarn install' ：
您可以使用npm、Yarn 1或Yarn 2，有关详细信息，请参阅npm 和 Yarn。
在编辑器或项目工具窗口中，从package.json的上下文菜单中选择Run 'npm install'或Run 'yarn install' 。
项目安全
当您打开在 WebStorm 外部创建并导入其中的项目时，WebStorm 会显示一个对话框，您可以在其中决定如何使用不熟悉的源代码处理该项目。
选择以下选项之一：
以安全模式预览：在这种情况下，WebStorm 以“预览模式”打开项目，这意味着您可以浏览项目的源代码，但不能运行任务和脚本或运行/调试项目。
WebStorm 在编辑器区域顶部显示通知，您可以随时单击Trust project链接并加载您的项目。
信任项目：在这种情况下，WebStorm 打开并加载一个项目。这意味着项目已初始化，项目的插件已解决，依赖项已添加，并且所有 WebStorm 功能都可用。
不要打开：在这种情况下，WebStorm 不会打开项目。
从项目安全中了解更多信息。
代码完成
WebStorm在 JavaScript 代码中为 React API 和JSX提供代码补全。代码完成适用于 React 方法、特定于 React 的属性、HTML 标签和组件名称、React 事件、组件属性等。从React 官方网站了解更多信息。
要获得 React 方法和特定于 React 的属性的代码完成，您需要在项目中的某个位置拥有 react.js 库文件。通常该库已经在您的node_modules文件夹中。
完整的 React 方法、属性和事件
默认情况下，代码完成弹出窗口会在您键入时自动显示。例如：
在 JSX 标签中，WebStorm 为特定于 React 的属性（例如classNameor classID）和非 DOM 属性（例如keyor ）提供编码帮助ref。此外，自动完成也适用于项目的 CSS 文件中定义的类的名称：
所有React 事件，例如onClickor onChange，也可以与花括号 ={}或引号一起自动完成""。
默认情况下，插入花括号。您可以让 WebStorm 始终添加引号或根据TypeScript 定义文件 (d.ts)中的类型在引号或大括号之间进行选择。要更改默认设置，请打开Settings/Preferences对话框 ( Ctrl+Alt+S)，转到并从Add for JSX 属性列表中选择适用的选项。
补全也适用于花括号内的 JavaScript 表达式。这适用于您定义的所有方法和函数：
完整的 HTML 标签和组件名称
WebStorm 为您在 JavaScript 方法或其他组件内部定义的 HTML 标记和组件名称提供代码完成：
补全也适用于具有 ES6 样式语法的导入组件：
完整的组件属性
WebStorm 为使用定义的组件属性提供代码完成propTypes并解析它们，以便您可以快速跳转或预览它们的定义：
当您自动完成组件的名称时，WebStorm 会自动添加其所有必需的属性。如果在使用组件时缺少某些必需的属性，WebStorm 会发出警告。
将 HTML 属性传输到 JSX
当您复制一段带有类属性或事件处理程序的 HTML 代码并将其粘贴到 JSX 中时，WebStorm 会自动将这些属性替换为特定于 React 的属性（className、onClick、onChange等）。
这也适用于 TSX：
要“按原样”将 HTML 代码复制到 JSX 或 TSX，请使用简单粘贴 Ctrl+Alt+Shift+V或打开设置/首选项对话框 ( Ctrl+Alt+S)，转到，并清除将 HTML 粘贴到 JSX 文件时转换属性复选框。
反应代码片段
WebStorm 包含 50 多个代码片段的集合，这些片段扩展为 React 应用程序中经常使用的不同语句和代码块。下面的示例展示了如何使用rcjc缩写来创建一个定义新 React 组件的类：
从片段创建 React 代码结构
在编辑器中输入所需的缩写，然后按Tab。
按下Ctrl+J并选择相关的片段。要缩小搜索范围，请开始输入缩写词，然后从完成列表中选择它。
有关详细信息，请参阅实时模板。
查看所有可用 React 片段的列表
在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，单击Editor下的Live Templates，然后展开React节点。
JSX 中的 Emmet
使用 WebStorm，您不仅可以在 HTML 中使用Emmet ，还可以在 JSX 代码中使用 Emmet，从而利用一些特殊的 React 扭曲。例如，缩写div.my-class在 JSX 中扩展为<div className=”my-class"></div>但不像<div class=”my-class"></div>在 HTML 中那样扩展：
浏览 React 应用程序
除了基本的导航之外，WebStorm 还可以帮助您在特定于 React 的代码元素之间跳转。
要跳转到大括号内的方法或 JavaScript 表达式的声明
{}，请选择方法或表达式并按Ctrl+B。要跳转到组件的声明，请选择组件名称并按Ctrl+B。
要查看组件定义，请按Ctrl+Shift+I。从查看定义了解更多信息。
要查看组件的快速文档，请按Ctrl+Q。从JavaScript 文档查找中了解更多信息。
Lint 一个 React 应用程序
所有针对 JavaScript 和 HTML 的 WebStorm 内置代码检查也适用于 JSX 代码。WebStorm 会在未使用的变量和函数、缺少结束标记、缺少语句等情况下提醒您。
对于某些检查，WebStorm 提供了快速修复，例如，建议添加缺失的方法。要查看快速修复弹出窗口，请按Alt+Enter。
要自定义检查列表，请打开设置/首选项对话框 ( Ctrl+Alt+S)，转到编辑器 | 检查，并禁用您不想看到的检查或更改其严重性级别。从禁用和启用检查和更改检查严重性中了解更多信息。
ESLint
除了提供内置的代码检查之外，WebStorm 还集成了用于 JSX 代码的 linter，例如ESLint 。ESLint 带来了广泛的 linting 规则，这些规则也可以通过插件进行扩展。WebStorm 在您键入时直接在编辑器中显示 ESLint 报告的警告和错误。使用 ESLint，您还可以使用JavaScript 标准样式以及lint 您的 TypeScript 代码。
有关详细信息，请参阅ESLint。
要让 ESLint 正确理解 React JSX 语法，您需要eslint-plugin-react。使用这个插件，你会被警告，例如，当没有为 React 组件设置显示名称时，或者当使用了一些危险的 JSX 属性时：
在 React 项目中安装和配置 ESLint
在内置终端（）中，输入：
npm install --save-dev eslint npm install --save-dev eslint-plugin-react将 ESLint 配置文件.eslintrc.*添加到您的项目中。这可以是.eslintrc、.eslintrc.json或.eslintrc.yaml文件，也可以是其他支持格式的文件，详情请参见ESLint 官网。
在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到Languages and Frameworks | JavaScript | 代码质量工具 | ESLint，然后选择自动 ESLint 配置。WebStorm 将自动在您的项目node_modules文件夹中找到 ESLint，然后使用来自.eslintrc.*文件或package.json
eslintConfig中的属性的默认配置。或者，选择手动 ESLint 配置以使用自定义 ESLint 包和配置。
有关详细信息，请参阅在 WebStorm 中激活和配置 ESLint。
.eslintrc 结构示例（带有反应插件的 ESLint 1.x）
在
ecmaFeatures对象中，添加"jsx" = true. 在这里，您还可以指定您想使用的其他语言特性，例如 ES6 类、模块等。在
plugins对象中，添加react.在
rules对象中，您可以列出您想要启用的 ESLint 内置规则，以及通过 react 插件可用的规则。{ "parser": "babel-eslint", "env": { "browser": true, "es6": true, "jest": true }, "rules": { "arrow-parens": ["error" , "按需", { "requireForBlockBody": true }], "react/jsx-props-no-spreading": "off", "react/jsx-sort-props": ["error", { "reservedFirst ": ["key"] }], "react/require-default-props": "off", "react/sort-prop-types": "error", "react/state-in-constructor": ["错误”，“从不”]，“半间距”：“警告”}，“覆盖”：[{“文件”：[“样本/**”，“test/**" ], "rules": { "import/no-unresolved": "off" } } ] }
从ESLint 官网了解更多关于 ESLint 和react插件配置的信息。
React 应用程序中的代码重构
除了常见的 WebStorm 重构之外，在 React 应用程序中，您还可以为 React 组件运行Rename并使用Extract Component创建新组件。
重命名组件
以下是重命名仅在一个文件中定义和使用的组件的示例：
同样，您可以重命名一个文件中定义的组件，然后使用命名导出将其导入另一个文件：
将插入符号放在组件名称中，然后按Shift+F6或选择从上下文菜单的主菜单中
指定符合React 命名约定的新组件名称。
重命名状态值
当您重命名状态值时，WebStorm 建议重命名相应的 setter（在React useState 挂钩中更新此状态值的函数）。
将插入符号放在状态值的名称中，然后按Shift+F6或选择从上下文菜单的主菜单中
指定新值名称并按Enter。焦点移动到建议值的新名称的设置器。按Enter接受建议。
提取组件
您可以通过从现有组件的 render 方法中提取 JSX 代码来创建新的 React 组件。新组件可以定义为函数，也可以定义为类，参见React 官网的函数和类组件。
选择要提取的代码并选择从上下文菜单中
或者，转到在主菜单上或按 并从弹出窗口中Ctrl+Alt+Shift+T选择提取组件。
在打开的对话框中，指定新组件的名称及其类型。默认情况下，会创建一个功能组件。如果要将新组件定义为类，请选择Class。
单击确定。新组件将在现有组件旁边定义并在其中使用。
可选：使用移动符号重构将新组件和所有必需的导入移动到单独的文件中。
可选：修改 WebStorm 用于新组件的代码模板。在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到，打开代码选项卡，并根据需要使用Apache Velocity 模板语言更新模板。
将函数转换为类组件
通过Convert to Class Component重构，WebStorm 生成一个 ES6 类，其名称为您要转换的函数的名称。此类扩展React .Component并包含render()移动函数体的方法。从React 官方网站了解更多信息。
将插入符号放在要转换的函数内的任何位置并选择从主菜单或上下文菜单
或者，按下并从弹出窗口中Ctrl+Alt+Shift+T选择转换为类组件。
将类转换为功能组件
通过Convert to Functional Component重构，WebStorm 生成一个带有您要转换的类名称的函数，并将render()方法的内容移动到函数体。
将插入符号放在类内的任意位置以进行转换并选择从主菜单或上下文菜单
或者，按下并从弹出窗口中Ctrl+Alt+Shift+T选择转换为功能组件。
React 应用程序中的解构
解构使您可以轻松地将值从数组和对象解包到变量中。此功能具有非常简洁的语法，通常在您需要在应用程序中传递数据时使用。
使用 React 类组件时，请考虑使用Introduce object/array destructuring intent 操作。从JavaScript 中的解构中了解更多信息。
运行和调试 React 应用程序
开始构建新的 React 单页应用程序的推荐方法是Create React App。只有在这种情况下，您的开发环境才被预先配置为使用 webpack 和 Babel。否则，您需要先配置构建管道。
对于使用上述Create React App 创建的应用程序，WebStorm 使用默认设置生成两个运行/调试配置：
具有默认名称npm start的npm 配置。此配置运行启动开发服务器并以开发模式启动应用程序的命令。
npm start默认名称为Debug Application的JavaScript 调试配置。此配置启动调试会话。
运行一个 React 应用程序
从工具栏上的列表中选择npm start run 配置，然后单击
列表旁边的。或者，
npm start在终端 Alt+F12中运行或双击npm 工具窗口start中的任务（）。等到应用程序编译完成并且 Webpack 开发服务器准备就绪。
运行工具窗口或终端显示应用程序运行的 URL，默认为http ://localhost:3000/。单击此链接以查看应用程序。
调试 React 应用程序
您可以根据应用程序的运行位置以不同的方式启动调试会话。
调试在 localhost 上运行的应用程序
在代码中设置断点。
如上所述以开发模式启动应用程序，并等待应用程序编译完成并且 Webpack 开发服务器准备就绪。
运行工具窗口或终端显示应用程序运行的 URL，默认为http ://localhost:3000/。按住Ctrl+Shift并单击此 URL 链接。WebStorm 使用自动生成的JavaScript Debug类型的调试应用程序配置启动调试会话。
调试在自定义 URL 上运行的应用程序
在代码中设置断点。
如上所述以开发模式启动应用程序，并等待应用程序编译完成并且 Webpack 开发服务器准备就绪。
运行工具窗口或终端显示应用程序正在运行的URL。复制此 URL 地址，稍后您将在调试配置中指定它。要查看您的应用程序，只需单击链接。
创建一个JavaScript 调试配置。为此，请转到，单击，然后从列表中
选择JavaScript 调试。在“运行/调试配置：JavaScript 调试”对话框中，将保存的 URL 粘贴到URL字段中并保存配置。要启动新创建的配置，请从配置列表中选择它，然后单击
列表旁边的。
当第一个断点被命中时，切换到调试工具窗口并像往常一样继续：单步执行程序， 停止和恢复程序执行，暂停时检查它，探索调用堆栈和变量，设置监视，评估变量，查看实际 HTML DOM等等。
构建一个 React 应用程序
如果您在现有的 WebStorm 项目中安装了 React，则需要设置构建过程。从React 官方网站了解为您的 React 应用程序配置构建管道的各种方法。
测试一个 React 应用程序
您可以在使用 create-react-app 创建的React 应用程序中运行和调试Jest 测试。在开始之前，请确保将react-scripts包添加到package.json的依赖项对象中。
您可以直接从编辑器、项目工具窗口或通过运行/调试配置运行和调试 Jest 测试，请参阅Jest了解详细信息。
从编辑器运行测试
单击装订线中的
或
，然后从列表中选择运行 <test_name>。
借助测试状态图标
和
装订线，您还可以直接在编辑器中查看测试是通过还是失败。
创建 Jest 运行/调试配置
打开Run/Debug Configuration对话框（主菜单上的
），单击左侧窗格，然后从列表中选择Jest 。运行/调试配置：Jest对话框打开。指定要使用的节点解释器和应用程序的工作目录。默认情况下，工作目录字段显示项目根文件夹。要更改此预定义设置，请指定所需文件夹的路径或从列表中选择以前使用的文件夹。
在Jest 包字段中，指定react-scripts包的路径。
在Jest 选项字段中，键入
--env=jsdom。
运行测试
从主工具栏的列表中选择 Jest 运行/调试配置，然后单击
列表右侧的 。
测试服务器自动启动，无需您执行任何步骤。在运行工具窗口中查看和分析来自测试服务器的消息。
在“运行”工具窗口的“测试运行器”选项卡中监视测试执行并分析测试结果，有关详细信息，请参阅探索测试结果。
调试测试
从主工具栏的列表中选择 Jest 运行/调试配置，然后单击
列表右侧的 。在打开的调试工具窗口中，照常进行：逐步执行测试、 停止和恢复测试执行、暂停时检查测试、在控制台中运行 JavaScript 代码片段，等等。
已知限制
当您第一次在调试会话期间打开应用程序时，可能会发生在页面加载时执行的代码中的某些断点未命中的情况。原因是为了在原始源代码中的断点处停止，WebStorm 需要从浏览器获取源映射。但是，只有在页面至少完全加载一次后，浏览器才能传递这些源映射。作为一种解决方法，请自行在浏览器中重新加载页面。