React
React 是一个用于从封装组件构建复杂交互用户界面的 JavaScript 库。 了解更多有关该库的信息，请访问 React 官方网站。
JetBrains Rider 集成了 React，提供配置、编辑、linting、运行、调试和维护您的应用程序的帮助。
在开始之前
请确保您的计算机上安装了 Node.js。
确保 JavaScript and TypeScript和 JavaScript Debugger必需插件在 设置 | 插件 页面上的 已安装 选项卡中被启用。 如需了解更多信息，请参阅 管理插件。
按照 从 JetBrains Marketplace 安装插件 中的描述，在 设置 | 插件 页面，选项卡 Marketplace 上安装 React 和 Vite 插件。
从现有的 React 应用程序开始
要继续开发现有的 React 应用程序，请在 JetBrains Rider 中打开并下载所需的依赖项。
打开您机器上已有的应用程序源代码
点击 打开 屏幕上的 欢迎 或从主菜单中选择 。 在打开的对话框中，选择存储源文件的文件夹。
从您的版本控制中检出应用程序源代码
在 欢迎 屏幕上单击 克隆仓库克隆
或者，从主菜单中选择 或 。
您可能会看到与您的项目相关联的其他版本控制系统，而不是在主菜单中的 Git。 例如， Mercurial 或 Perforce。
在打开的对话框中，从列表中选择您的版本控制系统，并指定要从中检出的应用程序源代码的存储库。 如需了解更多信息，请参见 Check out a project (clone)。
下载依赖项
请点击 运行 'npm install' 或 运行 'yarn install' 在弹出窗口中：
您可以使用 npm、 Yarn 1 或 Yarn 2 ，详情请参阅 npm 和 Yarn。
或者，从编辑器或 资源管理器 工具窗口 Alt+1 的 package.json 上下文菜单中选择 运行 'npm install' 或 运行 'yarn install'。
项目安全性
当您打开一个在 JetBrains Rider 之外创建并导入到 JetBrains Rider 的项目时，JetBrains Rider 会显示一个对话框，您可以在其中决定如何处理这个具有不熟悉源代码的项目。
请选择以下选项之一：
在安全模式下预览 ：在这种情况下，JetBrains Rider 以预览模式打开项目。 这意味着您可以浏览项目的源代码，但不能运行任务和脚本或运行/调试您的项目。
JetBrains Rider 会在编辑器区域顶部显示一条通知，您可以随时点击 信任项目… 链接并加载您的项目。
信任项目 ：在这种情况下，JetBrains Rider 会打开并加载一个项目。 这意味着项目已经初始化，项目的插件已解析，依赖项已添加，并且所有 JetBrains Rider 功能都可用。
请勿打开 ：在这种情况下，JetBrains Rider 不会打开项目。
代码补全
JetBrains Rider 为 JavaScript 代码中的 React APIs 和 JSX 提供代码补全。 代码补全适用于 React 方法、React 特定属性、HTML 标签和组件名称、 React events 、组件属性等。 请访问 React 官方网站了解更多信息。
要获得 React 方法和 React 特定属性的代码补全，您需要在项目中的某个地方包含 react.js 库文件。 通常库已经在您的 node_modules 文件夹中。
完整的 React 方法、属性和事件
默认情况下，代码补全弹窗会在您输入时自动显示。 例如：
在 JSX 标签中，JetBrains Rider 为 特定于 React 的属性 （例如 className 或 classID ）以及 非 DOM 属性 （例如 key 或 ref ）提供编码辅助。 此外，自动完成功能还适用于项目的 CSS 文件中定义的类名：
所有 React 事件 ，例如 onClick 或 onChange ，也可以在一起完成的大括号  ={} 或引号 ""。
默认情况下，会插入花括号。 您可以让 JetBrains Rider 始终添加引号，或根据 TypeScript definition file (d.ts) 的类型在引号和花括号之间选择。 要更改默认设置，请打开 设置/首选项 对话框（Ctrl+Alt+S ），转到 并从 为 JSX 属性添加 列表中选择适用的选项。
代码补全同样适用于大括号内的 JavaScript 表达式。 这适用于您定义的所有方法和函数：
完成 HTML 标签和组件名称
JetBrains Rider 为 HTML 标签和 JavaScript 方法或其他组件中定义的组件名称提供代码补全：
补全同样适用于使用 ES6 风格语法导入的组件：
完成组件属性
JetBrains Rider 为使用 propTypes 定义的组件属性提供代码补全，并解析它们，这样您就可以快速跳转或预览它们的定义：
当您自动完成组件的名称时，JetBrains Rider 会自动添加它的所有必需属性。 如果某个组件的使用中缺少一些必需的属性，JetBrains Rider 会提醒您。
将 HTML 属性转移到 JSX
当您复制带有类属性或事件处理程序的 HTML 代码并将其粘贴到 JSX 中时，JetBrains Rider 会自动将这些属性替换为特定于 React 的属性（className、 onClick、 onChange 等）。
这也适用于 TSX：
当您将包含单标签的 HTML 代码片段复制并粘贴到 JSX 中时，JetBrains Rider 会在每个单标签的末尾自动添加斜杠 /。
要将 HTML 代码按原样复制到 JSX 或 TSX，请使用 Paste Simple Ctrl+Alt+Shift+V 或打开 设置/首选项 对话框（Ctrl+Alt+S ），转到 设置页面并清除 将代码粘贴到 JSX 文件时关闭 HTML 单一标记 和 粘贴到 JSX 文件时转换 HTML 属性名称 复选框。
React 代码片段
JetBrains Rider 带有超过 50 个代码片段的集合，这些片段扩展为 React 应用中常用的不同语句和代码块，包括 React Hooks。 下面的示例展示了如何使用 rcjc 缩写创建一个定义新 React 组件的类：
从代码片段创建一个 React 代码结构
请在编辑器中输入所需的缩写并按下 Tab。
按 Ctrl+J 并选择相关的代码片段。 为了缩小搜索作用域，开始输入缩写，然后从 补全列表中选择。
如需更多信息，请参阅 实时模板。
查看所有可用的 React 代码片段列表
在 设置/首选项 对话框 (Ctrl+Alt+S) 中，点击 活动模板 下的 编辑器 ，然后展开 React 或 React hooks 节点。
JSX 中的 Emmet
通过 JetBrains Rider，您不仅可以在 HTML 中使用 Emmet ，还可以在 JSX 代码中利用一些特别的 React 变体进行使用。 例如，缩写 div.my-class 在 JSX 中扩展为 <div className=”my-class"></div> ，但不会像在 HTML 中那样扩展为 <div class=”my-class"></div>：
浏览 React 应用程序
除了 基本导航之外，JetBrains Rider 还能帮助您在 React 特定的代码元素之间跳转。
要跳转到方法的声明或大括号内的 JavaScript 表达式
{}，请选择方法或表达式并按 Ctrl+B。要跳转到组件声明，选中组件名称并按下 Ctrl+B。
若要查看组件定义，请按 Ctrl+Shift+I。
要查看组件的快速文档，请按 Ctrl+Q。
检查 React 应用程序
所有 JetBrains Rider 内置的 代码检查 也适用于 JSX 代码中的 JavaScript 和 HTML。 JetBrains Rider 会提醒您未使用的变量和函数、缺少的关闭标签、缺少的语句等。
对于某些检查，JetBrains Rider 提供快速修复，例如，建议添加缺失的方法。 若要查看 quick-fix 弹出窗口，请按 Alt+Enter。
要自定义检查列表，请打开 设置/首选项 对话框（Ctrl+Alt+S ），转到 Editor | Inspection Settings，并禁用您不想看到的检查或更改其严重级别。
ESLint
除了提供内置代码检查之外，JetBrains Rider 还与 ESLint 等 linter 集成，用于 JSX 代码。 ESLint 带来了一系列广泛的代码检查规则，这些规则也可以通过插件进行扩展。 JetBrains Rider 在编辑器中直接显示 ESLint 报告的警告和错误，实时更新。 使用 ESLint，您还可以使用 JavaScript Standard Style 并 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 配置文件 添加到您的项目中。
在 设置/首选项 对话框（Ctrl+Alt+S ）中，进入 语言与框架 | JavaScript | 代码质量工具 | ESLint ，然后选择 自动 ESLint 配置。 JetBrains Rider 会自动在您的项目 node_modules 文件夹中定位 ESLint，然后从 .eslintrc.* 文件或 package.json 中的
eslintConfig属性使用默认配置。或者，选择 手动 ESLint 配置 使用自定义 ESLint 程序包和配置。
请参见 在 JetBrains Rider 中激活和配置 ESLint 了解详细信息。
ESLint 1.x 版本与 react 插件的 .eslintrc 结构示例
在
ecmaFeatures对象中，添加"jsx" = true。 在这里，您还可以指定想要使用的其他语言功能，例如，ES6 classes、modules等。在
和简单对象中，添加react。在
规则对象中，您可以列出希望启用的 ESLint 内置规则以及 通过 react 插件提供的规则。{ "parser": "babel-eslint", "env": { "browser": true, "es6": true, "jest": true }, "rules": { "arrow-parens": ["error", "as-needed", { "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": ["error", "never"], "semi-spacing": "warn" }, "overrides": [ { "files": [ "sample/**", "test/**" ], "rules": { "import/no-unresolved": "off" } } ] }
了解更多关于 ESLint 和 react 插件配置的信息，请访问 ESLint 官方网站。
在 React 应用中的代码重构
除了 常见的 JetBrains Rider 重构 ，您还可以在 React 应用程序中运行 重命名 React 组件并使用 提取组件 创建新组件。
重命名组件
下面是重命名仅在一个文件中定义和使用的组件的示例：
同样地，您可以重命名在一个文件中定义并使用命名导出导入到另一个文件的组件：
将光标放在组件名称内并按 Shift+F6 或从上下文菜单中选择 。
请指定符合 React 命名规范的新组件名称。
重命名状态值
当您重命名状态值时，JetBrains Rider 会建议您重命名相应的 setter（此函数在 React useState hook 中更新该状态值）。
将文本光标置于状态值的名称内，然后按 Shift+F6 或从主菜单或上下文菜单中选择 。
请指定新的值名称并按 Enter。 焦点移动到 setter，其中建议了该值的新名称。 请按 Enter 以接受建议。
提取组件
您可以通过从现有组件的 render 方法中提取 JSX 代码来创建一个新的 React 组件。 新组件可以定义为函数或类，请参阅 React 官方网站上的 Function and Class Components。
请选择您要提取的代码，然后从上下文菜单中选择 。
或者，前往主菜单中的 或按下 Ctrl+Alt+Shift+T 并从弹出窗口中选择 提取组件。
在打开的对话框中，指定新组件的名称及其类型。 默认情况下，将创建一个函数组件。 如果您想将新组件定义为类，请选择 类。
点击 确定。 新的组件将被定义在现有组件旁边并在其中使用。
可选：使用 Move Symbol refactoring将新组件和所有必需的导入移动到一个单独的文件。
可选：修改 JetBrains Rider 用于新组件的代码模板。 在 设置/首选项 对话框中(Ctrl+Alt+S )，转到 ，打开 代码 选项卡，并使用 Apache Velocity 模板语言根据需要更新模板。
将函数转换为类组件
通过 Convert to Class Component重构，JetBrains Rider 生成一个具有您想要转换的函数名称的 ES6 类。 该类扩展了 React .Component ，并包含一个 render() 方法，其中函数体被移动。 从 React 官方网站 了解更多信息。
将文本光标放置在要转换的函数内的任意位置，然后从主菜单或上下文菜单中选择 。
或者，按 Ctrl+Alt+Shift+T 并从弹出窗口中选择 转换为类组件。
将类转换为函数组件
使用 Convert to Functional Component 重构，JetBrains Rider 会生成一个具有您要转换的类名的函数，并将 render() 方法的内容移至函数体。
将文本光标置于要转换的类中的任意位置，然后选择主菜单或上下文菜单中的 。
或者，按 Ctrl+Alt+Shift+T 并从弹出窗口中选择 转换为函数组件。
在 React 应用中的解构
解构让您可以轻松地将数组和对象中的值解包到变量中。 此功能具有非常简洁的语法，通常在需要在您的应用程序中传递数据时使用。
在使用 React 类组件时，考虑使用 Introduce object/array destructuring 意图操作。 了解更多关于 JavaScript 解构的信息。
运行 React 应用程序
在 package.json 中
start脚本旁边的边距点击
，或在 终端 Alt+F12 中执行 npm run start命令，或双击start任务在 npm 工具窗口 ()。
等待应用程序编译完成并且开发服务器准备就绪。
运行 工具窗口或 终端 显示您的应用程序正在运行的 URL。 如果您的应用是使用 create-react-app 生成的，那么默认的 URL 是 http://localhost:3000/ 。 点击此链接查看应用程序。
通过运行/调试配置运行 React 应用程序
对于使用 create-vite 创建的应用程序，JetBrains Rider 会生成一个 npm 配置。 此配置运行 react-scripts start 命令，用于启动开发服务器并在开发模式下启动您的应用程序。
在其他情况下，您需要手动 创建一个运行/调试配置 ，并设置实际的参数，如主机、端口等。
创建一个 npm 运行/调试配置
转到 。 或者，从工具栏的 运行 小部件中选择 编辑配置。
在打开的 编辑配置 对话框中，点击工具栏上的 添加 按钮（
），然后从列表中选择 npm。在弹出的 配置 选项卡 运行/调试 配置：npm 对话框中，指定 package.json 的位置、Node.js 解释器及要使用的软件包管理器。
在 命令 字段中，从列表中选择 run ，然后从 脚本 列表中选择要运行的脚本。 很可能它将是默认的
start脚本，但您可以在您的 package.json 中配置另一个脚本，例如，在自定义端口上运行应用程序。
可选：
要在浏览器中打开应用程序，请按照以下步骤更新配置：在 Browser / Live Edit 选项卡中，选中 启动后 复选框，选择要在其中打开应用程序的浏览器，并指定应用程序将运行的 URL 地址。
如果您要调试应用程序，请选择 Google Chrome 或另一个 Chromium-based browser。
运行应用程序
从工具栏的列表中选择 npm start 运行配置，然后点击其旁边的
。
等待应用程序编译完成并且开发服务器准备就绪。
运行 工具窗口或 终端 显示您的应用程序正在运行的 URL。 点击此链接查看应用程序。
或者，启用 JetBrains Rider 以在启动时打开应用程序 如上所述。
调试 React 应用程序
您可以通过 启动运行/调试配置或 从运行工具窗口 ，该窗口显示您的应用程序在开发模式下运行的 URL，开始调试会话。
通过运行/调试配置开始调试
要调试您的 React 应用程序，您需要两个运行/调试配置：
在开发模式下启动应用程序的 npm 配置， 如上所述。
开发模式下附加调试器到正在运行的应用程序的 JavaScript 调试 配置。
您可以在 JavaScript 调试 配置中创建一个 npm 配置，以便一次启动它们，如 使用 npm 运行/调试配置运行和调试 React 应用程序中所述。
或者，分别创建并启动 npm 和 JavaScript 调试 运行/调试配置，如 使用 JavaScript 调试运行/调试配置开始调试 中所述。
使用单个 npm run/debug 配置运行和调试 React 应用程序
在您的代码中设置 breakpoints。
创建一个 npm 配置 如上所述。
如果您使用
create-react-app生成了应用程序，JetBrains Rider 已经使用默认名称 npm start 创建了一个 npm 配置。 此配置可通过 运行 小部件或 运行/调试配置 对话框获得。在弹出的 配置 选项卡 运行/调试 配置：npm 对话框中，指定 package.json 的位置、Node.js 解释器及要使用的软件包管理器。
在 命令 字段中，从列表中选择 run ，然后从 脚本 列表中选择要运行的脚本。 很可能它将是默认的
start脚本，但您可以在您的 package.json 中配置另一个脚本，例如，在自定义端口上运行应用程序。在 浏览器 / 实时编辑 选项卡中，选中 启动后 复选框，从列表中选择 Google Chrome 或其他 Chromium-based browser ，选中 使用 JavaScript 调试器 复选框，然后指定您的应用程序将运行的 URL。
点击 运行。
要重新运行配置，请从 运行 小部件中的列表中选择，然后点击其旁边的
。JetBrains Rider 在开发模式下运行应用程序，同时启动调试会话。
当第一个断点被命中时，切换到 调试窗口 并像往常一样继续： 逐步执行程序， 停止和恢复程序执行， 在暂停时检查程序 ，探索调用堆栈和变量，设置监视，评估变量， 查看实际的 HTML DOM ，等等。
使用 JavaScript Debug 运行/调试配置开始调试
在您的代码中设置 breakpoints。
启动应用程序的开发模式 ，如上所述 ，并等待应用程序编译完成以及开发服务器就绪。
运行 工具窗口或 终端 显示您的应用程序正在运行的 URL。 请复制此 URL 到 稍后在 JavaScript Debug 配置中指定。
创建一个 JavaScript 调试 配置。 要执行此操作，请在主菜单中转到 ，点击
，然后从列表中选择 Javascript 调试。在打开的 运行/调试配置：JavaScript Debug 对话框中，指定配置的名称以及应用程序在开发模式下运行的 URL 地址。 您可以在 运行 工具窗口或 终端 中复制此 URL， 如上所述。
点击 调试。
要重新运行配置，请从 运行 小部件中的列表中选择，然后点击其旁边的
。
当第一个断点被命中时，切换到 调试窗口 并像往常一样继续： 逐步执行程序， 停止和恢复程序执行， 在暂停时检查程序 ，探索调用堆栈和变量，设置监视，评估变量， 查看实际的 HTML DOM ，等等。
从 Run 工具窗口或内置 Terminal 开始调试
如果您的应用程序正在 本地主机 上运行开发模式，特别是如果它是用 create-react-app 生成的，您可以直接从 运行 工具窗口或内置的 终端 启动调试会话。
在您的代码中设置 breakpoints。
启动应用程序的开发模式 ，如上所述 ，并等待应用程序编译完成以及开发服务器就绪。
运行 工具窗口或 终端 显示您的应用程序正在运行的 URL。 按住 Ctrl+Shift 并点击此 URL 链接。 JetBrains Rider 启动带有 类型 JavaScript Debug的自动生成配置的调试会话。
如果您从 New Terminal 以开发模式启动了应用程序，您只需点击链接旁边的 在浏览器中启动调试 按钮即可。
当第一个断点被命中时，切换到 调试窗口 并像往常一样继续： 逐步执行程序， 停止和恢复程序执行， 在暂停时检查程序 ，探索调用堆栈和变量，设置监视，评估变量， 查看实际的 HTML DOM ，等等。
测试 React 应用程序
您可以在 使用 create-vite 创建的 React 应用程序中运行和调试 Jest 测试。 在开始之前，请确保 react-scripts 包已添加到您的 dependencies 对象中 package.json 。
您可以直接从编辑器、 项目 工具窗口或者通过运行/调试配置来运行和调试 Jest 测试。 更多信息请参阅 Jest。
从编辑器运行测试
点击装订区域中的
或 
，并从列表中选择 运行 <test_name>。
您还可以在编辑器中直接查看测试是否通过或失败，这要归功于 测试状态 图标
和 
。
创建 Jest 运行/调试配置
打开 运行/调试配置对话框（ 在主菜单中），点击
在左侧窗格中，然后从列表中选择 Jest。 “ 运行/调试配置：Jest” 对话框打开。指定要使用的 Node 解释器和应用程序的工作目录。 默认情况下， 工作目录 字段显示项目根文件夹。 若要更改此预定义设置，请指定所需文件夹的路径。
在 Jest 包 字段中，指定 react-scripts包的路径。
在 Jest 选项 字段中，输入
--env=jsdom。
运行测试
从配置列表中选择 Jest 运行/调试配置，并点击
。在 测试运行器 选项卡的 运行 工具窗口中监控测试执行并分析测试结果。 如需更多信息，请参阅 探索测试结果。
调试测试
从主工具栏的列表中选择 Jest 运行/调试配置，并点击右侧的
 。在打开的 调试窗口 中，按常规操作： 逐步执行程序， 停止并恢复 程序执行， 在挂起时检查程序 ，探索调用堆栈和变量，设置监视，评估变量， 查看实际 HTML DOM 等。
已知限制
当您在调试会话期间第一次打开应用程序时，可能会发生代码在页面加载时执行的一些断点未被触发。 原因是若要在原始源代码中停在断点处，JetBrains Rider 需要从浏览器中获取 source maps。 然而，浏览器只能在页面至少完全加载一次后才能传递这些 source maps。 作为一种解决方法，您可以自己在浏览器中重新加载该页面。
网络研讨会录制：React + TypeScript + TDD 在 Rider 中
您还可以观看此网络研讨会录制，其中 Paul Everitt 展示了在 Rider 中使用 TypeScript 进行 React 项目的一些关键步骤。
网络研讨会议程：
2:00 – 项目设置
10:10 – ASP.NET Core 项目中的 React
14:57 – 项目清理
22:42 – 测试
37:26 – 测试期间调试
43:35 – 使用浏览器调试
54:26 – 剩余部分概览
资源:
12 部分教程 ，此网络研讨会基于此
ASP.NET Core SPA 开发体验 – 关于网络研讨会中讨论的 ASP.NET Core 模板的信息
在一个项目中使用多个框架
有时，您可能需要在一个 React 项目中使用其他框架。
要在每个文件中获得上下文感知的编码辅助，请创建一个配置文件 .ws-context ，并指定每个特定文件或文件夹应使用的框架。 此文件中的设置将覆盖默认配置。
在项目根目录中，从上下文菜单中选择 新建文件 并将文件名指定为
.ws-context。在
.ws-context中，使用两种属性：<context-name>带有上下文值字符串具有上下文详情对象的 GLOB 模式
使用以下上下文值：
框架：vue、angular、react、svelte、astroangular 模板语法：V_2V_17nextjs 项目：nextjsastro 项目：astrovue 存储：vuexpiniavue 类组件库：vue 类组件、vue -property-decorator、vue 面向装饰器jsdoc 方言：jsdoc typescriptjsdoc 闭包
使用路径嵌套以简化操作。
GLOB 路径的最后一段是文件名模式，它仅支持
*通配符。如果最后一个段是一个
**，它匹配所有嵌套的目录和文件。顶层上下文属性应具有
/**模式。
当多个模式匹配相同文件名时，将使用以下规则进行消歧：
选择路径段数最多的模式，排除
**段。选择纯文件名模式，这意味着它不会以
**或/结尾。选择最先定义的模式。
示例
假设您有一个项目，其中在各个文件夹中使用了多个框架。
要为项目中的每个文件获得上下文相关的帮助，请将以下代码添加到 .ws-context: