ExtReact: Building Responsive React Applications – Your Questions Answered

ExtReact provides a complete set of React components that respond and adapt to any device, platform, or screen size. In our recent webinar, Tech Talk: Building Responsive React Applications with ExtReact, we demonstrated how you can deliver the right experience to each user’s device using simple, concise, declarative techniques with ExtReact. You can watch the ExtReact tech talk recording to learn more.

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

Does the box layout in ExtReact use JavaScript to detect size changes or CSS?

No, unlike older versions of Ext JS, ExtReact uses modern CSS and flexbox. Sizing and layout are handled by the browser, so they are very performant.

Can you comment on the size of the production builds for ExtReact and Ext JS?

ExtReact provides a Webpack plugin that inspects your code to determine which components you’re using and produces a bundle that only includes those components and their dependencies. Build size is something we’re always working on. The next minor release of ExtReact will include significant work to reduce the build size by more aggressively trimming some of the dependencies that automatically get pulled in. You’ll find if you’re making a very trivial app that includes only one component, for example, the build size will be larger than what you would expect for just that one component. However, as you add more and more components, you’ll see the build doesn’t get that much bigger.

Does ExtReact support React Native apps?

No, ExtReact doesn’t support React Native apps. Sencha’s expertise is in web-based technologies: HTML, JavaScript, and CSS. ExtReact leverages a lot of the work that we’ve done with the Ext JS Modern toolkit. Because React Native components are implemented using native device APIs instead of web technologies, we would need to write a completely new library from the ground up and wouldn’t be able to build on any of our previous work.

Is ExtReact a replacement for Sencha Architect? Will it be integrated with Sencha Architect?

No, ExtReact is not a replacement for Sencha Architect. Sencha Architect is a visual UI builder, and ExtReact is a set of components for React, so they don’t overlap. We currently don’t have plans to support ExtReact in Sencha Architect, although that may change as ExtReact adoption grows.

Can we use existing Ext JS components in React applications?

Yes, in fact I know several Sencha customers that are doing just that to port over some functionality from older apps into newer ExtReact apps. Ext JS developers can use the @extjs/reactor package (available on NPM) to bring Ext JS components into any React application. It provides a function called reactify that takes an Ext JS component class and returns a React component.

From what I understand, React is the View in the MVC pattern. Does ExtReact support the model and controller pieces of the MVC model? If our application is developed as an MVVM pattern in pure Ext JS, what caveats are there to moving it to a React/ExtReact design?

You’re right, Ext JS uses a combination of MVC and MVVM, and React apps typically use the Flux architecture. All the examples you see in the Kitchen Sink and the example apps use Flux, and many of them use Redux specifically. ExtReact is designed for React developers doing things the React way, and it doesn’t rely on the MVC and MVVM patterns from Ext JS.

Where do I find documentation on the syntax that I can use for responsive formulas?

You can find the responsiveConfig prop in the API docs. You will find a nice rundown with examples of different built-in keys and logic you can use. You can do things like “and” or “or,” combine or negate expressions, etc. You’ll also find information on responsive configs in the Developing for Multiple Screens and Environments guide.

Which IDE were you using for the demo?

I use Visual Studio Code, which I really like. Sencha provides a plugin for it for Ext JS. You actually don’t need that plugin when using ExtReact because ExtReact comes with TypeScript definitions for all of the components. Visual Studio Code does a really good job of digesting TypeScript definitions and providing code completion. If you haven’t already, it’s definitely worth checking out Visual Studio Code. It’s fast and lightweight like Sublime, but it has a lot of the powerful IDE features like snippets, code completion, navigation, and documentation that are typically found in powerful IDEs. It’s been my IDE of choice for all of the React work that I’ve done here.

Is Visual Studio Code available for the Mac?

Yes, despite the misleading name, Visual Studio Code, not to be confused with Visual Studio, is a general purpose, lightweight code editor that is not tied to Windows, .NET, or any other Microsoft technology. It’s actually written in HTML and JavaScript, and it runs in Electron, just like Sencha Test, Architect, Themer, and Inspector, so it can be used on all platforms.

How is theming supported for ExtReact components? Are we free to theme these components however we want using Flexbox and component stylesheets, or do we have to stick with a few out-of-the-box themes that ExtReact comes with?

ExtReact does come with out-of-the-box themes, but all of those themes are highly configurable. When you pull up any component in our docs, such as the Panel, there are theme variables you can change, and there are also mixins that you can use to create meta-classes, which we call UIs. By using ExtReact’s Sass-based theming API, you can customize the look and feel of components in a way that’s cleaner and more durable than targeting individual DOM elements using CSS. When you use Yeoman to create an ExtReact app, it includes a custom theme with some trivial modifications, just to get you started. The theming capabilities of ExtReact are quite powerful, and I recommend that you read the Theming Guide to learn more.

Is ExtReact compatible with Apache Cordova (formerly PhoneGap) for developing hybrid mobile applications?

Yes, ExtReact is compatible with Cordova, just as any other web library would be. If you want to develop an ExtReact app that can be installed on a mobile device, you have two choices: 1) you can use Cordova, or 2) you can use Progressive Web Application techniques.

You mentioned that ExtReact supports Redux by default. Are we supposed to stick with the Redux way of state management to use ExtReact, or are we free to use any other alternative state management options like MobX, etc.?

We happen to use Redux in a lot of our examples because it’s one of the most popular libraries out there, but ExtReact doesn’t force you to use any particular library to manage state. In fact, while the Kitchen Sink app uses Redux, most of the examples simply use component state.

Are ExtReact docs publicly accessible?

Yes, ExtReact docs are publicly available.

Can my 30-day trial be extended?

Yes. If you run out of time, you can always request an extension. Contact us to request your extension.

What is the pricing and licensing model?

ExtReact Standard is $695 per developer per year, and ExtReact Premium is $1,195 per developer per year. Both include Support, and you must be current on your subscription to develop applications. Rights to distribute and use applications are perpetual.

Can I use ExtReact if I have an Ext JS license?

Sencha customers who already have an Ext JS license can use Ext JS components in React simply by using the Ext JS Reactor on GitHub (which is released under the MIT license), without any additional cost. That repo’s readme shows you how to import the Ext JS SDK into your React app. You can also read the ExtReact for Ext JS Developers guide to learn more.

Next Steps

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