The document discusses using React with Ext JS by leveraging the @extjs/reactor library. It covers how Ext JS components can be used as JSX tags in React, how to handle events, access component refs, configure complex props, handle updates, and use the @extjs/reactor-webpack-plugin to set up a React app for Ext JS.

1. Ext JS + React
A Match Made in UX Heaven
Mark Brocato
Sr. Engineering Manager, Sencha

2. My Journey to React

3. My Journey to React

6. Scenario Builder

7. My Journey to React

8. My Journey to React

9. My Journey to React

10. My Journey to React

11. React Primer
• A JavaScript library for building user interfaces
• React is the just the V in MVC
• Solve one problem: Build large applications with data that changes over time.

12. React Components
Component
data
HTML

13. Views as Pure Functions
data
HTMLFunction

14. Views as Components
import React, { Component } from 'react';
class NewsFeed extends Component {
render() {
const { news } = this.props;
return (
<ul>
{ news.map(story => (
<li>
<div className="title">{story.title}</div>
<div>by {story.author}</div>
</li>
)) }
</ul>
)
}
}

15. Views as Pure Functions
function NewsFeed({ news }) {
return (
<ul>
{ news.map(story => (
<li>
<div className="title">{story.title}</div>
<div>by {story.author}</div>
</li>
)) }
</ul>
)
}

16. JSX
<div className="title">{story.title}</div>

17. JSX
<div className="title">{story.title}</div>
React.createElement('div', { className: 'title'}, store.title)

18. Views as Components
function NewsFeed({ news }) {
return (
React.createElement('ul', {}, news.map(story => {
return React.createElement('li', {}, [
React.createElement('div', { className: 'title' }, store.title),
React.createElement('div', { }, `by ${store.author}`)
])
}));
)
}

19. React’s One-Way Data Flow (Flux)
Store
Component Component Component
Component Component Component Component
data
API

20. Virtual DOM to the Rescue

21. React and Ext JS Similarities
• Ext.Component
• configs
• items: []
• React.Component
• props
• children

22. What’s Missing?
✔ Routing: react-router
✔ Architecture: redux
Components

24. @extjs/reactor

25. React Hello World
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
(
<div>
Hello World!
</div>
),
document.getElementById('root')
);

26. React Hello World w/ Ext JS
import React from 'react';
import ReactDOM from 'react-dom';
import install from ’@extjs/reactor';
install();
Ext.onReady(() => {
ReactDOM.render(
(
<x-panel title="Ext JS in React">
Hello World!
</x-panel>
),
document.getElementById('root')
);
});

27. @extjs/reactor
• Use any xtype as a JSX tag.
• Mix and match HTML and Ext JS
import React from 'react';
import ReactDOM from 'react-dom';
import install from ’@extjs/reactorjs';
install();
Ext.onReady(() => {
ReactDOM.render(
(
<x-panel title="Ext JS in React">
Hello World!
</x-panel>
),
document.getElementById('root')
);
});
Ext.create({
xtype: 'panel',
title: 'Ext JS in React',
html: 'Hello World!'
});

28. Responding to Events
• All props starting with “on” are
automatically converted to Ext JS
event listeners
• You can also specify event handlers
using a listeners prop, just like in
traditional Ext JS
import React, { Component } from 'react';
class MyComponent extends Component {
onSliderChange(slider, value) {
console.log('value', value);
}
render() {
return (
<x-slider
onChange={this.onSliderChange.bind(this)}
/>
)
}
}

29. Responding to Events
• All props starting with “on” are
automatically converted to Ext JS
event listeners
• You can also specify event handlers
using a listeners prop, just like in
traditional Ext JS
import React, { Component } from 'react';
class MyComponent extends Component {
onSliderChange(slider, value) {
console.log('value', value);
}
render() {
return (
<x-slider
onChange={this.onSliderChange.bind(this)}
/>
)
}
}
Ext.create({
xtype: 'slider',
listeners: {
change: this.onSliderChange
}
});

30. Component Refs
• As with DOM elements, you can
access Ext components by adding a
“ref” prop.
• Here this.refs.slider is an instance of
Ext.slider.Slider
import React, { Component } from 'react';
class MyComponent extends Component {
onSliderChange(slider, value) {
console.log('value', this.refs.slider.getValue());
}
render() {
return (
<x-slider
ref="slider"
onChange={this.onSliderChange.bind(this)}
/>
)
}
}

31. More Complex Configs
• It’s all just JavaScript.
• React props => Ext JS configs
class MyComponent extends Component {
render() {
return (
<x-grid
plugins={[
{ type: 'columnresizing' }
]}
columns={[
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email' }
]}
store={{
data: [
...
]
}}
/>
)
}
}

32. Layouts
• Work like you’d expect
class MyComponent extends Component {
render() {
return (
<x-container layout="hbox">
<x-button text="Left"/>
<x-button text="Right"/>
</x-container>
)
}
}

33. Layouts
• Work like you’d expect
class MyComponent extends Component {
render() {
return (
<x-container layout="hbox">
<x-button text="Left"/>
<x-button text="Right"/>
</x-container>
)
}
}
Ext.create({
xtype: 'container',
layout: 'hbox',
items: [
{ xtype: 'button', text: 'Left' },
{ xtype: 'button', text: 'Right' }
]
});

34. Updates
• When a prop changes,
@extjs/reactor automatically calls the
corresponding setter method to
update your component’s configs.
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = { dirty: true };
}
render() {
const text = this.state.dirty ?
"Save Changes" : "Changes Saved";
return (
<x-button
text={text}
handler={this.onClick.bind(this)}
/>
)
}
onClick() {
this.setState({ dirty: false });
}
}

35. Updates
• When a prop changes,
@extjs/reactor automatically calls the
corresponding setter method to
update your component’s configs.
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = { dirty: true };
}
render() {
const text = this.state.dirty ?
"Save Changes" : "Changes Saved";
return (
<x-button
text={text}
handler={this.onClick.bind(this)}
/>
)
}
onClick() {
this.setState({ dirty: false });
}
}
button.setText(text);

36. Summing Up
props configs
on/A-Z/ listeners
child elements items: []
updates setter calls

37. @extjs/reactor-webpack-
plugin

38. Setting up your React app for Ext JS
ext-all.js reactor-webpack-plugin

39. Automatic Usage Detection
import React, { Component } from 'react';
Ext.require('Ext.window.Toast');
export default class MyDialog extends Component {
constructor(props) {
super(props);
this.store = Ext.create('Ext.data.Store', {
...
});
}
render (
<x-window>
<x-grid ... />
</x-window>
)
}
ext.js
ext.css

40. Configure Theme, Toolkit, and Packages
const ExtJSReactorWebpackPlugin = require('@extjs/reactor-webpack-plugin');
module.exports = {
...
plugins: [
new ExtJSReactorWebpackPlugin({
sdk: 'ext', // relative or full path to Ext JS SDK
toolkit: 'modern',
theme: 'theme-material',
packages: ['charts'],
output: path.join('build', 'ext')
})
]
...
};

41. @extjs/reactor-boilerplate

42. reactor-boilerplate