Using Ext JS Components in Your React Apps – Part 1

Getting Started

React.js has gained popularity due to developer-friendly features such as its intuitive component model, simple view language, and optimized rendering. Ext JS has a similar declarative style, and we’ve developed a package called “Ext JS Reactor” that makes it simple to use robust, full-featured Ext JS components within React-based apps.

There are numerous reasons to use Ext JS components, which I will not go into here. Please visit our Ext JS page to learn more about the many advantages.

Sencha’s full React offering includes Ext JS Reactor, Webpack and Babel plugins, and several boilerplate examples. The Javascript Web Framework has features like the grid, pivot grid, exporter, layouts, charts, and d3 adapter that everything you need to Create Stunning Web Applications. We’re currently hard at work developing a packaged product that makes it simple to obtain all of the required components and use Ext JS components in your own apps.

In this article, I’ll give you a few examples to get you started with Ext JS Reactor. It’s worth noting that the steps will most likely be much simpler once we release our packaged product.

Prerequisites

First, you’ll need to install the necessary initial packages:

Sencha Ext JS 6.2
Sencha Cmd 6.2
Recent versions of node.js and npm

Note that Ext JS requires a license, and Ext JS Reactor works equally well with a trial or standard Ext JS license.

Once you have the basics installed, take a look at Ext JS Reactor on GitHub. You’ll find more information about getting started, as well as some sample projects.

Getting started involves adding Ext JS Reactor to your project, and we recommend also adding plugins for Webpack and Babel as described on that page. Before we get into those details, you need to start with a standard React project. I’ll cover two scenarios below:

1. Creating a new project from scratch
2. Modifying an existing React project to use Ext JS components

Starting from Scratch

If you’re starting a new project, it’s often easiest to begin with one of our boilerplate projects. The boilerplate projects include configuration files that already use the appropriate plugins, which simplifies your job.

Just clone the extjs-reactor repository, then copy the boilerplate directory to a new directory.

$ git clone https://github.com/sencha/extjs-reactor/
$ cp -r extjs-reactor/packages/reactor-boilerplate ~/src/reactor-sample

Now you have a project, including the list of package dependencies in package.json. You also have a vanilla configuration in webpack.config.json that enables Ext JS Reactor. You’ll need to bring in your copy of Ext JS by copying or linking your Ext JS source tree into the ext directory or modifying the sdk property of the ExtJSReactorWebpackPlugin option to provide an absolute path to Ext JS. Then, just run npm install to grab the dependencies.

The app itself is very basic and shows the simple use of a grid. The source code exists in the src directory, with some bootstrap code in index.html and index.js that should be self-explanatory. The app-specific code starts with the App component in App.js.

At this point, we have a functioning app that can be launched with npm start and viewed at http://localhost:8080/. Keep reading if you’d like to learn more about how Ext JS is used from the app’s React code.

Modifying an Existing React Project

If you already have a React project and you’d like to incorporate Ext JS components, the process is pretty straightforward for most React apps. The cornerstone of the Sencha solution is the Webpack plugin, which ensures Sencha Cmd is used during the build process to incorporate and minimize Ext JS components as appropriate.

For example, I cloned a simple, open source Hacker News feed reader from GitHub. Here is the original project and my cloned version.

As I worked through the changes specified in this document, I tagged interesting points in the history. The v1.0 tag correlates with the state of the app before I started adding Ext JS components to the project. I did need to make some changes prior to v1.0 to ensure that the project built properly with typical React tooling.

In the following sections, I’ll focus on the important changes that I implemented to add various improvements to the app. The complete change history is available in the git repo, and can be accessed with a standard command:

$ git checkout 

If you want to see the complete diff between tags, you can use something like this:

$ git diff v1.0 v1.1

Initial State (Tag v1.0)

To see the initial state of the app, you can clone my repo and start the development server:

$ git clone https://github.com/jjarboe/extjs-reactor-hackernews
$ cd extjs-reactor-hackernews
$ git checkout v1.0
$ npm install
$ npm start

Open http://localhost:8080/ in your browser, and you should see a simple list of recent Hacker News articles.

Adding Ext JS Components (Tag v1.1)

To get started with Ext JS, we first need to add the Webpack plugin to our Webpack config file. The plugin itself is available in npm via this command:

$ npm install --save-dev @extjs/reactor-webpack-plugin

For completeness, the Babel plugin can be installed with this command:

$ npm install --save-dev @extjs/reactor-babel-plugin

Both plugins were included in the v1.0 checkout, so you shouldn’t need to install them again.

To use the Webpack plugin, we need to add it to our webpack.config.dev.js by importing the plugin:

const ExtJSReactorWebpackPlugin = require('@extjs/reactor-webpack-plugin');

And providing a configuration in the plugins section:

plugins: [
	new ExtJSReactorWebpackPlugin({
		sdk: 'ext',
		theme: 'theme-material',
		packages: []
	})
...

This tells the plugin to use the Ext JS installation in the “ext” directory, and the material design theme. You should either change the sdk line to point to your Ext JS installation or copy that installation into the “ext” directory (relative to this project’s directory).

We also add “@extjs/reactor-babel-plugin” to our Babel plugins config, whether in .babelrc or the babel-loader config in the Webpack config file.

With the plugins configured, now we get to the fun part: using Ext JS components in our React code!

Our app starts in assets/js/app.js, so let’s start there. The very first thing we need to do in the app is to import and initialize Ext JS from Ext JS Reactor:

import { install } from '@extjs/reactor';
install();

This ensures that the Ext JS library is available at runtime. Later in the file, we define an App.start function which renders the app onto the page:

ReactDOM.render(  , document.getElementById('app'));

We need to wrap that into an Ext.onReady call to ensure Ext JS is available before we render the app:

Ext.onReady(function() {
	ReactDOM.render( , document.getElementById('app'));
})

If we were to run the code at this point, things would basically look the same because the rendered components have not been changed. Let’s say that instead of a simple list of articles, we want to put those articles into the Ext JS Grid – the most robust and scalable grid available on the market.

The list of articles is rendered through the Posts component, so the next set of code changes is going to go in the file assets/js/posts/index.html. Toward the top of the file, we’ll import the Grid component from Ext JS Reactor:

import { Grid } from '@extjs/reactor/modern';

An Ext JS Grid uses data from an Ext JS Store, which may represent data available locally or remotely (i.e. behind a call to a back-end server). The original example app already grabbed the feed from a public server, and we can continue to use that same data. We just need to push the data into a store, so the Grid component can use it.

The data is stored in the posts member of the component state. It is initially empty, and filled by the success callback in the componentWillMount member. We’ll use that same concept, initializing the store in the getInitialState method:

return {
	store: Ext.create('Ext.data.Store', {
		fields: ['title', 'url'],
		data: [],
		proxy: {
			type: 'memory',
			reader: {
				type: 'json',
				rootProperty: 'posts'
			}
		}
	})
};

…and loading the data in same success callback:

this.state.store.loadData(results.hits);

Note how we use a memory proxy for the store, which means that the data is available in client-side memory rather than a remote server. In the success callback, we simply load the data returned from the server into that store. Alternatively, we could have used a JsonP proxy to contact the back-end data source through Ext JS instead of relying on the original implementation.

Finally, we replace the implementation for the render method, so it uses our Ext JS Grid component.

render: function() {
	return (
		{title}', flex: 1
				}
			]}
			height={750}
			width="100%"
			store={this.state.store}
		/>
	);
}

If you’re familiar with Ext JS outside of React, this will look pretty familiar: you instantiate a Grid component and provide a number of configuration options to control how it looks. When used in a React app, the configuration options are passed as props to the component. In this case, we define a single column which will contain a link to the article, we specify a height and width for the component, and we tell it to use the store from the component’s state. The Grid will take care of rendering each record into its own row, and formatting the link based on the record fields.

If you start the dev server with the v1.1 code, you should see something like this:

And that’s all there is to it! Adding full-featured, robust Ext JS components to your React project is as simple as incorporating the plugins into your build process, importing the relevant components, and rendering them with the configuration that you wish to use. Configuration options map naturally to component props, and components nest just like you would expect for any other React components.

Best of all, because you’re leveraging standard Ext JS components, you can use other Sencha tools to improve productivity. For example, Sencha Themer enables you to easily define a complete, cohesive, consistent look and feel for the Ext JS components in your React app.

Next Steps

In part 2 of this series, I’ll talk about augmenting the grid to include more information and adding more navigation and visualization components. If there’s a particular component that you’d like to see highlighted, please let us know in the comments.

Try Ext JS Reactor on GitHub and share your feedback. We really appreciate all of the input community members have shared already.