Loading React Component From button click on Extjs

Question

I am currently working on integrating react project with existing extjs project.The requirement is to load a react component in an extjs page when a button is clicked, button resides in ext project

Answer 1

It is not so easy but you can begin from the following small code:

Ext.create('Ext.panel.Panel', {
    title: 'Hello',
    width: 200,
    height: 300,
    dockedItems: [{
        xtype: 'toolbar',
        items: [{
            text: "Load React Component",
            handler: function () {
                const panel = this.up('panel');
                const e = React.createElement;
                ReactDOM.render(
                    e('div', null, 'React'),
                    panel.body.el.dom
                );
            }
        }]
    }],
    renderTo: Ext.getBody()
});

and index.html

<HTML>
<HEAD>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <!-- for Production -->
    <!--<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>-->
    <!--<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>-->
</HEAD>
<BODY>
</BODY>

Fiddle

Or you create a div with some ID in extjs panel's body using template or htmn property of panel and render your react project there.

PS it is very bad idea to integrate extjs with react.

Loading React Component From button click on Extjs

Question

1 answers

solution1
1 2020-06-18 19:16:14

Loading React Component From button click on Extjs

Question

1 answers

solution1 1 2020-06-18 19:16:14

solution1
1 2020-06-18 19:16:14