Integrating ExtJs in React: A Step-by-Step Guide

Reference: Sencha

Why Integrate ExtJS with React?

Before diving into the integration process, let’s understand why you might want to combine React with ExtJS. ExtJS is renowned for its extensive set of UI components and rich feature set, making it an excellent choice for complex user interfaces. React, on the other hand, excels in building efficient and interactive user interfaces. By integrating ExtJS into React, you harness the best of both worlds, creating applications that are visually appealing, highly functional, and easily maintainable.

Step 1: Use Extjs Inside ReactJs

Just install @extjs/reactor:

npm install --save @extjs/reactor

Step 2:

…add the following code to your app:
React JS

import { install } from '@extjs/reactor';
install();

Step 3:

And, you can start using Ext JS components. Like the grid in your React components. Here’s an example for the same:

import { Grid } from '@extjs/reactor/modern';
function MyReactComponent(props) {
return (
   An Ext JS Grid in React
)
}

Step 4: Integrating ExtJs in React: A Step-by-Step Guide

To incorporate an Ext JS component into React, just import the desired component using its xtype from either @extjs/reactor/modern or @extjs/reactor/classic.” Due to React’s convention of using uppercase for components, @extjs/reactor seamlessly converts xtypes to lowercase, ensuring a more convenient and consistent experience for developers. In other words:

import { Grid } from '@extjs/reactor/modern';

Step 5:

…is equivalent to:

import { grid as Grid } from '@extjs/reactor/modern';

Step 6:

This syntax becomes achievable through the utilization of a Babel plugin, namely @extjs/reactor-babel-plugin, which effectively transforms the aforementioned code to:

import { reactify } from '@extjs/reactor';
const Grid = reactify('grid');

Step 7:

“The reactify function generates a React component wrapper for any Ext JS class or xtype. You have the flexibility to employ reactify for your custom classes as required. For instance, if you possess a custom class with the xtype ‘mygrid,’ you can utilize the following:”

import { reactify } from '@extjs/reactor';
const MyGrid = reactify('mygrid');

Step 8:

Or, if you have a reference to the custom class, you pass it to reactify as well:

import { MyExtJSGrid } from './extComponents/MyExtJSGrid';
const MyGrid = reactify(MyExtJSGrid);

Step 9: How to use it

Additionally, after importing an Ext JS component, you have the flexibility to utilize it just like any other React component in your application.

Configs are set using props. Any props starting with “on*” become listeners, so you can do things like:

<Grid
onSelect={(grid, record) => console.log(`${record.get(‘name’)} selected.`)}
/>
Child tags are automatically added to the items config, so Ext JS layouts work like you’d expect:
This panel is on the left.
This panel is on the right.

The @extjs/reactor package also adheres to React’s principle of minimizing changes to the dom. If you change the value of the title prop in this example:

function MyReactComponent({ title }) {
return (
My title may change!
);
}

…@extjs/reactor automatically calls the corresponding setTitle method on the Ext.Panel instance rather than tearing down and rebuilding the entire component.

Most React projects are built using webpack, so we’ve provided a plugin, @extjs/reactor-webpack-plugin, that produces a minimal build of Ext JS containing only those components that you use in your app. The plugin actively examines your code, identifying import statements and instances of Ext.create and Ext.require calls. It then gathers this information and communicates it to Sencha Cmd for further processing, produce the minimized, optimized build of the framework. Here’s an example config:

plugins: [
new ExtJSReactorWebpackPlugin({
sdk: '/path/to/ext',
theme: 'theme-material',
toolkit: 'modern',
packages: ['charts']
})
]

Check this, How to use ExtJs inside React Js Integrating ExtJs in React: A Step-by-Step Guide