Latest Ext JS 7.8 is now available. Learn more

React Apps Development Using ReExt with Ext JS Components

May 8, 2024 1368 Views
Show

The world is moving fast towards online businesses. Businesses are established online via social media, mobile apps, and websites. In other words, an online presence has become a need for businesses to stay competitive. You will find many tools in the market to develop business apps. One of the most popular tools is Ext JS. People prefer React JS for the development process of their apps. Therefore, Ext JS Components by Sencha introduced ReExt into the market for creating React apps.

In this blog, we will introduce you to ReExt, explain how to get started with ReExt to build an enterprise application and demonstrate advanced ReExt techniques. Finally, we will discuss the benefits of choosing Ext JS components for your React components apps. Let’s begin our journey!

React Apps Development Using ReExt with Sencha Ext JS Components

What Is ReExt?

Let’s explain ReExt in simple words. It integrates Ext JS components inside your React codebase, enabling you to develop data-intensive and modern React applications. ReExt is a comprehensive components library by Sencha Ext JS for ReExt. It comes with more than 140 pre-built components, including grids, forms, charts, and more. The best part? You can build tools with feature-rich interfaces within no time. It leads to development with incredible speed.

Here is why choosing ReExt can be your best decision:

👉Continuous updates and support

👉High performance

👉Cross-platform and cross-browser compatibility

👉Fully customizable

👉Reusable components

Create react app with Sencha Ext JS's ReExt user interface or user interfaces

How Do You Get Started with ReExt?

Now that you have learned about ReExt let’s show you how to get started with it as a beginner.

First, open the web page https://www.sencha.com/products/reext/ It will help you learn about the ReExt. Make sure that it is fulfilling all your project requirements.

It is fascinating to know that there is a ReExt designer extension in Visual Studio Code. You should use it to get started building React applications with ReExt.

To add the ReExt Designer Extension to VS Code, open the Extensions Activity Bar, click the three-dot menu at the top right of the Extensions View, and choose ‘Install from VSIX…’.

Contact Sencha support today to have more guidance on using the ReExt JS.

Visual Studio Code Web application development to fetch data using react code in a new react project or react native

Quick Start – Without Using VS Code Extension

This setup takes less than one minute to run. In this section, we assume that NPM is already installed on your system. The best part? You can run all the commands at once.

Setup on MacOS

Use the commands below in a MacOS terminal window.

Vite

npm create vite@latest reextvite -- --template react-swc
cd reextvite
npm install @gusmano/reext@latest
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
npx vite --open

Create Your React App

npx create-react-app reextcra
cd reextcra
npm install @gusmano/reext@latest
cp node_modules/@gusmano/reext/dist/example/ReExtData.json src/ReExtData.json
cp node_modules/@gusmano/reext/dist/example/App.jsx src/App.js
cp node_modules/@gusmano/reext/dist/example/main.jsx src/index.js
npm start

Setup on Windows

Use the commands below in Windows Command Prompt.

Vite

npm create vite@latest reextvite -- --template react-swc
cd reextvite
npm install @gusmano/reext@latest
xcopy node_modules\@gusmano\reext\dist\example\ReExtData.json src\ReExtData.json /Y
xcopy node_modules\@gusmano\reext\dist\example\App.jsx src\App.jsx /Y
xcopy node_modules\@gusmano\reext\dist\example\main.jsx src\index.js /Y
npx vite --open

Create React App

npx create-react-app reextcra
cd reextcra
npm install @gusmano/reext@latest
xcopy node_modules\@gusmano\reext\dist\example\ReExtData.json src\ReExtData.json /Y
xcopy node_modules\@gusmano\reext\dist\example\App.jsx src\App.js /Y
xcopy node_modules\@gusmano\reext\dist\example\main.jsx src\index.js /Y
npm start

A developer is using the javascript library for rendering components in a javascript code server side rendering

How Do You Build a Simple Application with ReExt?

Here is the step-by-step guide on creating a React components web apps:

1. Create a React Application

Use the below command to create a new React application.

   npx create-react-app reextcra

2. Install Vite

Alternatively, you can use Vite to create a React application.

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

3. Installation

Use npm to install React ReExt.

npm install @gusmano/reext

4. Installing the Sencha ExtJS SDK:

React ReExt depends on Sencha ExtJS. You need to have the ExtJS framework installed in the public folder of your React project.

For demo purposes, the Quick Start application is configured to run Sencha ExtJS version 7.0.0 GPL from a remote server.

👉Note that this configuration is not suitable for licensed development.

5. Configuring React ReExt

React ReExt can be configured to use any commercially available version of the Sencha Ext JS framework (7x and above). React ReExt has been tested with Sencha ExtJS version 7.8.0.

6. Usage – ReExtProvider

In your `main.jsx` or `index.js`, use the `ReExtProvider` component to wrap your application. Here is the example code:

   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}>

           <App />

       </ReExtProvider>,

       document.getElementById('root')

   );

7. 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;

8. Run the React Application

Use the following commands to run your React application:

Create React App

npm start

Vite:

npx vite --open

Two developers are modifying an existing website

What Are the Advanced ReExt Techniques for React Apps?

Advanced ReExt Techniques come with more complex use cases. In other words, it offers powerful solutions for:

  • State management
  • Data binding
  • Theming

✔️State management can be achieved through React’s Context API or Redux. Furthermore, it provides a centralized store for shared data.

✔️Data binding enables dynamic updates between the UI and the data model. In other words, it helps in ensuring consistency.

✔️Theming allows customization of the application’s look and feel. As a result, it can give us an excellent user experience.

Example of state management

// Define context

const AppContext = React.createContext();

// Provide context in App component

const App = () => {

    const [state, setState] = useState(initialState);

    return (

        <AppContext.Provider value={{ state, setState }}>

            <MyComponent />

        </AppContext.Provider>

    );

};

// Consume context in child component

const MyComponent = () => {

    const { state, setState } = useContext(AppContext);

    // Use state and setState here

};

React Apps: Example of data binding

// Define a model

Ext.define('MyApp.model.User', {

    extend: 'Ext.data.Model',

    fields: ['name', 'email']

});

// Create a store

const store = Ext.create('Ext.data.Store', {

    model: 'MyApp.model.User',

    data: [

        { name: 'John Doe', email: '[email protected]' },

        { name: 'Jane Doe', email: '[email protected]' }

    ]

});

// Use data binding in a component

const MyComponent = () => {

    const store = Ext.getStore('MyStore');

    return (

        <ReExt xtype="grid"

            store={store}

            columns={[

                { text: 'Name', dataIndex: 'name', flex: 1 },

                { text: 'Email', dataIndex: 'email', flex: 1 }

            ]}

        />

    );

};

React Apps: Example of theming

// Define a theme

Ext.theme.addManifest({

    themeName: 'MyTheme',

    stylesheets: [

        'resources/css/my-theme.css'

    ]

});

// Apply the theme to the application

Ext.theme.setTheme('MyTheme');

What Are the Benefits of Using ReExt in Your React Apps Projects?

Using ReExt in your React projects offers several benefits. These benefits can enhance your development experience. Let’s explore those benefits one by one.

  • One major advantage is improved developer productivity due to the seamless integration of Ext JS components into React applications.
  • Additionally, ReExt enables faster development cycles by providing a familiar and consistent development environment for both Ext JS and React developers.
  • Furthermore, ReExt simplifies the process of integrating Ext JS components into React projects. As a result, it can help us in reducing development time and effort.

React Apps: Conclusion

This blog was all about using Ext JS to create react apps in web development. We have introduced you to the modern React app interactive components using the ReExt JS. We showed how you could create a simple data-fetching application using the ReExt react component. By the end, we showed some ReExt techniques and the benefits of using ReExt JS for a React team. Create your web app today by integrating react by Ext JS.

Also Read: A Step-by-Step Guide To An Ext JS Tutorial For Beginners

React Apps: FAQs

What is React ReExt UI component library?

ReExt provides a powerful library of React components. The components are customizable and accessible. They are made for enterprise applications. The library is available at `https://www.sencha.com/products/reext/`.

What are the advantages of a UI component library?

A UI component library ensures consistency in the product’s look and feel. It also promotes efficiency and scalability. It lets designers and developers add new features and pages quickly. They can do this while keeping a cohesive design.

What is the best UI library for React?

Many React UI component libraries are available in the market. You can choose the best one for your project. Try ReExt: `https://www.sencha.com/products/reext/`.

What is the advantage of using React ReExt?

React ReExt component libraries promote code reuse and flexibility. You can use them in the same project and across different projects. They also save developers time and effort by providing pre-built components.

Is It Easy to Use ReExt?

Yes, React ReExt components are generally considered easy to use. They are small, reusable pieces of code that can be used to build complex user interfaces. With well-guided documentation, they require less of a learning curve.
Sencha.com
The enterprise-grade UI framework for building complex, data-rich, modern, cross-platform web and mobile applications with powerful data grid capabilities.

 Unleash the full potential of your web applications with Sencha – get started now!

 

Sencha CTA Banner - Try Sencha Ext JS

Recommended Articles

Sencha Architect | Build Cross-Platform HTML5 Applications

Have you ever wondered how developers make apps that work perfectly on desktop and mobile devices? Creating apps that run smoothly on various platforms is…

Decoding the Divide: Enterprise Software Development vs. Standard Software Development

There are two main ways to develop software. These two ways include enterprise software application development and standard software development. Here, enterprise applications development customizes…

Web Application Development | Top 10 Frameworks in 2024

If you are a developer, you must know the role of frameworks in creating amazing applications. Web application development frameworks come with pre-built tools to…

Understanding the Difference: When to Use Ext JS Classic vs. Modern Toolkit

Ext JS is a JavaScript framework for building powerful web and mobile applications. The framework features over 140+ high-performance, fully tested, and customizable UI widgets/components.…

How to Work with Ext JS Models and Stores: Tutorial on Managing Data and State

Ext JS is a popular JavaScript framework for creating robust enterprise-grade web and mobile applications. The framework offers a rich set of high-performance and fully-tested…

Ext JS Performance Optimization for Large-scale Applications

Are you facing issues with Ext JS applications’ performance as they scale up? Don’t worry! This blog covers the main topics for optimizing Ext JS…

View More