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.
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.
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)}
/>
)
}
}