ExtReact provides 115+ pre-built UI components that you can easily integrate with React apps

1. Adding Powerful Ext JS Components
to React Apps
Sandeep Adwankar
Sr. Product Manager

2. Ext JS
2
Ext JS
Components
Ext JS Framework

3. Components
3
Tree Grid Calendar

4. Framework
4
Component
Component
Component
MVC

5. React: A Component Framework w/o Components
5
Ext JS
Components
Ext JS Framework
Ext JS
Components
React.js

6. Using Ext JS Components in a React World
• React
• Ext JS Framework Ext JS Reactor
• Ext JS Components
• Webpack with Sencha Cmd
• Babel
• Whatever else the developer wants to add
6

7. The React with Ext JS
7
React
• Renders your application
• Manages user interaction
• Maintains application state
• Coordinates communication
between components
Webpack
• Builds and optimizes all of
your front-end code: JS, CSS,
Images, etc…
Babel
• Use tomorrow’s JavaScript
today
• JSX
• TypeScript is an alternative
Ext JS Components
Ext JS Reactor
• Bridge for Ext JS
Components
Sencha Tools
• Sencha Cmd
• Themer
• Plugin, Stencils, Fiddle etc.

8. Getting Started
8
• Node 7
• Ext JS 6.2+
• Sencha Cmd 6.2+
• Copy a boilerplate from the extjs-reactor repo, packages dir
• npm install
• npm start
• Open in web browser (for example, http://localhost:8080)

9. @extjs/reactor
9
https://github.com/sencha/extjs-reactor

10. Hacker News Demo
10

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

12. React Components
12
Component
data
HTML

13. React Components as Pure Functions
13
data
HTMLFunction

14. Hello World
import React, { Component } from 'react';
export default class HelloWorld extends Component {
render() {
return <div>Hello World</div>
}
}
14
React.createElement('div', {}, 'Hello World');

15. HTML Can Only Take You so Far
15
import React, { Component } from 'react';
export default class HelloWorld extends Component {
render() {
return <button>Say Hello</button>
}
}

16. HTML Can Only Take You so Far
16
import React, { Component } from 'react';
export default class HelloWorld extends Component {
render() {
return <button>Say Hello</button>
}
}

17. HTML Can Only Take You so Far
17
import React, { Component } from 'react';
export default class HelloWorld extends Component {
render() {
return ???
}
}

18. The World Wide Web of React Components
18

19. npm install –save react-split-button
19

20. HTML Can Only Take You so Far
20
import React, { Component } from 'react';
import SplitButton from 'react-split-button';
export default class HelloWorld extends Component {
render() {
return (
<SplitButton
items: [{ label: 'Say Goodbye' }]
>
Say Hello
</SplitButton>
)
}
}

21. More Components…
21

22. Juggling Dependencies
"dependencies": {
"react-split-button": "^1.0.0",
"react-datagrid": "^0.5.4",
"react-tree": "^0.1.2",
"react-flexbox": "^2.1.0",
"react-calendar": "^1.1.0",
"react-tabs": "^2.3.4",
"react-layouts": "^1.0.1"
...
}
22

23. And Then One Day…
react: 15 => 16
23

24. Oh Boy…
"dependencies": {
"react-split-button": "^1.0.0",
"react-datagrid": "^0.5.4",
"react-tree": "^0.1.2",
"react-flexbox": "^2.1.0",
"react-calendar": "^1.1.0",
"react-tabs": "^2.3.4",
"react-layouts": "^1.0.1"
...
}
24

25. More Components from a Single Library
"dependencies": {
"@extjs/reactor": "^0.2.5”
}
25

28. http://examples.sencha.com/extjs/6.2.0/examples/kitchensink
28

29. Ext JS React Kitchen Sink
29

30. Implementing SplitButton with Ext JS
30
import React, { Component } from 'react';
import SplitButton from 'react-split-button';
export default class HelloWorld extends Component {
render() {
return (
<SplitButton
items: [{ label: 'Say Goodbye' }]
>
Say Hello
</SplitButton>
)
}
}

31. Implementing SplitButton with Ext JS
31
import React, { Component } from 'react';
import { SplitButton } from '@extjs/reactor';
export default class HelloWorld extends Component {
render() {
return (
<SplitButton
text: 'Say Hello',
items: [{ label: 'Say Goodbye' }]
/>
)
}
}

32. Importing Components from Ext JS Reactor
import { Grid } from '@extjs/reactor/modern';
32
xtype: grid

33. API Docs
33

34. API Docs
34

35. Configs => Props
import React from 'react';
import { TabPanel, Panel } from '@extjs/reactor/modern';
function App() {
return (
<TabPanel>
<Panel title="Tab 1">
Tab 1 body
</Panel>
<Panel title="Tab 2">
Tab 2 body
</Panel>
</TabPanel>
)
}
35

36. Events
import React from 'react';
import { TabPanel, Panel } from '@extjs/reactor';
function App() {
return (
<TabPanel>
<Panel title="Tab 1">
Tab 1 body
</Panel>
<Panel title="Tab 2" onShow={() => alert('Tab 2')}>
Tab 2 body
</Panel>
</TabPanel>
)
}
36

37. Items => Children
<Toolbar>
<Button text="Import"/>
<Button text="Export"/>
</Toolbar>
37

38. Docking
<Panel title="Docking">
<Toolbar dock="top">
<Button text="Button in Header"/>
</Toolbar>
<Button text="Button in Body"/>
<Toolbar dock="bottom">
<Button text="Button in Footer"/>
</Toolbar>
</Panel>
38

39. Layouts
<Panel frame={true} layout="border">
<Panel
region="west"
title="Sidebar"
split={true}
collapsible={true}
>
Sidebar content
</Panel>
<Panel region="center">
Main content
</Panel>
</Panel>
39

40. Ext JS Components are Themable
Each can be extended using SASS or Sencha Themer
40
Triton Material iOS

41. Sencha Themer
41

42. FAQ
Controllers
ViewModels
42
• How much of the Ext JS framework will I use?
Flux (redux, et al...)
Components
Stores
Models
Grid, Tree, Calendar, etc…

43. 43
Components Virtual DOM DOMExt JS?
Ext JS
FAQ
• Does extjs-reactor use the Virtual DOM?

44. FAQ
44
• Can I use pure Ext JS with extjs-reactor / reuse components from pure Ext JS apps?
import { Panel } from '@extjs/reactor/modern';
import { reactify } from '@extjs/reactor';
const Panel = reactify('panel');

45. FAQ
45
• Can I use pure Ext JS with extjs-reactor / reuse components from pure Ext JS apps?
import { reactify } from '@extjs/reactor';
const MyCustomComponent = reactify(MyPackage.MyCustomComponent);
...
render() {
return <MyCustomComponent ... />
}

46. Ext JS and React: Getting Set Up
46

47. GitHub: sencha/extjs-reactor
packages/reactor-boilerplate
47

48. Existing React Projects
Download and unzip Ext JS from sencha.com
Download and install Sencha Cmd from sencha.com
npm install --save @extjs/reactor @extjs/reactor-webpack-plugin @extjs/reactor-babel-plugin
unional/reactor-webpack-ts-plugin
48

49. Webpack
import ExtJSReactorWebpackPlugin from '@extjs/reactor-webpack-plugin’
...
plugins: [
new ExtJSReactorWebpackPlugin({
sdk: '/path/to/extjs',
theme: 'theme-material',
toolkit: 'modern'
packages: ['charts']
}),
]
49

50. Babel
.babelrc
{
"plugins": [
"@extjs/reactor-babel-plugin"
]
}
50

51. React App Launch
import ReactDOM from 'react-dom';
import App from './App'; // app components
import { install } from '@extjs/reactor';
install({
// optional, set to true if Ext is laying out the app full screen
viewport: true
});
// launch the react app once Ext JS is ready
Ext.onReady(() => ReactDOM.render(<App/>, document.getElementById('root')));
51

52. Live Demos
52

53. Questions?