Ext JS to React: Class Instantiation and Code Style

  • Ext JS components are really just JavaScript functions which allow you to use the keyword: – – This means each class is native 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.
  • Here is an example functional React component: – – This code sample highlights one of the major differences between Ext JS and React.
  • JSX is a very common strategy when creating React components.
  • Instead, each component is instantiated by React itself when you include the component class in returned JSX (i.e. in the example above).

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.

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.

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 keyword:

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

Using the 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 is not yet loaded, the example above will throw an error that is . There are multiple ways to work around this idiosyncrasy depending on where you are creating the component. Looking at the above code…

Ext JS to React: Class Instantiation and Code Style