Ext JS to React: Class Instantiation and Code Style

This is part of the Ext JS to React blog series. You can review the code from this article on the Ext JS to React Git repo.

React enjoys the benefits of the latest ECMAScript conventions (with some transpiling magic from Babel) along with JSX syntax. In the following sections, we will look at how Ext JS components are instantiated along with how a functional component is used in a React app. We’ll also review common coding styles that differ between the two ecosystems. Just a note before we proceed, this blog post aims to discuss how React components are created and used, but doesn’t wade into the various ways components may be defined initially. We’ll dedicate our next blog post in the series to the topic of defining React components.

Ext JS Instantiations

There are multiple ways to instantiate a component with Ext JS. Ext JS components are really just JavaScript functions which allow you to use the new keyword:

var component = new Ext.Component({
    html: 'Hello from Modus!'
});

This means each class is native JavaScript. Ext JS cannot change how JavaScript works. Using the new keyword to instantiate a function is the legacy method of instantiating classes before JavaScript introduced true class support in ECMAScript 2015 (ES6).

Using the new keyword during development introduces a critical downside: the class may not be loaded and defined yet. During development, files will be loaded individually but only when required. So if Ext.Component is not yet loaded, the example above will throw an error that Ext.Component is undefined. There are multiple ways to work around this idiosyncrasy depending on where you are creating the component. Looking at the above code as-is you can use Ext.create:

var component = Ext.create('Ext.Component', {
    html: 'Hello from Modus!'
});

The difference here is that Ext.create accepts the class name as a string, so that it can lookup whether the class has already been defined. For undefined classes, Ext JS synchronously loads the file, defines the class, and returns an instance. Another benefit of Ext.create is that you can dynamically pass what class to create along with a flexible config object relating to it.

Ext JS lazy instantiation

Ext JS also supports “lazy instantiation”. Parent containers instantiate child items as needed without new or Ext.create. To do this, we will define a child with an Object literal and use xtype or xclass properties:

var container = Ext.create('Ext.container.Container', {
    items: [{
        xtype: 'component',
        html: 'Hello from Modus!'
    }, {
        xclass: 'Ext.Component',
        html: 'Making the world better, one line of code at a time!'
    }]
});

You no doubt have seen xtype but maybe not xclass. xclass will work the same way but with the full class name. These are the three ways to create components within Ext JS.

React Instantiations

With React, instead of multiple methods depending on the current situation, JSX offers a single syntax when creating instances. JSX is a syntax extension of JavaScript. We recommend using it with React to describe what the view should look like. JSX may look like what you’re used to seeing with other “template” languages, but it comes with the full power of Javascript. Meaning, JSX enables you to outline not only the HTML and React component structure, but also call other JavaScript functions or even execute code statements right from within the JSX body. React does not require the use of JSX. However, the React community has broadly adopted it as the standard. Here is an example functional React component:

const MyComponent = () => {
  return (
    <div>
      <div>Hello from Modus!</div>
      <div>Making the world better, one line of code at a time!</div>
    </div>
  );
};

This code sample highlights one of the major differences between Ext JS and React. JSX is a very common strategy when creating React components. This allows a more natural structure for arranging components and regular HTML elements. In this case, we just need a couple of div elements to show the two sentences with no need for a real component. Furthermore, JSX doesn’t just represent HTML. It also allows you to define child components mixed in with regular HTML elements:

const MyHeader = ({ text }) => {
  return (
    <h1>{text}</h1>
  );
};

const MyComponent = () => {
  return (
    <div>
      <MyHeader
        text="Hello from Modus!"
      />
      <div>Making the world better, one line of code at a time!</div>
    </div>
  );
};

You can see here we’ve defined a header functional component (MyHeader) and updated MyComponent to use it along with regular HTML elements. The tags within JSX should map to a variable, so the <MyHeader> tag is mapped to the MyHeader constant. You can think of the <MyHeader> as a placeholder and when it’s run, an instance of that placeholder will take its place. Unlike Ext JS, you won’t create component instances directly using a method like create(), widget(), or the new keyword. Instead, React instantiates each component when you include the component class in returned JSX (i.e. <MyHeader> in the example above). For more information on the distinctions between React Components, elements, and instances refer to the React documentation.

Conclusion

JSX isn’t part of React nor is it part of any spec. The build process compiles JSX to its JavaScript equivalents. JSX is optional as you can code directly using React’s JavaScript API. However, JSX is overwhelmingly more popular as it’s much more intuitive than nested React.createElement calls. Additionally, JSX offers complete structural control over the composed elements whereas with Ext JS, you will need to work within the confines of the Ext JS layout system. The use of user-defined JSX structure has the added benefit of reducing unnecessary DOM nesting, DOM bloat, and simplify element layout.

In the examples within this article, we explored creating a React component using a function that returns the markup for the component. In our next blog post we’ll take a deeper look at how to define the classes themselves. This includes extending from React.Component and the advantages that offers. We’ll also answer the question “How do I get a reference to a component at runtime and call a method on it?” that tends to throw developers off when moving from Ext JS to React.