The Ext JS Reactor: Use Your Favorite Ext JS Components Inside React
One of the biggest announcements I had the privilege of making on the keynote stage at SenchaCon 2016 was the ability to use Ext JS UI components inside React apps with the new @extjs/reactor
package on npm. Using Ext Js inside React provides all the components a developer needs to build data-intensive web apps using React. The developer or users can get components that interact seamlessly, and are professionally built, tested, and maintained.
One of the most important announcements I had the honor of making on the keynote stage at SenchaCon 2016 was the ability to use Ext JS UI components inside React apps using the new @extjs/reactor package on npm. Ext Js within React provides all of the components a developer needs to build data-intensive web apps with React, such as develop, design, test, adaptive, and data package. The developer or user can obtain components that interact seamlessly and are professionally built, tested, and maintained.
How To Use Ext JS Inside React
Just install @extjs/reactor
:
npm install --save @extjs/reactor
…add the following code to your app:
import { install } from '@extjs/reactor'; install();
…and you can start using Ext JS components like the grid in your React components. Here’s an example:
import { Grid } from '@extjs/reactor/modern'; function MyReactComponent(props) { return (
An Ext JS Grid in React
) }
To use any Ext JS component in React, simply import that component by xtype from @extjs/reactor/modern
or @extjs/reactor/classic
. Because React components are always upper case, @extjs/reactor
automatically converts xtypes to lower case for your convenience. In other words:
import { Grid } from '@extjs/reactor/modern';
…is equivalent to:
import { grid as Grid } from '@extjs/reactor/modern';
This syntax is made possible by a babel plugin, @extjs/reactor-babel-plugin
, which actually converts the above to:
import { reactify } from '@extjs/reactor'; const Grid = reactify('grid');
The reactify
function creates a React component wrapper for any Ext JS class or xtype. You can use reactify
on your own classes as well. For example, if you have a custom class with xtype: ‘mygrid’, you can use:
import { reactify } from '@extjs/reactor'; const MyGrid = reactify('mygrid');
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);
Once you’ve imported an Ext JS component, you can use it as you would any other React component. Configs are set using props. Any props starting with “on*” become listeners, so you can do things like:
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 scans your code for import statements as well calls to Ext.create
and Ext.require
to determine which classes you use, then sends that information to Sencha Cmd to 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'] }) ]
Try It Out and Share Your Feedback
Want to try it out but don’t have an existing React app? The extjs-reactor monorepo contains a boilerplate project to help you get up and running. There is also a boilerplate project for the classic toolkit.
Found a bug or want to make a suggestion? File a github issue.
Conclusion
Most React developers cobble together components from multiple vendors and open source libraries. Juggling conflicting dependencies, disparate release schedules, and varying levels of quality and support can be a nightmare. With @extjs/reactor
, developers can get all of the components they need from a single, proven, commercially supported library – Ext JS. The @extjs/reactor
package gives you everything you need to start using Ext JS in React today!
User experience matters just as much as the services a company offers. To meet this…
The latest industry reports show that around 60% of web applications rely on data grids.…
In the current age where data is wealth, almost 2.5 quintillion bytes of data are…