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 components inside React apps with the new @extjs/reactor package on npm.
Table of Contents
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!
Why not to provide the ability to build Ext JS applications the way React applications are created, but w/o using React?
Can you be more specific? For example, do you mean using JSX inside of Ext JS?
See the Dojo declarative syntax, which can be used in addition to the programmatic way of building Dojo apps.
https://dojotoolkit.org/documentation/tutorials/1.10/declarative/
I was curious if Ext JS applications could be created by using the React declarative style of programming.
Ext JS itself doesn’t support declarative syntax, but with extjs-reactor, you can build an entire Ext JS app declaratively using React. We could attempt to recreate what React has done with flux, the virtual dom, and JSX, but I doubt that would yield better results than just using the two frameworks together.
See what Jason Cline thinks about the declarative style of programming idea since he worked on the Dojo project for 4 years according to his bio.
https://staging.sencha.com/company/team/#Jason
Does this mean that React is using the virtual DOM to render the components? Is it faster in this way?
Components are rendered to the Virtual DOM first, then if they need actual rendering (or updating), the diff is passed to Ext JS, which handles updating the DOM in the same way that it would outside of React.
So typically React works like this:
state => virtual dom => dom
When you create an Ext JS component with @extjs/reactor, it works like this:
state => virtual dom => Ext JS => dom
This extra step only occurs for reactified Ext JS components. HTML elements are not affected.
What is the license for using Extjs like this?
@Ron – there’s no change to the Ext JS license when using the framework with Ext JS Reactor. See details: https://staging.sencha.com/legal/sencha-software-license-agreement/
How to use CellEditing plugin inside React ?
var cellEditing = Ext.create(‘Ext.grid.plugin.CellEditing’, {
clicksToEdit: 1
});
….
<Grid
store={store}
shadow={true}
style={{ flex: 1 }}
plugins = {cellEditing} /// ????
…
Pretty much. You also need to specify editors for the editable columns. You could also declare the plugin using a config. Here’s a working example:
Ext.require(‘Ext.grid.plugin.CellEditing’);
function MyEditableGrid({ store }) {
return (
)
}
Apparently the comments section doesn’t handle XML well. Here’s the working example on pastebin:
http://pastebin.com/b8rqSNzn
Thank you for Webpack 2 update recently,
This is nice example but I don’t think this will work in real case applications. Things like Ext.fnc calls reference [document] or manipulate the actual DOM … which is something you want to avoid with React applications. Also things like react server side rendering wouldn’t work (which is quite essential for responsive loading)… so correct me if I’m wrong but unless Ext.js are actual react components (or at least react compatible/tested wrappers) I wouldn’t be recommending this approach.
It’s true that, in general, React developers should avoid direct manipulation to the DOM, instead going through React’s Virtual DOM and allowing React to handle actual DOM manipulations. The same is true when using extjs-reactor. The developer still only interacts with the React APIs as they would with any other component library. The difference with extjs-reactor is that it hooks onto the end of React’s Virtual DOM and handles the DOM manipulations itself for Ext JS based components, much like any React renderer would do (think ReactDOM, ReactNative, ReactART).
Regarding server-side rendering, we have not yet looked into supporting this. It’s also not something that everyone needs, especially in single page applications that require authentication, where page load time is not as important as it would be in a multipage setting, and SEO is not a factor.
Mark,
Thanks for your prompt comment.
Limiting the usage to a single page applications eliminates a large portion of your audience including my team. We’re in the process of refactoring our UI tier into React components for our in-house framework with some of the Ext JS controls. However with (above) limitations we won’t be able to introduce them into production and we’ll have to replace them so I hope you’ll consider addressing these in the future as for the most part we think Ext JS is an excellent product and hope to use it again.
Cheers
(BTW: another big deal for us is lack of support for typescript, or at least other than some GitHub community attempts, I can’t find anything official from sencha)
It seems like TypeScript is quite popular amongst React developers. I think we’re going to take a hard look at official support in an upcoming release. We already publish tsd files for modern and classic as part of reactor (initially to provide code completion in IDEs), and I’m familiar with the community offerings around Reactor and TypeScript. I think there’s a good chance for official support from Sencha in the near future.
Mark, are you planning update to Sencha 6.5 ?
You should be able to use the current release of extjs-reactor with Ext JS 6.5. That said, we’ve got some more updates coming soon for React. Stay tuned.
The latest release of extjs-reactor, v1.0.0, out today, supports Ext JS 6.5.
How to use react in extjs ?
Thanks so much!
Sencha customers who already have an Ext JS license can use those components in React simply by using the extjs-reactor npm package on GitHub. You can start by following modern example:
https://github.com/sencha/extjs-reactor/tree/master/packages/reactor-modern-boilerplate
Read details at:
http://docs.sencha.com/extreact/6.5.0/guides/extreact_for_extjs.html
It’s actually a nice and helpful piece of info. I am glad that you simply
shared this useful information with us. Please keep us up to date like this.
Thanks for sharing.
Will this work for Sencha Modern 6.7 ?
I pay a quiock visit every daay some websites and
websites to read content, except this weblog provides quality based posts.