This is part of the Ext JS to React blog series.
React is Facebook’s breakout framework for building application UIs. At Modus Create, we’ve fully adopted React for application development, targeting both desktop and mobile environments. As experts in building applications using various libraries and frameworks, we wanted to share our knowledge with those in the development community. The Ext JS to React series attempts to guide those in the Ext JS community looking for resources on app development in React including how to define and instantiate classes, show data in a grid, lay out components within parent containers, and more.
This article is the last entry in the Ext JS to React series, and we recommend everyone read it cover to cover. Perhaps you have a question that you’re hoping we’ve covered in the series, but you’re just not sure where. The questions below are ones we had either before or during writing the series. Most of the questions have been addressed through the course of the series. In the answers that follow, we’ll refer to larger discussions and / or resources hopefully saving you some search time as you work through the migration of Ext JS to React.
FAQs
How do I start a react project? Is there a way to generate a starter app like Sencha CMD’s “sencha app generate”?
There are a number of ways to get started with a React application, including generating an application using Facebook’s own solution, create-react-app. To see how you can start with create-react-app, refer to the Scaffolding article.
How do I build a react project so it’s optimized and minified for a production release?
To see how you can build a starter app and build it for production, refer to the Scaffolding article.
What is the equivalent to Ext.define()?
Classes are generally defined using an ES6+ class extending React.Component. Though, simpler classes may also be defined by creating a function returning JSX. Refer to the Defining Classes article for more information on how classes are defined in React.
What is the equivalent action to new ClassName() or Ext.create()?
React classes are not instantiated directly in the way you’re used to with Ext JS. Instead, they are added to the application structure through composition. Meaning, that if you want a Button in a Toolbar you’ll add it to the render output similar to:
<Toolbar><Button /><Toolbar>
For more information, refer to the articles on Defining Classes and Instantiation.
How do I get a reference to component within my application?
One of the questions you may have when migrating from the Ext JS world to React is how you will fetch a reference to some component in your application’s component tree. With Ext JS, there are plenty of ways to fetch a reference to a particular component: the ownerCt property, getRefOwner(), child(), down(), up(), or the static methods from the ComponentQuery class.
However, React doesn’t function in the same way that you’re used to with Ext JS. Ext JS is an “imperative” system in contrast to the “declarative” nature of React. It’s rare to fetch a reference to a component or HTML element within your application. Instead you’ll interact with the data used by components, the application state, or both. These interactions with the data informs the component how to behave. For further reading, please refer to the Defining Classes article.
What is the difference between a component’s props and its state since they both seem to be a hash of properties?
Props are key / value pairs passed down to a component from a parent component. The component may also have a state property, which it updates itself with its own methods. It’s the difference between internally and externally managing the data supporting the render process. For more discussion on topic, refer to the Class Definition article.
How do I change a component’s configs / properties at runtime?
An example might be: How would I change a button from hidden: true to hidden: false?
Your React components often have properties set on the component class itself. However, changing those at runtime will not result in your component being re-rendered in the browser (i.e. changing a component from hidden to shown). For that, a new property will need to be passed in to the component or a value on the component state property will need to be modified. Changes to these values will result in the component being re-rendered. The render method can elect to decorate the component as shown or hidden… or skip rendering it to the page at all. For more information on updating a component’s state through a user interaction, see the Defining Classes article.
On the same topic, you you may want to update a global application state object (that ultimately passes down its data to select components’ props). For that, we recommend reviewing the Handling Application State with Redux and Handling Application State with Mobx articles.
Where does the application logic live if React is effectively the “view” of the MVC model?
React itself only supplies the views. You’re free to incorporate application state and user interaction handling within the React components themselves. Alternatively, you may opt for an application state management solution from the React ecosystem such as Redux or Mobx. For more information on how to manage the data and application logic outside of the React components themselves, refer to the Handling Application State with Redux and Handling Application State with Mobx articles.
Will I be creating base components with functionality inherited by subclasses like I would in Ext JS?
The React community opts for composition over inheritance. Given that paradigm, there are a couple of common methods for sharing code between classes. See the Mixins article for more information.
How can I share functionality between various components?
There are a couple of prevailing techniques for sharing logic between classes in React. Take a look at the Mixins article for a complete discussion on the topic.
Does React have library-specific events? Is there an event > listener model outside of DOM events?
React doesn’t have an event system. But, you can use DOM events and custom events in your components. Refer to the Button article to see a simple example using the DOM’s click event.
Are there some standard components in React or do I have to author all UI elements on my own?
React is the construct with which an application’s views are created. React doesn’t supply any of its own views, but the React ecosystem is quite established and populated with pre-built solutions. A number of trusted view libraries exist, ranging from more comprehensive solutions to smaller packages devoted to one specific view type. Through the Ext JS to React series, we cover a number of of the views found in the Ext JS framework and often refer to existing libraries for a given view. Refer to the Intro article for a listing of all topics covered in the series.
How do I style my React app?
With React, you have quite a bit of latitude when it comes to styling your applications to suit your requirements and design aesthetic. If you’re relying heavily on a component library to supply the views of your application, you’ll want to refer to the component library’s documentation. Each library will likely have its own method of styling its views. If you’re working with your own component classes, we recommending pouring over the Application Styling article since it covers many of the more popular options available to you.
Is there a routing solution available with React?
While React itself doesn’t supply a routing mechanism, there are ways to accomplish view routing within a React app. Modus actively supports and contributes to React Router, which we believe is a fantastic routing solution for React applications. Refer to our Routing article for information on how to manage the UI using routes.
In React, is there a template system similar to XTemplate?
React definitely supports templating you component views. You are able to compose together both HTML elements and other React components. Refer to the Simple Templating and Advanced Templating articles for a discussion on templating in React.
Is there a way to add an array of child components to a parent component in bulk?
Absolutely! Refer to the List article to see an example of this concept in action.
Is there anything in React that manages fetching data from a remote source?
The React library itself doesn’t manage the fetching of remote data. However, we have several articles in this series dedicated to the subject depending on whether you’re working with React exclusively or one of the more popular state managers: Load, Sort and Filter Data with React, Handling Data with Redux, and Handling Data with MobX.
How would I load a record of data into a form?
Refer to the Handling Data in Redux and Handling Data in MobX articles to see a demonstration of loading a form with data similar to Ext JS’s loadRecord() method. In these articles, we leverage the application state managers Redux and MobX to handle the passing of form data to a form’s props. Without an application state manager, you’ll simply supplying the form with data by passing a prop containing the necessary data.
Is there an included icon / font-icon set?
React doesn’t include icons. However, there are font icon solutions in the React ecosystem. Refer to the Button and Panel articles to see examples of Font Awesome icon fonts in a React widget.
How is React application layout managed? Ext JS comes with a number of useful layouts right from the framework like ‘fit’, ‘vbox’, ‘hbox’, ‘accordion’, and ‘border’.
Refer to the Layouts article for a review of how you can manage component layouts similar to what you’re used to using with Ext JS. Spoiler alert, CSS’ flexbox does almost everything you want!
How do you do perform drag and drop actions with React?
You can use the HTML5 drag and drop feature if your target browsers support it. Additionally, there are drag and drop libraries for use in React. Refer to the Drag and Drop article to see an example using an existing drag and drop solution from the React community.
Is React exclusively client-side rendering like with Ext JS or can it be server-side rendered as well?
React comes with built-in server-side rendering (SSR) solution with renderToString and renderToNodeStream (react-dom package). Universal or isomorphic apps are complex to set up, but there are many boilerplate solutions available. One of the more popular solutions is Next.js.
Is the DOM footprint smaller than what is generated with Ext JS?
That depends. Ext JS classic had a larger DOM footprint than Ext JS modern due to the structure needed to be functionally identical in all supported browsers especially the legacy browsers. The React components you author, or libraries you choose to implement, may or may not have a leaner DOM footprint than Ext JS modern depending on their implementation.
Are there any preferred IDEs or browser plugins for developing with React?
Many of the common IDEs support ES2015+ syntax as well as JSX. JSX and ES2015+ are both commonly found in the React examples you’ll see in this series as well as within the React community at large. Additionally, helpful browser extensions have been developed by the React community including Chrome extensions for React, Redux, and MobX.
Is there a way to make a React application stateful like with Ext JS’ Ext.state.Provider / stateful setup?
It’s possible to store a component or application’s state in localStorage or some other storage instrument. Some community-created solutions exist to simplify the stateful storage process.
Is there a site like fiddle.sencha.com where I can make and share React code snippets?
While there isn’t a sandbox site from Facebook, Code Sandbox is a great site to test out React code including the loading popular modules from npm.
Is there a type checking solution for React?
Flow is a popular typing library used with React and is maintained by Facebook. TypeScript can also be used with React.
What was the biggest challenge when you migrated from Ext JS to React?
We get asked this question a lot. The biggest challenge was more of a mental change than the obvious technical differences. The ways we had been doing things with Ext JS were not really considered best practices with React. For example, subclassing, plugins, and mixins are a common thing in Ext JS but React favors composition.
Where should I start from when migrating an application to React?
Migrating an application to React is a process that can be observed from many angles. If you need to maintain an existing application and you can migrate step by step, then you can start from the smallest components in your application’s hierarchy.
If you migrate to a fresh React codebase, then you can focus on setting the right styling (theming) setup and building a reusable component library when working on the MVP features.
Do you miss any part of Ext JS since working with React?
Ext JS has been known for first-class components for a decade now and you simply cannot replace that overnight. However, components within the React ecosystem are getting better every day so while you won’t have a single library of components, you can still accomplish the same things with multiple, more dedicated libraries with React.
There is a downside to how Ext JS has implemented components: solve everyone’s problem. This means that there is a lot of code and functionality with every Ext JS component that you may never need. For example, a regular text form field. In Ext JS, the amount of JavaScript code to maintain all the functionality behind that component is in the thousands of lines. With React, you don’t need all that code and you can easily create a text field with a few lines of code that may suit your needs. Check out our Form Field article to see how little code you may need.
Conclusion
We hope that the Ext JS to React article series has proven helpful to readers. If you’re considering migrating an application to React or are starting an original application from scratch, you’ll find the React community is robust, inventive, and helpful. If you’re looking to collaborate with professionals on training, architecture, front end, or even back end development, look no further than the good folks at Modus Create. We’d love to help you achieve your development goals!
