React and Ext JS: Secret Besties

At charmCityJS, my local developer meetup, it’s kind of a running gag that it’s not an official meetup without at least one React talk. React exploded onto the scene in the last two years, stealing a ton of thunder from Angular while Angular 2 was gestating.

I’ve been proud to call Sencha home for almost two years now, but it’s no secret that I also do quite a bit of development on the side. I first started using React last year to spruce up the field selector in Mockaroo, my mock data generator side project.

With my background in Ext JS, React’s component-oriented design felt natural. Conceptually, the two frameworks have a lot of similarities. Both provide a JS-based abstraction of the DOM. Both allow you to encapsulate functionality in the form of reusable components. React’s props are similar to Ext JS configs. In many ways, the two frameworks are cut from the same cloth. React just doesn’t give you any pre-built widgets beyond what HTML provides. I started to wonder how easy it would be to use Ext JS components in a React app. So I gave it a shot.

Here’s an Ext JS grid being rendered by React:

And here’s the code:

UsersGrid.js

import React, { Component } from 'react';

export default class UsersGrid extends Component {

    constructor(props) {
        super(props);

        // create a store with some dummy data - thanks, Mockaroo!
        this.store = Ext.create('Ext.data.Store', {
           fields: ['email', 'name'],
		data: [
			{ "id": 1, "email": "[email protected]", "name": "Doris Franklin" }, 
			{ "id": 2, "email": "[email protected]", "name": "Larry Anderson" }, 
			{ "id": 3, "email": "[email protected]", "name": "Gerald Carroll" }, 
			{ "id": 4, "email": "[email protected]", "name": "Angela Simpson" }, 
			{ "id": 5, "email": "[email protected]", "name": "Debra Morales" }
		]
        });
    }

    render() {
        // create a dom element for the grid's renderTo config
        return

    }

    componentDidMount() {
        // once the target is rendered, create and attach a grid
        this.grid = Ext.create('Ext.grid.Panel', {
            title: 'Users',
            height: 500,
            width: 800,
            renderTo: this.refs.target,
            store: this.store,
            columns: [
                { text: 'Email', flex: 1, dataIndex: 'email' },
                { text: 'Name', flex: 1, dataIndex: 'name' }
            ]
        });
    }

    componentWillUnmount() {
        // clean up the grid when this component is removed
        this.grid.destroy();
    }

}

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import UsersGrid from './UsersGrid';

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

Basically, we render a target div, use React’s componentWillMount lifecycle method to instantiate an Ext.grid.Panel inside it, and use componentWillUnmount to destroy the grid instance when the component is removed from the page. That’s it. Seems pretty simple, right? So that got me thinking: would it be possible to make all of the Ext JS components available as virtual DOM elements? Imagine being able to do something like this in JSX:

	
		
	
	
		//  various other content here
	

After a little digging into React’s renderer APIs, I found that this is totally possible. At SenchaCon 2016, I’ll be demonstrating a new package called react-extjs that allows you to use any Ext JS xtype in React’s JSX. There’s a Buy One Get One Free promo right now, so you can sign up and bring a colleague if you stay at the Aria.

Come out and see how easy it is to drop powerful Ext JS components like grid, calendar, charts, and more into any React app. You can even use Ext JS to lay out other React components and dom elements, all with JSX. See you there!