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)
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
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 ???
}
}
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>
)
}
}
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 ... />
}
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
Take a look what’s new in Sencha Tools, and what’s on the on the horizon for Tools. We will demonstrate the innovations in Sencha Cmd, Architect, Themer, and our new plugin for Visual Studio Code. We will also discuss the Ext Electron Package for native desktop packaging, and what we have planned for adopting the modern and open web tooling based on NodeJS, NPM and Webpack.
