Announcing Sencha ExtReact

On behalf of the entire Sencha team, we’re excited to announce the release of ExtReact, our newest product. ExtReact is the most complete set of professionally tested and commercially supported React components for developers to use in creating visually stunning, data-intensive applications on desktop and mobile devices. It also includes plugins for Webpack and Babel to optimize builds, and theming tools to give designers and developers complete control over their application’s look and feel.

ExtReact Highlights

• Harness the power of big data with the most powerful Grid component available.
• Allow your users to slice and dice data with the Pivot Grid ad-hoc report builder component.
• Create beautiful, dynamic applications with the 100+ Material design inspired components including Tabs, Dialogs, Sheets, Menus, Toolbars, and Lists.
• Develop for all screens and environments using responsive layouts.
• Build easy-to-use data entry forms using the extensive collection of form fields.
• Add interactive scheduling functionality to your app with Calendar components.
• Add stunning data visualization capabilities to your app with an extensive collection of charts and D3 visualization components.
• Fully control your application’s look and feel with the powerful ExtReact theming API or use Sencha Themer to style your application without writing any code.
• Compress and optimize application builds with the provided Webpack and Babel plugins.
• Multiple example applications, including the ExtReact Conference App, ExtReact Kitchen Sink, with views for desktop, tablets, and smartphones.

Try It Out

• Download the free 30-day trial of ExtReact and Themer
• Read the Getting Started guide and build your first React app with ExtReact components
• View the ExtReact Kitchen Sink examples and Conference App on any device
• Register for our upcoming webinar: Introducing ExtReact – Adding Powerful Sencha Components to React Apps, Wed, 5/31 at 10am PDT

Why ExtReact

React is a popular JavaScript framework that offers a component-based approach to building web apps. React, however, does not include any pre-built components. Many apps require trees, menus, grids, charts, forms, and other components to deliver the functionality their users need. React developers are faced with the choice of either building these components from scratch or getting them from the community.

Building robust, beautiful components that perform well on all devices and platforms is a time-consuming and costly undertaking. Supporting and maintaining those components over the life of your app as browsers and language standards evolve adds even more work.

Fortunately, the React community is quite large, so there are many pre-built components available. Using components from the open source community, however, introduces some risks and challenges. Release timelines, maintainer commitment, and overall quality vary greatly from project to project. Furthermore, as React itself is updated, some libraries may become incompatible while others may require the latest version of React. Juggling 10 or 15 different component libraries can be a nightmare. The best way to mitigate this problem is to get as many of the components from as few libraries as possible.

ExtReact gives you the most complete set of components for your React apps in a single, commercially supported, and professionally maintained package. Let’s take a look at what’s inside.

ExtReact Grid

Grids are often the centerpiece of powerful, data-driven applications. The ExtReact Grid provides a powerful way to display, sort, group, and edit data. All columns can be rearranged, resized, hidden, and sorted. Users can select rows, cells, or columns just like they can in Microsoft Excel. The Grid allows users to edit data on desktop, tablets, and smartphones, and it automatically chooses the right experience on each device. Data can be exported to Excel, CSV, TSV, and other formats.

ExtReact Tree

Trees are often required for displaying hierarchical data in desktop, tablet, and smartphone applications. The ExtReact Tree is derived from the Grid component and inherits all of its features including column resizing, sorting, filtering, and cell editing, as well as drag and drop.

 render(){
        return(
            <Tree
                title="Heterogeneous Geographical Tree"
                store={this.store} >
                <TreeColumn 
                    text="Name"
                    dataIndex="name"
                />
            </Tree>
        )
    }

ExtReact Pivot Grid

Microsoft Excel’s pivot table is a popular mechanism for summarizing, aggregating, and exploring data. The ExtReact Pivot Grid provides a simple way to bring pivot capabilities to web applications. Pivot Grid enables your users to explore and aggregate multidimensional data with multiple aggregation methods such as sum, count, average, and more.

ExtReact Calendar

You can add an entire Calendar feature to your app with just a single component. The ExtReact Calendar and related components digest and visualize event data based on timeframe (months, days, weeks, etc). The Calendar component comes with time zone support, as well as drag and resize validations.

ExtReact Charts

Charting is an important part of providing great data visualization functionality. The ExtReact Charts package provides all of the common chart types in 2D and 3D such as pie, bar, column, line, and scatter, as well as more sophisticated charts such as box plots, candlesticks, and radar graphs. Each chart is compatible with all major browsers. Sparkline charts can also be embedded within Grid cells.

ExtReact D3

D3 is an extremely popular choice for data visualization. The ExtReact D3 components make it easy to integrate D3 into your React application. D3 trees, sunbursts, heatmaps, and more are included as ready-to-use components that update in real time as data changes.

render() {
        return (
                <D3_Sunburst
                    store={this.store}
                    selection={selection}  
                />
        )
    }

ExtReact Forms

The ExtReact Form components provide input masking, data validation, keyboard navigation, and focus management to help you deliver pain-free data entry for your users.

ExtReact List

Lists are an important component in mobile-first applications. The ExtReact List component supports grouping, indexing, paging, and more. You can also configure multiple swipe actions, such as deleting or replying to a message, using an accordion or stepper design.

render() {
        return (
            <List
                store={this.store}
                plugins={[{
                    type: 'listswiper',
                    // left and right configs
                }]}
            />
        )
    }

ExtReact Tabs

Tabs are a great way to allow users to quickly flip between multiple views. With ExtReact Tabs, you get multiple configuration options for position, title, and icon. Tabs can also be closeable and disabled.

ExtReact Features

Flexible Layouts

With ExtReact Layouts, you can handle the sizing and positioning of every component in the app across different form factors and device types. ExtReact provides layouts that automatically adjust the size of child elements based on the available space. Learn more by reading the ExtReact Layouts Guide.

Responsive Props

Each component can be configured with different prop values for different screen sizes and device platforms using the responsiveConfig and platformConfig props:

<SearchField 
    ui="faded" 
    placeholder="Search..." 
    responsiveConfig={{
        "width <= 600": { 
            flex: 1
        }, 
        "width > 600”: {
            width: 200
        }
    }}
    platformConfig={{
	  "phone": {
		ui: 'faded-phone'
  }
    }}	
/>

Learn more by reading the ExtReact Developing for Multiple Environments and Screens guide.

Data Package

ExtReact provides a data package to efficiently scale remote data with ease. The data package allows your application to connect to any back-end data source and provides real-time update capabilities to grids, trees, charts, and more, as well as declarative sorting, filtering, and grouping. It features an extensible validation system with numerous built-in validators for currency, date, email, exclusion, inclusion, format, ip address, length, number, phone, time, and more. Learn more by reading the ExtReact Data Package guide.

We created an application example to show you how to use ExtReact’s data store with a REST proxy and implement server-side sorting, filtering, and paging using node.js and SQLLite. Check out the GitHub repo and follow the README instructions to get started.

Theming

ExtReact features an extensive Sass-based theming API that gives developers complete control over the look and feel of their applications. ExtReact Premium includes Sencha Themer, a tool that allows both designers and developers to create beautiful themes for ExtReact apps without writing code. Learn more by reading the ExtReact Theming guide.

TypeScript Definitions

ExtReact includes TypeScript definitions that enable code completion in several code editors including Visual Studio Code. This feature allows you to receive completion suggestions for ExtReact components and props.

Sencha Fiddle for ExtReact

Sencha Fiddle is a free tool that allows you to try ExtReact code in your browser without downloading or installing anything. You can easily share your ExtReact code by saving and sharing fiddle URLs.

Accessibility

ExtReact components support basic accessibility features such as keyboard navigation and focus management. You can use the keyboard to navigate between and edit grid cells, switch tabs, control list selection, navigate trees and menus, open and close dialogs, and more.

Real-Life Example – Conference App

As part of the ExtReact launch, we’ve provided an example application on GitHub called the ExtReact Conference App. The ExtReact Conference App (also available to view on our Examples web page) shows you how to build a responsive UI using ExtReact components to handle desktop, tablets, and smartphones. It also shows you how to integrate two of the most popular libraries in the React ecosystem: Redux and React Router.

Your Feedback

We’re looking forward to seeing the awesome web applications you create with ExtReact. We hope you enjoy building great apps with ExtReact and look forward to reading your feedback in the ExtReact forum.