Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

New UI Components for React Applications

DZone's Guide to

New UI Components for React Applications

Sencha's new React components help developers deliver data-intensive React apps while also keeping designers in the loop with their own tools.

· Java Zone
Free Resource

Bitbucket is for the code that takes us to Mars, decodes the human genome, or drives your next car. What will your code do? Get started with Bitbucket today, it's free.

It was good talking with Mark Brocato, engineering director, and Kristin Brennan, VP of marketing, at Sencha about their new ExtReact product, designed to enable React developers to add beautiful and powerful UI components to their applications with efficiency and ease.

Until now, React developers have been forced to build their own UI components from scratch — a time-consuming process that comes with significant integration and long-term maintenance risks, given that the average app lives for 3-5 years.

With the release of ExtReact, developers can quickly add sophisticated commercially tested and supported components to their React applications, accelerate time to market, and reduce upgrade and maintenance burdens. ExtReact offers more than 115 UI components, that are fully supported and designed to interact and work together seamlessly — over the lifetime of the application.

UI components include audio, video, calendars, grids, heatmaps, and charts.

With optimized performance and Sencha technical support, ExtReact makes delivering visually impressive, data-intensive apps simpler and faster than ever before. Developers can use the built-in material design-inspired theme, eliminating the need to construct custom styles and making it easy to create a fresh, modern user experience with minimal effort. Themes can also be easily modified or extended with Sencha Themer, enabling both developers and designers to create compelling themes without writing a single line of code.

ExtReact provides advanced capabilities for all its components. Key features include:

  • Adaptive and responsive design ensures the proper display of components across different form factors and screen sizes without the need for a separate stylesheet and eliminating the need to micromanage CSS settings.
  • Keyboard Navigation enables users to easily navigate the application via keyboard and improves accessibility aspects for disabled users.
  • Focus Management enables developers to use auto focus and spatial navigation features to deliver an enhanced user experience and accessibility.
  • The layout system is flexible, ensuring the proper sizing and positioning of all components and eliminating the need for separate stylesheets.
  • Sophisticated data management to efficiently and easily handle any size and source of remote data across device types.

All of this increases the productivity of developers while theming with hundreds of variables brings designers into the mix with developers to provide a superior user experience.

“The new direction Sencha is taking by exposing their components natively to React apps is the most intriguing and compelling component option I've seen for the React community in a while,” said Blaine Bradbury, lead developer, HC Productions. “The open source components available for React projects are great, but incomplete and unmaintained community libraries pose big business risks and hurdles. ExtReact is a perfect concept to overcome current business and coding challenges for React application developers.”

Bitbucket is the Git solution for professional teams who code with a purpose, not just as a hobby. Get started today, it's free.

Topics:
java ,react ,ui components ,responsive design

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}