The release of ExtReact 6.6 with support for the latest React framework version 16.x.

1. Sencha Inc. ©2018
ExtReact 6.6 Release
Sandeep Adwankar
@adwankar

2. Sencha Inc. ©2018
Why ExtReact?
React is a framework without built-in components

3. Sencha Inc. ©2018
React with ExtReact
Create enterprise apps with React

4. Sencha Inc. ©2018
ExtReact
● 115+ powerful UI components that can be
quickly and easily added to React apps
● Commercially tested and supported – a
lifeline when an app is on the line
● Components work together seamlessly over
the lifetime of the application
● Accelerate time to market and reduces
upgrade and maintenance burdens
● Enables developers to deliver visually
stunning apps faster than ever before
Most Comprehensive set of beautiful React components

5. Sencha Inc. ©2018
ExtReact 6.6 and 6.6.1 - Key Highlights
● Use Facebook’s latest React 16.x framework
with new “Fiber” underlying architecture
● Easily create new ExtReact apps with new
application generator
● New components - Time Panel, Time Field,
and Gauges component with needles
● Visually create beautiful themes for React
apps with new Sencha Themer 1.3.3
Release to support latest React framework

6. Sencha Inc. ©2018
React 16 Support
● Use latest React 16.x framework along with
webpack 4
● Use React 16 Virtual DOM improvements with
ExtReact components
● Better React app error handling
Use React 16 for the latest React features and performance improvements

7. Sencha Inc. ©2018
Easy Upgrade path to React 16
● Use new ExtReact tag – once before app
launch
Better Maintainable Apps with React 16
Theming NPM Packages
Modern
components
Classic
accessible
components
(Optional)
const render = (Component, target) =>
{
ReactDOM.render(
<ExtReact>
<AppContainer>
<Component/>
</AppContainer>
</ExtReact>,
target
)
}

8. Sencha Inc. ©2018
Improvements to create advanced React 16 apps
● Use WidgetCells to create advanced
grids
● Access component refs with cmp
Create advanced React 16 Apps
"dependencies": {
"@sencha/ext-react": "^6.6.1",
"react": "^16.5.0",
"react-dom": "^16.5.0",
"react-router-dom": "^4.3.1"

9. Sencha Inc. ©2018
ExtReact 6.6 Tooling – Ext-React-Gen
● Generate your first app with just one
command
● Option to use JavaScript or
TypeScript
● Interactive mode to guide you
through application creation mode
● Watch immediately changes to code
in live running app
Generate your first React app within minutes

10. Sencha Inc. ©2018
ExtReact 6.6 Tooling – Web Pack Plugin
● Support for latest Web Pack 4
● Support for Babel 7
● Effortless compilation, transpilation, and
bundling
Simplifies building complex apps
"devDependencies": {
…
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"

11. Sencha Inc. ©2018
Time Panel - New ExtReact Component
● Easily set time using analog clock face
● Supported on desktops, tablets and iOS and
Android devices
● Repositions header based on device
orientation
Use simplicity of analog clock to set time

12. Sencha Inc. ©2018
Time Field - New ExtReact Component
● Simple field component that can be used in
any input form
● Validation of time data in multiple time format
and chosen locale
● Can be used standalone or with time panel
● Themeable
Multiple options of time input and validation

13. Sencha Inc. ©2018
Gauges Component – New ExtReact UX
● Use pre-built custom gauges and needles
● Customize needle and gauges as per your
own specification
● Supported for both modern and classic
applications
Custom look and feel to show interval values

14. Sencha Inc. ©2018
Support for Classic Component and Themes
● New high-contrast theme to make apps
easier for visually impaired users to view
● Flat minimalist imageless based on Triton
design Easily localize your app to support
non-English languages
● Color, fonts and padding support accessibility
guidelines
Use Graphite - New beautiful accessible theme in React apps

15. Sencha Inc. ©2018
Themer 1.3.3 – Now Supporting ExtReact 6.6
● Support for ExtReact 6.6
● Support for styling new and improved
components – Time Panel, Time Field
● Support for new Graphite Theme
The Theme Builder Continues to Improve

16. Sencha Inc. ©2018
Create Robust Apps with support for Test 2.2
● Sencha Test 2.2 has support for end-to-end
testing of ExtReact 6.6 apps
● Directly inspect ExtReact apps and create
robust test cases
● Create ExtReact 6.6 tests directly within
Sencha Studio
● Examples of ExtReact test suites
Full end to end testing of ExtReact Apps with Sencha Test

17. Sencha Inc. ©2018
Updated Fiddle to creat ExtReact 6.6 apps
● Easily create ExtReact apps
● Run apps directly in cloud
● Several fiddle examples with ExtReact 6.6
release
Create snippets of ExtReact Apps in cloud