Latest Ext JS 7.8 is now available. Learn more

Ext JS Reactor: Adding Powerful Ext JS Components to React Apps – Your Questions Answered

January 26, 2017 160 Views

In our recent webinar, Ext JS Reactor: Adding Powerful Ext JS Components to React Apps, we demonstrated how React application developers can leverage rich Ext JS components in their React applications. We showed how you can build a data-driven, cross-platform web application using the Ext JS component library and React. There were several intriguing questions that we answered, and we’re sharing them here so you can use the information when you build your React app and include Ext JS components.

Is Ext JS Reactor still in development or is it production ready?

The project is in GitHub and being actively developed. It’s the perfect time to give it a try, report issues, and submit Pull Requests (PRs).

Are all the Ext JS components ready to be used in React?

Yes. Reactor is a generic bridge between Ext JS and React. They line up well. Both libraries are similar in the way that developers configure components, respond to events, and handle changes. Reactor binds the two together, so no customization is needed. You can use any component of Ext JS in your React app.

Can we use an Ext JS data store along with the grid within React?

Yes, you’ll need to use stores to display data in grids. If you’re using Flux, we suggest making your Ext JS stores child properties of your Flux store.

Is it possible to use Ext JS vanilla classes or Ext.ux community components?

Yes, as long as your component class has an xtype you can import it using the ES 6 import syntax seen in the boilerplates. The Ext JS Reactor library also exports a function called “reactify” that you can use to create a React-compatible component for any Ext JS component class.

How about the complex trees with inline cell editors? Are they supported? How about pivot grids?

Absolutely. Any component can be used. This is the main reason that people would use Ext JS inside React.

Can we extend components and customize them as easily here as with a normal full Ext JS app?

Yes. You can choose if you want to componentize using the React class system or Ext JS class system. If you’re comfortable with Ext JS, you can implement everything using Ext.define and import the components into your React application. You can also compose multiple Ext JS components into a React component using React’s class structure.

Is there a difference in terms of behavior/display between Ext JS and Ext JS Reactor components?

No. Under the hood they are the same. All Reactor is doing is co-ordinating between Ext JS and React. So, an Ext JS component works and performs the same under an Ext JS application and Reactor.

Are all the DOM elements rendered by Ext JS using React’s Virtual DOM?

Ext JS Reactor defers the rendering of Ext JS components to Ext JS itself based on the content of React’s virtual DOM. React provides Ext JS Reactor with information about which nodes have changed between render cycles, and Reactor forwards that information on to Ext JS to perform minimal rendering. By only updating those nodes that have changed in the virtual DOM, Ext JS Reactor remains true to React’s strategy of minimizing DOM churn. All non-Ext JS components are rendered by React in the traditional manner.

What is the best way to test Reactor components within React apps?

Jest is the most popular unit testing library for React. It’s also used to test the React library. Jest doesn’t require your component to be rendered in a browser. It just renders it to the virtual DOM and works with it. Reactor plays well with the virtual DOM. It hooks on to the end of the virtual DOM. So you can write tests to test Ext JS the same way you test any other React code. You don’t even have to get into the Ext JS APIs to build assertions.

In terms of file structure for Ext JS Reactor, is it flexible so it can be anywhere in the project or is it kind of fixed in a certain way?

Reactor doesn’t force any structure. We subordinate this to webpack. React developers would expect to write applications using webpack. So, the way the file structure and class loading works with webpack is that you just have an entry point and then webpack browses that entry point for imports and finds the files based on their relative path and builds your application. So, there is no structure that you have to use when using Reactor. You don’t have to have a folder-like model, view, or controller. You are free to put code wherever you want, import that into your application using an ES6 import statement and React + webpack, and our plugin takes care of the rest.

Will Ext JS Reactor work with server-side rendering?

No, it won’t. Ext JS doesn’t support server-side rendering. We might look into this feature in the future but not at this point in time.

Is there a way to use Webpack to customize the Ext JS build, so it only includes the Ext JS code required for the components used? And, are we able to build custom builds to partially load when the application starts?

Yes. That’s what the reactor-webpack-plugin does. It looks at all the components that have been imported and the way they are being used and passes that to Cmd to create optimized JS and CSS files. Webpack allows code splitting and multiple entry points.

Ext JS has it own JS class dynamic loader (“requires” keyword). What are the compatibility issues with the one provided by React?

The reactor-webpack-plugin recognizes the requires config when scanning your code for dependencies as well as any calls to Ext.require(). These dependencies are included in the bundle built by webpack, so they are available when the app loads. They do not need to be loaded dynamically as they would be in traditional Ext JS development with sencha app watch.

Are the Ext JS component definitions in Reactor pulled directly from the Ext JS codebase? Can we expect component definitions to be identical between Ext JS and Reactor?

Yes, they are. Put the regular Ext JS SDK in a folder of your choice, point webpack at it, and the plugin will call Cmd, use the SDK, and generate a React wrapper for it.

What if I’m only using one or two components from Ext JS, is it possible to ensure that only those components are added to the build output?

Yes, it’s automatic. The plugin looks for the components used and passes them to Cmd to generate the optimized build. There are multiple ways to get a build into a React application. The most convenient way is using the HTML webpack plugin. That’s the way the boilerplate code works. webpack finds out which classes you’re using and includes them in the build package.

Is there a minimum Ext JS version required for the wrapping feature mentioned?

Yes. You can use the Ext JS Reactor EA with Ext JS 6 and beyond.

If a new version of Ext JS is released, will there be a lag between the release and compatibility with Ext JS Reactor?

We don’t anticipate any lag in compatibility of Reactor with Ext JS. Reactor is a generic library, and it doesn’t make assumptions for any specific component, feature or integration. Having said that, we may see some delays if there are significant changes to React itself.

Is it possible to use TypeScript with Ext JS Reactor? If not, do you plan to add support for the TypeScript compiler in the future?

Yes, it’s possible to use TypeScript. In fact, Reactor contains TypeScript definitions for all Ext JS components. There is also a TypeScript boilerplate on GitHub that was contributed by a community member.

Next Steps

We’re excited about Ext JS Reactor and the capabilities it delivers to the React development community. To learn more about how you can use Ext JS components in your React apps:

Recommended Articles

8 Must-Know Tips for Choosing the Right Web Application Framework for Your Project

Starting web application development on a project can feel like a very difficult task. The abundance of frameworks adds to the confusion. It leaves developers…

Web Application Development | Top 10 Frameworks in 2024

If you are a developer, you must know the role of frameworks in creating amazing applications. Web application development frameworks come with pre-built tools to…

Understanding the Difference: When to Use Ext JS Classic vs. Modern Toolkit

Ext JS is a JavaScript framework for building powerful web and mobile applications. The framework features over 140+ high-performance, fully tested, and customizable UI widgets/components.…

Ext JS 7.8 Has Arrived!

The Sencha team is pleased to announce the latest Ext JS version 7.8 release. Following the 7.7 release, which included numerous quality enhancements in Ext…

How to Work with Ext JS Models and Stores: Tutorial on Managing Data and State

Ext JS is a popular JavaScript framework for creating robust enterprise-grade web and mobile applications. The framework offers a rich set of high-performance and fully-tested…

Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development

Developing software without an architecture pattern may have been an option back then. However, that’s not the case anymore. Modern software development requires apps to…

View More