【问题标题】：how to load React app / Lib inside ExtJs Component如何在 ExtJs 组件中加载 React 应用程序 / Lib
【发布时间】：2019-02-06 19:53:18
【问题描述】：

我们正在使用 Extjs 3.1，我们正在尝试将 reactjs 集成到其中。我们有供应商库，其中有 react、reacr-dom、redux 和其他库被打包并包含在脚本中。

这是我的 extjs 代码

var CompositeViewer = Ext.extend(Ext.BoxComponent, {
    itemId: 'CompositeViewer',
    requires: [
        'ReactDOM' //my lib file name is vendor.lib.js
    ],
    initComponent: function() {
        Ext.apply(this, {
            autoEl: {
                tag: 'div',
                cls: 'normalize'
            }
        });
        CompositeViewer.superclass.initComponent.apply(this, arg);
    },
    onRender: function(ct, position) {
        CompositeViewer.superclass.onRender.apply(this, arg);
        console.log(ReactDOM); //OFCOURSE ReactDOM is undefined  
        /// HOW TO LOAD/Render REACT APP AND OTHER LIBS
    },
    beforeDestroy: function() {
        CompositeViewer.superclass.onDestroy.apply(this, arg);
    }
});

在如何将 reactjs/javascript 库加载到 extjs 容器中需要帮助。

编辑：澄清一点。

由于我没有从 cdn 加载外部依赖项（react、redux 等）的选项，我如何单独捆绑它以及什么类型（commonjs、umd 或 var）
如何捆绑我的应用程序，以便 ExtJS 可以导入它（作为单独的库？？）

【问题讨论】：

这个问题解决了吗？你的解决方案是什么？

标签： reactjs extjs webpack extjs3

【解决方案1】：

你可以这样做。

使用 ExtJS 3.4.1 工作示例：

Ext.onReady(function () {
    Ext.create({
        xtype: 'panel',
        renderTo: Ext.getBody(),
        title: 'ExtJS Panel',
        items: [{
            xtype: 'label',
            text: 'ExtJS Compoent'
        }, {
            xtype: 'panel',
            listeners: {
                afterrender: function () {
                    const e = React.createElement;

                    ReactDOM.render(
                        e('div', null, 'ReactJS Component'),
                        this.el.dom
                    );
                    console.log('afterrender');
                }
            }
        }]
    });
});

链接到小提琴（ExtJS 3.4.1）： https://fiddle.sencha.com/#view/editor&fiddle/2l12

使用 ExtJS 5 及更高版本的工作示例：

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.create({
            xtype: 'panel',
            renderTo: Ext.getBody(),
            requires: [
                'ReactDOM'
            ],
            title: "Some ExtJS Panel",
            items: [{
                xtype: 'label',
                text: "ExtJS Component"
            }, {
                xtype: 'panel',
                id: 'react-panel',
                height: 400,
                initComponent: function () {
                    console.log('do some extjs stuff here');
                    this.superclass.initComponent.apply(this, arguments);
                },
                listeners: {
                    afterrender: function () {
                        console.log();
                        const e = React.createElement;

                        ReactDOM.render(
                            e('div', null, 'ReactJS Component'),
                            this.el.dom
                        );
                        console.log('afterrender');
                    }
                }
            }]
        });
    }
});

链接到 Fiddle（ExtJS 5 及更高版本）： https://fiddle.sencha.com/#view/editor&fiddle/2l11

【讨论】：

感谢 Saurabh，即使我包含了单独的捆绑包，我也没有定义“React”。另外，我如何从 app bundle 访问“MyApp”。，因为 ReactDom 需要实例。我已经更清楚地编辑了我的问题。

【解决方案2】：

因此，最初弄清楚这一点是一个复杂的过程。网络上的大量研究。幸运的是，我能够整理出一个我在Medium article here 中概述的工作示例。在这个大纲中，我会回顾：

构建一个基本的 React 库（使用 JSX）
编译库
使用脚本标签在浏览器中使用库
使用简单的 http 服务器提供演示
与 webpack 捆绑
集成到 Ext JS 应用中

在 ExtJS 中反应

创建一个可在 Sencha Ext JS 应用程序中使用的简单 React 库

将 React 添加到现有的 Ext JS 应用程序可能具有挑战性。截至今天（2020 年 8 月 14 日），目前只有少数几种解决方案可以将 React 应用程序整合到现有的 Ext 应用程序中。尽管如此，在模块级别或以允许 JSX 共同使用的方式合并组件时，没有很好的方法。

最近，我处理了这个确切的问题。虽然我们都愿意放弃一个项目并开始新的事物，但不幸的是，在大多数情况下这不是现实。通常，最好的解决方案是允许将新内容集成到现有系统中。在这种特殊情况下，目标是允许前端工程团队在 React 中开发新内容，同时集成到现有应用程序中并有节奏地转换遗留内容。

在本指南中，我将创建一个 React 库，用于加载带有几个子组件的基本标头。然后我将把这些代码转换成一个可重用的 npm 包，可以在浏览器和节点中使用 webpack、babel 和 typescript。从那时起，我们可以通过 React vanilla JS 库轻松地将 React 库集成到 Ext 容器中。

【讨论】：