Latest Ext JS 7.8 is now available. Learn more

ExtReact: Adding Powerful Sencha Components to React Apps – Your Questions Answered

June 22, 2017 226 Views

In our recent webinar, Introducing ExtReact: Adding Powerful Sencha Components to React Apps, we presented some of the amazing new capabilities that were released in ExtReact – the most complete set of React components. You can watch the ExtReact webinar recording to learn about all of the new features.

The Q&A session was very lively, so we’re sharing some of the discussion here.

Does ExtReact play well and work with Redux?

Yes, ExtReact plays well and works with Redux. If you’re using Redux, you’re in luck because we have a lot of good examples using Redux with ExtReact. For example, our Kitchen Sink examples use Redux, and the ExtReact Conference Example uses Redux in addition to React Grabber. You can read this recent article on our blog, Using ExtReact Stores in Flux Apps, that dives into a couple of different ways you can use the Ext JS data package and store with Redux. It also includes how the two should be oriented with respect to one another. We have great support for Redux, but you can use ExtReact with any implementation of Flux.

Can we expect component definitions to be identical between ExtReact and Ext JS?

Yes, you get all the same components with both. If you’re used to using a component in Ext JS, it will do all the same things in ExtReact. It’s just the way you interact with them and create them that’s different – JSX versus Ext.create.

We’re considering rewriting one of our Ext JS applications from scratch and considering Ext JS + Reactor and ExtReact right now. Between ExtReact and Ext JS + Reactor, which product do you think will have greater long-term maintenance by Sencha and the Ext JS community?

You should choose the best combination for your project, based on whether your team is focused on building Ext JS and React apps or solely focused on React apps (see next question). We are absolutely committed to providing fully supported commercial frameworks for developers who want to build modern web apps. We just released Ext JS 6.5, which embraces many elements of ES6 and enables developers to build progressive web apps. ExtReact uses Ext JS as its foundation, so continuing to innovate is critical for us.

Why would I use ExtReact if I already have Ext JS? Are there any things I can do in ExtReact that can’t be done in Ext JS?

The components in ExtReact and Ext JS are equivalent. If you’re already developing Ext JS applications and you have no plans to do React development, then you can continue using Ext JS. If you are planning to develop both Ext JS and React apps, then you can use Ext JS + Reactor library. If you have a team that is just focused on building React apps, then ExtReact is a great way to leverage their React knowledge and harness the power of Sencha’s comprehensive set of components.

Would we still use Sencha Cmd with ExtReact?

In most cases, you’re already using it. You don’t have to download, configure, and maintain Sencha Cmd. You really have no direct interaction with it, either with Ext JS + Reactor or ExtReact. The Webpack plugin has an npm-wrapped version of Sencha Cmd as a dependency, so it handles all of that for you. It calls your code, looks for the components you’re using, and feeds all of that information into Sencha Cmd. Then, Cmd can build a minimal bundle. It’s all handled automatically.

Would you suggest populating our components via service calls or Ajax requests?

It depends on the architectural pattern you’re using. In React, the most common way is to use Flux or Redux, and for Redux I’ve always used Thunk as a middleware. Basically, in your action creators you can make Ajax requests to fetch data. For some of the components, like Grid, that have a lot of built-in data fetching functionality, I would suggest using a proxy on the store especially for things like doing remote sorting, filtering, and paging. Here’s a great example of that – ExtReact REST Example. You can download and run the code with a few simple commands. It basically shows you how to implement a back-end for a store proxy. It’s a simple grid that allows search as well as filtering and sorting on the server side. Your application will probably use a mix of Ajax requests through your implementation of Flux and proxies to do this kind of very efficient data fetching for these big data components like grids and charts.

Can ExtReact be used as an alternative to Sencha Touch?

Yes it can. Sencha Touch was merged with Ext JS, and it is the Modern toolkit. When you use Ext JS, you get all of the touch-related components built in. With ExtReact being built on the Modern toolkit, it has all of the evolved versions of the Sencha Touch components that you’re used to seeing.

Can ExtReact be used with React Native?

ExtReact is specifically for React web apps. ExtReact uses the browser and the DOM. React Native doesn’t involve the DOM at all, and it’s rendering to purely native phone and device controls.

What is the license and pricing for ExtReact? Would I use ExtReact if I already have Ext JS?

ExtReact is a separate product with its own license and pricing. You can buy ExtReact to add components to your React apps if you don’t already have an Ext JS license. ExtReact Standard is $695 per developer per year and ExtReact Premium is $1,195, both include Support, and you must be current on your subscription to develop applications. Rights to distribute and use applications are perpetual.

Sencha customers who already have an Ext JS license can use Ext JS components in React simply by using the extjs-reactor npm package on GitHub (which is governed by the MIT license).

Next Steps

Download ExtReact for a free 30-day trial. Watch the webinar recording to see all of the features in action. Share your questions and feedback in the forum.