专业的

反应支持

1. 单击欢迎屏幕上的创建新项目或选择 文件| 新 | 从主菜单进行项目。“新建项目”对话框打开。

2. 在左侧窗格中，选择React。

3. 在右侧窗格中：

   1. 指定将存储项目相关文件的文件夹的路径。

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

   3. 从create-react-app列表中，选择npx create-react-app。

      或者，对于 npm 版本 5.1 及更早版本，您可以create-react-app通过npm install --g create-react-app在Terminal 中运行来自行安装软件包。创建应用程序时，选择存储包的文件夹。AltF12create-react-app

   4. 可选：

      要使用 TSX 而不是 JSX，请选中“创建 TypeScript 项目”复选框。PyCharm 将为您的应用程序生成.tsx文件和tsconfig.json 配置文件。

4. 当您单击Create时，PyCharm 会生成一个特定于React 的项目，其中包含所有必需的配置文件并下载所需的依赖项。PyCharm 还使用默认设置创建npm start和JavaScript 调试配置，用于运行或调试应用程序。

提示

或者，打开内置终端并输入：

1. npx create-react-app <application-name>创建一个应用程序。

2. cd <application-name>切换到应用程序文件夹。

3. npm start启动 Node.js 服务器。

创建一个空的 PyCharm 项目

1. 单击欢迎屏幕上的创建新项目或选择 文件| 新 | 从主菜单进行项目。“新建项目”对话框打开。

2. 在左侧窗格中，选择“空项目”。在右侧窗格中，指定应用程序文件夹并单击“创建”。

在空项目中安装 React

1. 打开您将在其中使用React 的空项目。

2. 在嵌入式终端( ) 中，键入：AltF12

   npm install --save react react-dom

在 React 项目中安装和配置 ESLint

1. 在内置终端（视图 | 工具窗口 | 终端）中，键入：

   npm install --save-dev eslint
   npm install --save-dev eslint-plugin-react

2. 将 ESLint 配置文件.eslintrc.*添加到您的项目中。这可以是.eslintrc、.eslintrc.json或.eslintrc.yaml文件，也可以是其他受支持格式的文件。更多信息请参考ESLint 官网。

3. 在“设置”对话框 ( ) 中，转至语言和框架 | JavaScript | 代码质量工具| ESLint，然后选择自动 ESLint 配置。PyCharm 将自动在项目的node_modules文件夹中找到 ESLint，然后使用.eslintrc.*文件或package.json中的属性中的默认配置。CtrlAlt0SeslintConfig

   或者，选择手动 ESLint 配置以使用自定义 ESLint 包和配置。

   有关详细信息，请参阅在 PyCharm 中激活和配置 ESLint。

.eslintrc 结构示例（带有 React 插件的 ESLint 1.x）

1. 在ecmaFeatures对象中，添加"jsx" = true. 您还可以在此处指定要使用的其他语言功能，例如 ES6 类、模块等。

2. 在plugins对象中，添加react.

3. 在该rules对象中，您可以列出要启用的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"
         }
       }
     ]
   }

react从ESLint 官方网站了解有关 ESLint 和插件配置的更多信息。

1. 将插入符号放在组件名称中，然后按或选择Refactor | 从主菜单或上下文菜单重命名。ShiftF6

2. 按照React 命名约定指定新组件名称。

1. 将插入符号放在状态值的名称内，然后按或选择Refactor | 从主菜单或上下文菜单重命名。ShiftF6

2. 指定新值名称并按。焦点移动到建议值的新名称的设置器。按接受建议。EnterEnter

1. 选择要提取的代码并选择Refactor | 从上下文菜单中提取组件。

   或者，转到重构 | 摘录/介绍 | 主菜单上的“提取组件”或按 并从弹出窗口中选择“提取组件” 。CtrlAltShift0T

2. 在打开的对话框中，指定新组件的名称及其类型。默认情况下，会创建一个功能组件。如果要将新组件定义为类，请选择Class。

3. 单击“确定”。新组件将在现有组件旁边定义并在其中使用。

4. 可选：使用移动符号重构将新组件和所有必需的导入移动到单独的文件中。

5. 可选：修改 PyCharm 用于新组件的代码模板。在“设置”对话框 ( ) 中，转到编辑器 | 文件和代码模板，打开代码选项卡，并根据需要使用Apache Velocity 模板语言更新模板。CtrlAlt0S

• 将插入符号放在要转换的函数内的任意位置，然后选择Refactor | 从主菜单或上下文菜单转换为类组件。

• 或者，按并从弹出窗口中选择转换为类组件。CtrlAltShift0T

• 将插入符号放置在要转换的类中的任意位置，然后选择“Refactor |” 从主菜单或上下文菜单转换为功能组件。

• 或者，按并从弹出窗口中选择转换为功能组件。CtrlAltShift0T

1. 从工具栏上的列表中选择npm start运行配置，然后单击列表旁边的 。

   或者，npm start在终端 中运行或双击npm 工具窗口( View | Tool Windows | npm )中的任务。AltF12start

2. 等待应用程序编译完成并且 Webpack 开发服务器准备就绪。

   运行工具窗口或终端显示应用程序运行的 URL，默认情况下为http ://localhost:3000 /。单击此链接可查看该应用程序。

   

1. 在代码中设置断点。

2. 如上所述以开发模式启动应用程序，并等待应用程序编译完毕且开发服务器准备就绪。

3. 从列表中选择自动生成的调试应用程序配置，然后单击列表旁边的 。

   

   动图

调试在本地主机上运行的应用程序

1. 在代码中设置断点。

2. 如上所述以开发模式启动应用程序，并等待应用程序编译完毕且 Webpack 开发服务器准备就绪。

3. 运行工具窗口或终端显示应用程序运行的 URL，默认情况下为http ://localhost:3000 /。按住并单击此 URL 链接。PyCharm 使用自动生成的JavaScript 调试类型的调试应用程序配置启动调试会话。CtrlShift

   

   动图

调试在自定义 URL 上运行的应用程序

1. 在代码中设置断点。

2. 如上所述以开发模式启动应用程序，并等待应用程序编译完毕且 Webpack 开发服务器准备就绪。

3. 运行工具窗口或终端显示应用程序正在运行的URL。复制此 URL 地址，稍后您将在调试配置中指定它。要查看您的申请，只需单击链接即可。

4. 创建JavaScript 调试配置。为此，请转到“运行”|“ 在主菜单上的“编辑配置” ，单击，然后从列表中选择“JavaScript 调试” 。在“运行/调试配置：JavaScript 调试”对话框中，将保存的 URL 粘贴到URL字段中并保存配置。

5. 要启动新创建的配置，请从配置列表中选择它，然后单击列表旁边的 。