Skip to content

Modus-Logo-Long-BlackCreated with Sketch.

  • Services
  • Work
  • Blog
  • Resources

    OUR RESOURCES

    Innovation Podcast

    Explore transformative innovation with industry leaders.

    Guides & Playbooks

    Implement leading digital innovation with our strategic guides.

    Practical guide to building an effective AI strategy
  • Who we are

    Our story

    Learn about our values, vision, and commitment to client success.

    Open Source

    Discover how we contribute to and benefit from the global open source ecosystem.

    Careers

    Join our dynamic team and shape the future of digital transformation.

    How we built our unique culture
  • Let's talk
  • EN
  • FR

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.

Posted in Application Development
Share this

Seth Lemmons

Seth Lemmons is a Senior Front End Engineer at Modus Create. Seth has devoted several years to learning Ext JS. He has spent the last 10 years building and supporting web applications with an eye for excellent user experience. Outside of work and a young family Seth has very little free time to just do what he wants. But, if he did have some extra time he'd kinda be into learning vector illustration. And someday he hopes to play video games again.
Follow

Related Posts

  • React Landing
    Ext JS to React: Migration to Open Source

    Worried about Migrating from Ext JS? Modus has the Answers Idera’s acquisition of Sencha has…

  • Ext JS to React: FAQ
    Ext JS to React: FAQ

    This is part of the Ext JS to React blog series. React is Facebook's breakout…

Want more insights to fuel your innovation efforts?

Sign up to receive our monthly newsletter and exclusive content about digital transformation and product development.

What we do

Our services
AI and data
Product development
Design and UX
IT modernization
Platform and MLOps
Developer experience
Security

Our partners
Atlassian
AWS
GitHub
Other partners

Who we are

Our story
Careers
Open source

Our work

Our case studies

Our resources

Blog
Innovation podcast
Guides & playbooks

Connect with us

Get monthly insights on AI adoption

© 2025 Modus Create, LLC

Privacy PolicySitemap
Scroll To Top
  • Services
  • Work
  • Blog
  • Resources
    • Innovation Podcast
    • Guides & Playbooks
  • Who we are
    • Careers
  • Let’s talk
  • EN
  • FR