how to load React app / Lib inside ExtJs Component

Question

We are using Extjs 3.1 and we are trying to integrate reactjs into. we have vendor library which has react, reacr-dom, redux and other libs are packed and included as script.

Here is my extjs code

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);
    }
});

Need help in how to load reactjs/javascript libs into extjs container.

EDIT:clarifying bit more.

1. Since I don't have option to load external dependencies (react,redux etc) from cdn , how do I bundle it separately and what type (commonjs,umd or var)
2. How do I bundle my app , so that ExtJS can import it (as separate lib ?? )

Answer 1

So, it was a bit of a complicated process figuring this out initially. Lots of research across the web. Fortunately, I was able to put together a working example which I outlined in a Medium article here. In this outline I go over:

• Building a Basic React Library (with JSX)
• Transpiling the Library
• Using the library in a browser using a script tag
• Serving a demo with a simple http server
• Bundle with webpack
• Integrate into an Ext JS app

---

React in ExtJS

Create a simple React library usable within a Sencha Ext JS application

Adding React to an existing Ext JS application can be challenging. As of today (Aug 14, 2020) there are only a few solutions present in the wild for how best to incorporate a React application into an existing Ext application. That said, however, there are no great methods for incorporating components at a more module level or in a way that allows for the common use of JSX.

Recently, I approached this exact problem. While we would all love to throw away a project and start something new, that is unfortunately not the reality under most circumstances. Often the best solution, when possibly, is to allow for the integration of new content into an existing system. The goal, in this particular case, was to allow front-end engineering teams to develop new content in React while integrating into the existing application and a paced conversion of legacy content.

In this guide, I am going to create a React library that loads a basic header with a couple sub-components. Then I will take that code and turn it into a re-usable npm package that can be used in the browser and node with webpack, babel, and typescript. From that point we can easily integrate the React library into Ext containers via the React vanilla JS library.

Answer 2

Here is how you can do it.

Using ExtJS 3.4.1 working example:

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');
                }
            }
        }]
    });
});

Link to Fiddle(ExtJS 3.4.1) : https://fiddle.sencha.com/#view/editor&fiddle/2l12

Using ExtJS 5 and Above Working example:

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');
                    }
                }
            }]
        });
    }
});

Link to Fiddle (ExtJS 5 & above): https://fiddle.sencha.com/#view/editor&fiddle/2l11