ReExt入门指南：从零开始

ReExt是由 Sencha 开发的一个 React 库，它允许你在 React 应用中使用 Ext JS 组件。它利用你现有的 Ext JS 知识，以原生 React 语法集成数据驱动型组件。本指南将解释组件语法，提供分步设置环境的说明，并介绍高级配置选项。

理解 ReExt 组件语法

ReExt 使用熟悉的 Ext JS 属性，同时采用 React 语法。以下是您需要了解的内容：

• X型： 此属性指定 Ext JS 组件的类型（例如，按钮或网格）。
  
• 配置： 此属性是一个对象，用于定义所选 X 类型可用的属性，例如文本、宽度、列或存储。这些配置可以由 React 的虚拟 DOM 动态管理。
  
• 事件： 事件名称以“on”开头，后跟一个大写字母（例如，onClick或onTap）。事件签名与 Ext JS 中的类似。
  
• 准备好： 这个特殊事件允许你将 React 代码链接到底层的 Ext JS 组件。组件构建完成后，你会收到一个对象 ( cmp )，你可以使用该对象调用方法或将其与你的状态管理集成。 ReExt 还允许您直接在 React 环境中公开任何自定义的 Ext JS X 类型。
  

快速入门：构建您的第一个ReExt应用程序

请按照以下步骤创建您的第一个 ReExt 应用程序：

1. 创建一个 React 应用程序： 使用Vite之类的工具创建一个初始项目。在终端中运行以下命令：
   npm create vite@latest <项目名称> --template react
   
2. 安装 ReExt： 导航至您的项目目录并安装 ReExt 包： npm install @sencha/ext-react
   安装应用程序：
   复制示例代码文件（例如vite.config.js中的修改、 main.jsx中的初始代码以及app.jsx中的示例组件）。
   请确保已正确配置main.jsx作为应用程序的入口点。
   

利用 ReExt 提供商进行环境管理

ReExtProvider组件封装了您的主应用程序，以启用全局 ReExt 功能。在您的main.jsx 文件中：

• 初始化： 当您启动应用程序时（例如，使用npx vite或npx vite-open），ReExt 会自动指向底层 Ext JS 文件的内容分发网络。
  
• 试用版： 初始状态下可能会出现试用对话框。要禁用此功能，请通过在线表单申请试用密钥并将其插入 ReExtProvider 中。您也可以通过将splash属性设置为false来禁用启动画面。
  

试用密钥和本地 SDK 集成

如果您需要本地生产版本，请按照以下步骤操作：

1. 下载SDK： 从 Sencha 支持门户获取 Ext JS SDK（以及任何高级插件）。
   
2. 将 SDK 添加到您的项目中： 将解压缩后的 SDK 文件夹（例如ext-7.9.0）复制到项目的公共文件夹中。
   
3. 调整配置： 编辑main.jsx中的ReExtProvider：
   修改ReExtData对象，将位置从“remote”更改为“local”。
   此项更改可确保您的应用程序使用本地版本的 Ext JS，从而提高性能并消除试用水印。
   

工具包兼容性和可扩展性

ReExt 提供了极大的灵活性：

• 工具包：使用ReExtData对象中的属性，在经典 Ext JS 工具包和现代 Ext JS 工具包之间进行选择。
• 版本： ReExt 目前支持最新版本的 Ext JS（例如 7.9）和 React（例如 19.2）。
• 第三方组件：由于您正在构建一个纯 React 应用程序，因此您可以轻松地集成来自其他 npm 库的组件（例如 Fusion Charts 或 React Split）。
• 框架：只要底层框架是基于 React 的，ReExt 就可以与 Next.js 等完整的框架环境配合使用。

高级配置：ReExtData 的旋钮
ReExtProvider使用一个名为ReExtData 的对象，其中包含关键设置：

• 地点： 定义 Ext JS 文件是应该从远程加载还是本地加载。
  
• 工具包： 指定使用经典工具包还是现代工具包。
  
• SDK 版本： 设置当前 Ext JS SDK 版本。
  
• 主题： 选择用户界面主题（例如 Triton 或 Material）。我们还提供自定义主题，但需要使用额外的工具。
  
• 包裹： 对于企业客户，可通过定义任何附加套餐来包含高级功能。
  

许可和企业附加组件

适用于已获授权用户：

• 集成高级插件： 如果您已下载 Ext JS Premium 插件：
  解压缩文件。
  将附加包放入相应的文件夹（通常是本地 Ext JS SDK 目录中的packages文件夹）。
  
• 本地生产设置： 将ReExtData中的位置更改为“local”可确保您的应用程序运行本地生产版本，而不会带有任何试用水印。
  

现有代码库的迁移

对于从旧版本 Ext JS（例如 7.2 或 7.3）迁移的开发人员，Sencha 提供免费的升级顾问工具，该工具可以：

• 分析您当前的代码库。
• 迁移到 7.9 版本所需变更的报告。
• 自动实施一些修改，简化升级过程。

ReExt社区和资源

加入社区，寻找更多学习资源：

• Sencha Discord 服务器：开发者（包括 MVP）讨论 ReExt 和回答技术问题的主要论坛。
• 资源中心：位于 Sencha 网站的开发者区域，提供白皮书、网络研讨会和案例研究。
• 官方文档：有关详细信息和高级主题，请参阅 Ext JS 和 ReExt 文档。
• 直接支持：如需更深入的支持或许可咨询，请联系 Sencha 销售部门或 ReExt 技术团队。

英文原文：https://www.sencha.com/blog/reext-made-simple-everything-you-need-to-know-to-get-started/