The Ext JS Reactor: Use Your Favorite Ext JS Components Inside React

November 30, 2016 1421 Views

Combining Ext JS components with a React application presents an opportunity to utilize the best of both worlds. Ext JS offers a variety of UI components. React, on the other hand, brings versatility and high performance. However, blending these two frameworks is not always easy. ReExt solves this issue. ReExt allows you to use Ext JS components in a React app without rewriting them.

Use Your Favorite Ext JS Components Inside React

In this blog, we will demonstrate how ReExt works. We will guide you through each step of using it. You will learn how to construct a basic app using ReExt. We will also explain why ReExt is a good integration option.

We will discuss the advantages of using ReExt. Performance issues will also be addressed. Additionally, best practice guidelines will be provided. By the end, you will comprehensively understand integrating Ext JS with React. Whether you’re a React expert or new to Ext JS, this guide is for you.

Let’s get started.

How To Use Ext JS Inside React?

The easiest way to integrate Ext JS within React is through ReExt. Let’s explore it.

ReExt

ReExt is a library that gives React developers access to Ext JS components. It allows these components to be embedded in React apps without needing to rewrite the entire application. Developers using ReExt can leverage advanced Ext JS components, like grids and charts, within a React environment. This library integrates React’s architecture with Ext JS features, ensuring they complement each other for optimal performance.

The main advantage of ReExt is that it lets React developers use Ext JS components without mastering a new framework. It allows for smooth integration while maintaining both frameworks’ strengths. This makes it easier for developers to work with React and Ext JS together.

ReExt

How Does ReExt Work?

ReExt works by wrapping Ext JS components as React components. These wrapped Ext JS components act like any other React component. One of the key aspects of ReExt is that it respects React’s component lifecycle. This ensures proper rendering of Ext JS components in a React application.

ReExt also manages state and data exchange between React and Ext JS components. This allows changes and data updates without interruptions.

How Do You Use ReExt?

Now that you know the basics of ReExt, let’s walk through the initial steps. First, visit ReExt’s official page at https://www.sencha.com/products/reext/. This page provides detailed information about ReExt and its features. It’s important to review this page carefully to determine if ReExt suits your project needs.

One key component is the ReExt Designer Extension for VS Code. This extension makes it easier to create React applications using ReExt. If you are using Visual Studio Code, this extension will be helpful.

Here are the steps to install the ReExt Designer Extension in VS Code:

Check for the Extensions Activity Bar in the Visual Studio Code interface.
Use the extension to speed up React app development with ReExt.
If you face any issues, contact Sencha support for assistance.

How Do You Use ReExt

Quick Start – Without Using VS Code Extension

When you do not wish to use the VS Code extension, you can start by creating a manual setup for the React project. The installation is simple. You will likely complete it in a minute, assuming NPM is already installed on your computer. The best part is that you can execute all the commands in a single step.

Setup on MacOS
Here’s a simple guide to get started with ReExt on MacOS:
Open a terminal window on your Mac.

Use the following command to create a new Vite project with the React template:

npm create vite@latest reextvite -- --template react-swc

Once the project is created, navigate into the project directory:

cd reextvite
Install the latest version of the ReExt package:
npm install @gusmano/reext@latest

Next, copy the required example files to your project:

cp node_modules/@gusmano/reext/dist/example/ReExtData.json src/ReExtData.json
cp node_modules/@gusmano/reext/dist/example/App.jsx src/App.jsx
cp node_modules/@gusmano/reext/dist/example/main.jsx src/main.jsx

Now, run the application using Vite:

npx vite --open

This will launch your ReExt project in the browser and you can start customizing it as needed.

Create Your React App
Alternatively, you can set up a new React app using Create React App. Here’s how:

Create a new React app:

npx create-react-app reextcra

Navigate to the project directory:

cd reextcra

Install the latest version of ReExt:

Install the latest version of ReExt:
npm install @gusmano/reext@latest

Copy the necessary example files:

cp node_modules/@gusmano/reext/dist/example/ReExtData.json src/ReExtData.json
cp node_modules/@gusmano/reext/dist/example/App.jsx src/App.jsx
cp node_modules/@gusmano/reext/dist/example/main.jsx src/main.jsx

Finally, run the React app:

npm start

This will start your React application, integrating ReExt seamlessly.

How Do You Build a Simple Application by Using ReExt?

Here’s a simple step-by-step guide to help you create a React application using ReExt:

Create a React Application
Start by creating a new React app. Run the following command:

npx create-react-app reextcra

Install Vite (Optional)
Alternatively, you can use Vite to create a React app. It’s a faster build tool. Use this command to set it up:

npm create vite@latest reextvite -- --template react-swc

Install React ReExt
After setting up the React app, install React ReExt by running:

 npm install @gusmano/reext

Install the Sencha ExtJS SDK
React ReExt relies on Sencha ExtJS. You need the ExtJS SDK in your project’s public folder. The Quick Start example uses Sencha ExtJS version 7.0.0 GPL from a remote server.
Note: This setup is for demo purposes. For licensed development, install ExtJS locally.

Configure React ReExt
React ReExt works with Sencha ExtJS versions 7.0.0 and above. It has been tested with ExtJS version 7.8.0 . Ensure you are using a compatible version.

Usage – ReExtProvider
In your main.jsx or index.js, use the ReExtProvider component to wrap your app. Here’s an example:

import { ReExtProvider } from '@gusmano/reext';
const ReExtData = {
"sdkversion": "7.8.0",
"toolkit": "classic",
"theme": "classic",
"debug": false,
"urlbase": "./",
"location": "remote"
}
ReactDOM.render(
< ReExtProvider splash={true} ReExtData={ReExtData}>
< pp />
< /ReExtProvider>,
document.getElementById('root')
);

Usage Example Code

import React, { useState, useRef } from 'react';
import ReExt from '@gusmano/reext';
const App = () => {
const [labelcmp, setLabelCmp] = useState(null);
const labelcmpRef = useRef();
labelcmpRef.current = labelcmp;
const [labeltext, setLabelText] = useState('initial text');
const [row, setRow] = useState(null);
return (
< div style={{ boxSizing: 'border-box', height: '100%', display: 'flex', flexDirection: 'column' }}>
< ReExt xtype='logo' />
< div style={{ display: 'flex' }}>
< ReExt xtype='button'
config={{ text: 'click me', width: 100, ariaLabel: 'demobutton' }}
onTap={() => {
labelcmpRef.current.setHtml('set using method call');
setLabelText('set using state');
}}
/>
< /div>
< ReExt xtype='grid'
style={{ height: 300 }}
config={{
title: 'grid',
columns: [
{ text: 'Name', dataIndex: 'name', width: 200 },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone', width: 200 }
],
data: [
{ name: 'Lisa', email: '[email protected]', phone: '555-111-1224' },
{ name: 'Bart', email: '[email protected]', phone: '555-222-1234' },
{ name: 'Homer', email: '[email protected]', phone: '555-333-1244' },
{ name: 'Marge', email: '[email protected]', phone: '555-444-1254' }
]
}}
onSelect={(grid, selected) => {
var row = selected[0].data
setRow(row)
var rowString = JSON.stringify(row)
labelcmpRef.current.setHtml(rowString)
setLabelText(rowString)
}}
/>
< div style={{ flex: 1, padding: 20, border: '1px solid gray' }}>
{row !== null &&
<>
< ReExt xtype='label' config={{ html: `name: ${row.name}` }} />
< ReExt xtype='label' config={{ html: `email: ${row.email}` }} />
< ReExt xtype='label' config={{ html: `phone: ${row.phone}` }} />
< />
}
< /div>
< div style={{ flex: 1, padding: 20, border: '1px solid gray' }}>
< ReExt xtype='label'
config={{ html: 'initial text' }}
ready={(cmp) => {
setLabelCmp(cmp)
}}
/>
< ReExt xtype='label'
config={{ html: labeltext }}
/>
< /div>
< /div>
)
}
export default App;

Next, use the below given commands to run your React app:

Create React App
npm start
Vite:
npx vite --open

Why Choose ReExt?

One of the biggest advantages of ReExt is that it saves time. Instead of rewriting existing Ext JS components or learning new React-specific components, developers can simply use ReExt to integrate Ext JS directly into their React applications. This can be a huge time-saver, especially for projects that already rely heavily on Ext JS components.

Another benefit is the performance of Ext JS components. Ext JS is known for its fast rendering and optimization, particularly when handling large datasets. By using ReExt, React developers can take advantage of these optimizations without sacrificing the reactivity and flexibility of React.

ReExt also makes it possible to keep both libraries—React and Ext JS—up-to-date without having to choose one over the other. Developers can continue using React’s powerful state management and component structure while still leveraging Ext JS’s rich UI components.

What Are the Best Practices to Follow When Integrating ReExt?

Like any other library, integrating ReExt into a React project comes with specific guidelines.

Firstly, it’s ideal to stick with React’s declarative approach. ReExt component usage should minimize dependency on direct DOM manipulation. React’s virtual DOM system efficiently handles rendering.

Secondly, Ext JS components are designed for performance. However, they should not be overused, especially when handling large datasets. Overuse could lead to performance issues. Always consider how data will be loaded and rendered to avoid bottlenecks.

Lastly, make sure to use React’s state management features. Use useState and useEffect to update app state while working with Ext JS components. This ensures that both systems work together smoothly.

Conclusion

ReExt makes it easier for React applications to use Ext JS components. The library provides tools that extend React’s limited extensibility while using ready-made Ext JS components. Developers can easily create and integrate sophisticated UI elements like grids, charts, and forms.

By following the guidelines in this blog, you can quickly learn how to start using ReExt. Whether building a simple or complex app, ReExt integration won’t be an issue. The benefits are clear: use Ext JS features in React without modifying the code. ReExt is the perfect solution to enhance React-based projects.