EWD 3 Training Course Part 37: Building a React.js application with ewd-xpress Part 1

R
Rob TweedIT Consultant, Developer & Director/Founder at M/Gateway Developments Ltd
Copyright © 2016 M/Gateway Developments Ltd
EWD 3 Training Course
Part 37
Building a React.js-based
QEWD Application
(a) Getting started
Rob Tweed
Director, M/Gateway Developments Ltd
Twitter: @rtweed
Copyright © 2016 M/Gateway Developments Ltd
Assumptions
• You understand the basic principles of
React.js
• If not, try taking this introductory course:
– https://www.udemy.com/introduction-to-reactjs
• You've installed Node.js and an
appropriate database:
– Windows or OS X: Caché or GlobalsDB
– Linux: Redis, Caché, GlobalsDB or GT.M
Copyright © 2016 M/Gateway Developments Ltd
Setting up the React.js Environment
• Ensure that you've installed:
– QEWD
– qewd-monitor
– ewd-client
• If you haven't done so, here's how:
– cd ~/qewd // or wherever you want your QEWD environment
– npm install qewd qewd-monitor ewd-client
Copyright © 2016 M/Gateway Developments Ltd
If you're using Linux
• You can use the QEWD / React installer:
cd ~
wget https://raw.githubusercontent.com/robtweed/qewd/master/installers/reactEnvironment.sh
source reactEnvironment.sh
Copyright © 2016 M/Gateway Developments Ltd
Otherwise do it manually
cd ~/qewd
npm install react react-dom babelify babel-preset-react react-bootstrap
npm install react-toastr react-select socket.io-client
npm install jquery ewd-client ewd-react-tools qewd-react
npm install -g browserify
npm install -g uglify-js
Copyright © 2016 M/Gateway Developments Ltd
Create a new application folder
cd qewdwww
mkdir react-demo1
cd react-demo1
npm install babel-preset-es2015
Copyright © 2016 M/Gateway Developments Ltd
Ready to start developing!
Copyright © 2016 M/Gateway Developments Ltd
index.html
~/qewd/www/react-demo1/index.html
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title id="QEWD React.js Example"></title>
</head>
<body>
<div id="content"></div>
<script src="bundle.js"></script>
</body>
</html>
Copyright © 2016 M/Gateway Developments Ltd
app.js
~/qewd/www/react-demo1/app.js
var reactLoader = require('qewd-react').loader;
var params = {
applicationName: 'react-demo1',
MainPage: require('./MainPage')
};
reactLoader(params);
Copyright © 2016 M/Gateway Developments Ltd
MainPage.js
c:ewd3wwwreact-demo1MainPage.js
"use strict"
var React = require('react');
var MainPage = React.createClass({
render: function() {
console.log('rendering MainPage');
return (
<div>
This is my test React.js Application
</div>
);
}
});
module.exports = MainPage;
Copyright © 2016 M/Gateway Developments Ltd
Bundle it
cd ~/qewd/www/react-demo1
browserify -t [ babelify --compact false --presets [es2015 react] ] app.js > bundle.js
You should now see bundle.js in the ~/qewd/www/react-demo1 folder
Copyright © 2016 M/Gateway Developments Ltd
Try it
Copyright © 2016 M/Gateway Developments Ltd
So what just happened?
Copyright © 2016 M/Gateway Developments Ltd
It's a standard React.js App…
• But it has automated:
– EWD 3 / ewd-client startup
– QEWD application registration
• Used qewd-react.loader to do this
Copyright © 2016 M/Gateway Developments Ltd
The startup sequence
• Explained in an earlier part of the course:
– Wait until the browser's DOM is ready
– Then invoke EWD.start()
• Passing socket.io object as an argument if using
web-sockets
– When EWD has started
• You need to wait until your QEWD application has
been registered in the QEWD back-end
– Now your application is ready for user interaction
Copyright © 2016 M/Gateway Developments Ltd
Doing this in React is more tricky
• Must use React's life-cycle methods
– If any of these are invoked, DOM is ready
• Can therefore start EWD within them
– BUT the top-level component will still render while EWD is
starting
– SO you need two render alternatives, dependent on a state
variable's value
• 'Please wait' message; or
• Render the application's main component
– AND
• reset the state variable's value when EWD has started and
application has been registered
• pass EWD object into main component as a prop
Copyright © 2016 M/Gateway Developments Ltd
A lot to remember
• Need to do all of these things every time you
want to start any QEWD application
– Lots to remember and potentially go wrong
– Ideal candidate for automation
• So all this behaviour is pre-written for you in the
qewd-react module
– Let it do all that startup stuff
– You just focus on the main and subsequent modules
for your application
Copyright © 2016 M/Gateway Developments Ltd
By all means take a look
• ~/qewd/node_modules/qewd-react
– /lib/loader.js
– Uses the componentWillMount() and
componentDidMount() lifecycle methods
• EWD is started in the latter
– Uses a state variable that flips when your application
is registered
• Causing your main component to render
• It's then over to you
Copyright © 2016 M/Gateway Developments Ltd
Hierarchy of Components
• Your QEWD application must be written as a
hierarchy of React components
– Each is a self-contained module
– Each one will need access to the EWD object
• To send messages to the QEWD back-end
• To handle responses/messages sent/returned from the
QEWD back-end
• Components are bundled for use in browser
– Using WebPack or Browserify
Copyright © 2016 M/Gateway Developments Ltd
We saw this before
• See Part 30 of this course (Modularising QEWD
Applications)
– From around slide 55
• The EWD object must be made available to
each module
– BUT it must be the post-registration instance of the
EWD object
• So it has the send() method, etc and session token available
Copyright © 2016 M/Gateway Developments Ltd
How's this done with React?
Let's look at the render() function in that loader module…
Copyright © 2016 M/Gateway Developments Ltd
How's this done with React?
render: function render() {
var componentPath = ['app'];
var renderComponent;
if (this.state.status === 'wait') {
renderComponent = React.createElement(
'div',
null,
'Please wait...'
);
} else {
renderComponent = React.createElement(MainPage, {
controller: this.controller,
componentPath: componentPath
});
}
return renderComponent;
}
});
Copyright © 2016 M/Gateway Developments Ltd
How's this done with React?
render: function render() {
var componentPath = ['app'];
var renderComponent;
if (this.state.status === 'wait') {
renderComponent = React.createElement(
'div',
null,
'Please wait...'
);
} else {
renderComponent = React.createElement(MainPage, {
controller: this.controller,
componentPath: componentPath
});
}
return renderComponent;
}
});
Here's the "Please wait"
message which appears
while EWD is starting and
application is being registered
Copyright © 2016 M/Gateway Developments Ltd
How's this done with React?
render: function render() {
var componentPath = ['app'];
var renderComponent;
if (this.state.status === 'wait') {
renderComponent = React.createElement(
'div',
null,
'Please wait...'
);
} else {
renderComponent = React.createElement(MainPage, {
controller: this.controller,
componentPath: componentPath
});
}
return renderComponent;
}
});
Here's how it invokes
your main component
instead, once everything
has started
Copyright © 2016 M/Gateway Developments Ltd
How's this done with React?
render: function render() {
var componentPath = ['app'];
var renderComponent;
if (this.state.status === 'wait') {
renderComponent = React.createElement(
'div',
null,
'Please wait...'
);
} else {
renderComponent = React.createElement(MainPage, {
controller: this.controller,
componentPath: componentPath
});
}
return renderComponent;
}
});
Here's how it invokes
your main component
instead, once everything
has started
Your main component
is referred to as
MainPage
Copyright © 2016 M/Gateway Developments Ltd
Where's the EWD object?
render: function render() {
var componentPath = ['app'];
var renderComponent;
if (this.state.status === 'wait') {
renderComponent = React.createElement(
'div',
null,
'Please wait...'
);
} else {
renderComponent = React.createElement(MainPage, {
controller: this.controller,
componentPath: componentPath
});
}
return renderComponent;
}
});
But where is the EWD
object?
Copyright © 2016 M/Gateway Developments Ltd
Where's the EWD object?
render: function render() {
var componentPath = ['app'];
var renderComponent;
if (this.state.status === 'wait') {
renderComponent = React.createElement(
'div',
null,
'Please wait...'
);
} else {
renderComponent = React.createElement(MainPage, {
controller: this.controller,
componentPath: componentPath
});
}
return renderComponent;
}
});
This is it
Copyright © 2016 M/Gateway Developments Ltd
Where's the EWD object?
render: function render() {
var componentPath = ['app'];
var renderComponent;
if (this.state.status === 'wait') {
renderComponent = React.createElement(
'div',
null,
'Please wait...'
);
} else {
renderComponent = React.createElement(MainPage, {
controller: this.controller,
componentPath: componentPath
});
}
return renderComponent;
}
});
EWD is part of
an object I've called
the controller
Copyright © 2016 M/Gateway Developments Ltd
Where's the EWD object?
render: function render() {
var componentPath = ['app'];
var renderComponent;
if (this.state.status === 'wait') {
renderComponent = React.createElement(
'div',
null,
'Please wait...'
);
} else {
renderComponent = React.createElement(MainPage, {
controller: this.controller,
componentPath: componentPath
});
}
return renderComponent;
}
});
EWD is part of
an object I've called
the controller
This object is
instantiated for you
and passed to your
Main module as a
prop named controller
Copyright © 2016 M/Gateway Developments Ltd
Separation of Concerns
• An important principle of modern web
application development is separation of
concerns
– Move away from monolithic programming
– Each key aspect of an application is kept
separate
• Easier to maintain and understand
• More scalable as application grows in size
Copyright © 2016 M/Gateway Developments Ltd
React focuses on the View
• Your React components should just
describe the View aspect of your
application
– What it looks like under various situations as
the application is used
• The other aspects of your application,
commonly referred to as the Model and
Controller, should, for best practice, be
kept separate from the View
Copyright © 2016 M/Gateway Developments Ltd
The controller object
• Provides a place to describe the dynamic
behaviour that needs to take place in any
of your application's React components
• The controller object is passed as a prop
to any of your components that requires
dynamic behaviour
Copyright © 2016 M/Gateway Developments Ltd
The controller object
• The controller object is initially created for
you by the qewd-react loader module and
passed to your MainPage module as a
prop
– You refer to it as this.props.controller
– The controller object includes within it the
post-registration EWD object
• eg this.props.controller.send() allows you to send
messages to the QEWD back-end
Copyright © 2016 M/Gateway Developments Ltd
The controller object
• The idea is for you to extend the controller object
in each of your React components to define the
behaviour of that component:
– Events
– Messages to be sent
– Responses to be handled
– Corresponding changes to state variables within the
component
• Which cause a re-render of the component and its child
components
Copyright © 2016 M/Gateway Developments Ltd
Passing on the controller object
• qewd-react's loader module creates the
controller object for you and passes it to
your MainPage component
• It's up to you to pass it on to any of your
other React components as a prop
Copyright © 2016 M/Gateway Developments Ltd
So let's review the demo app
Copyright © 2016 M/Gateway Developments Ltd
index.html
~/qewd/www/react-demo1/index.html
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title id="QEWD React.js Example"></title>
</head>
<body>
<div id="content"></div>
<script src="bundle.js"></script>
</body>
</html>
Place-holder div into which
React renders its generated
mark-up
Your application will be built
up from within this div
Always give it an id of 'content'
Copyright © 2016 M/Gateway Developments Ltd
index.html
~/qewd/www/react-demo1/index.html
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title id="ewd-xpress React.js Example"></title>
</head>
<body>
<div id="content"></div>
<script src="bundle.js"></script>
</body>
</html>
Load the bundled
application's Javascript
into the browser
You'll use Browserify
or WebPack to turn your
hierarchy of React
Components into a
bundle file
Copyright © 2016 M/Gateway Developments Ltd
app.js
~/qewd/www/react-demo1/app.js
var reactLoader = require('qewd-react').loader;
var params = {
applicationName: 'react-demo1',
MainPage: require('./MainPage')
};
reactLoader(params);
This is the top level of
your React application's
hierarchy of modules
Copyright © 2016 M/Gateway Developments Ltd
app.js
~/qewd/www/react-demo1/app.js
var reactLoader = require('qewd-react').loader;
var params = {
applicationName: 'react-demo1',
MainPage: require('./MainPage')
};
reactLoader(params);
This is the top level of
your React application's
hierarchy of modules
It makes use of the
qewd-react
loader to get everything
started
Copyright © 2016 M/Gateway Developments Ltd
app.js
~/qewd/www/react-demo1/app.js
var reactLoader = require('qewd-react').loader;
var params = {
applicationName: 'react-demo1',
MainPage: require('./MainPage')
};
reactLoader(params);
You just define two things:
Copyright © 2016 M/Gateway Developments Ltd
app.js
~/qewd/www/react-demo1/app.js
var reactLoader = require('qewd-react').loader;
var params = {
applicationName: 'react-demo1',
MainPage: require('./MainPage')
};
reactLoader(params);
You just define two things:
The application name
This is the name that will
be used by ewd-xpress
to register it
Copyright © 2016 M/Gateway Developments Ltd
app.js
~/qewd/www/react-demo1/app.js
var reactLoader = require('qewd-react').loader;
var params = {
applicationName: 'react-demo1',
MainPage: require('./MainPage')
};
reactLoader(params);
You just define two things:
Your Application's effective
top-level Component
Referred to as MainPage
but your component file
can be named what you like
Note: you use
require() to load the file
Copyright © 2016 M/Gateway Developments Ltd
MainPage.js
~/qewd/www/react-demo1/MainPage.js
"use strict"
var React = require('react');
var MainPage = React.createClass({
render: function() {
console.log('rendering MainPage');
return (
<div>
This is my test React.js Application
</div>
);
}
});
module.exports = MainPage;
So as far as you're concerned,
this is your top component
By the time it is invoked,
EWD has started and
the application is
registered by QEWD
Copyright © 2016 M/Gateway Developments Ltd
MainPage.js
~/qewd/www/react-demo1/MainPage.js
"use strict"
var React = require('react');
var MainPage = React.createClass({
render: function() {
console.log('rendering MainPage');
return (
<div>
This is my test React.js Application
</div>
);
}
});
module.exports = MainPage;
Here we're not doing
anything except displaying
this text
Copyright © 2016 M/Gateway Developments Ltd
Then we bundled it
cd ~/qewd/www/react-demo1
browserify -t [ babelify --compact false --presets [es2015 react] ] app.js > bundle.js
We told Browserify to start with app.js
It automatically threads its way down through any require() functions
Copyright © 2016 M/Gateway Developments Ltd
Then we bundled it
cd ~/qewd/www/react-demo1
browserify -t [ babelify --compact false --presets [es2015 react] ] app.js > bundle.js
We told Browserify to start with app.js
It automatically threads its way down through any require() functions
and combines all the JavaScript into a single file named bundle.js
Copyright © 2016 M/Gateway Developments Ltd
So when we start the app
~/qewd/www/react-demo1/index.html
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title id="QEWD React.js Example"></title>
</head>
<body>
<div id="content"></div>
<script src="bundle.js"></script>
</body>
</html>
The index.html
file is loaded into
the browser, and it
then loads the
bundled JavaScript
file
Copyright © 2016 M/Gateway Developments Ltd
And what we see is…
Copyright © 2016 M/Gateway Developments Ltd
And what we see is…
The application is registered
Copyright © 2016 M/Gateway Developments Ltd
And what we see is…
And displays the text defined
in your MainPage component
Copyright © 2016 M/Gateway Developments Ltd
It's not doing much so far
~/qewd/www/react-demo1/MainPage.js
"use strict"
var React = require('react');
var MainPage = React.createClass({
render: function() {
console.log('rendering MainPage');
return (
<div>
This is my test React.js Application
</div>
);
}
});
module.exports = MainPage;
We'll start to build it out
in the next part of the course
Copyright © 2016 M/Gateway Developments Ltd
It's not doing much so far
~/qewd/www/react-demo1/MainPage.js
"use strict"
var React = require('react');
var MainPage = React.createClass({
render: function() {
console.log('rendering MainPage');
return (
<div>
This is my test React.js Application
</div>
);
}
});
module.exports = MainPage;
We'll make it send a message
To QEWD and return
a response that we display
See the next part of this course
1 of 53

Recommended

EWD 3 Training Course Part 16: QEWD Services by
EWD 3 Training Course Part 16: QEWD ServicesEWD 3 Training Course Part 16: QEWD Services
EWD 3 Training Course Part 16: QEWD ServicesRob Tweed
670 views21 slides
EWD 3 Training Course Part 30: Modularising QEWD Applications by
EWD 3 Training Course Part 30: Modularising QEWD ApplicationsEWD 3 Training Course Part 30: Modularising QEWD Applications
EWD 3 Training Course Part 30: Modularising QEWD ApplicationsRob Tweed
1.1K views85 slides
EWD 3 Training Course Part 5a: First Steps in Building a QEWD Application by
EWD 3 Training Course Part 5a: First Steps in Building a QEWD ApplicationEWD 3 Training Course Part 5a: First Steps in Building a QEWD Application
EWD 3 Training Course Part 5a: First Steps in Building a QEWD ApplicationRob Tweed
1.4K views33 slides
EWD 3 Training Course Part 4: Installing & Configuring QEWD by
EWD 3 Training Course Part 4: Installing & Configuring QEWDEWD 3 Training Course Part 4: Installing & Configuring QEWD
EWD 3 Training Course Part 4: Installing & Configuring QEWDRob Tweed
2.9K views31 slides
EWD 3 Training Course Part 3: Summary of EWD 3 Modules by
EWD 3 Training Course Part 3: Summary of EWD 3 ModulesEWD 3 Training Course Part 3: Summary of EWD 3 Modules
EWD 3 Training Course Part 3: Summary of EWD 3 ModulesRob Tweed
979 views23 slides
EWD 3 Training Course Part 2: EWD 3 Overview by
EWD 3 Training Course Part 2: EWD 3 OverviewEWD 3 Training Course Part 2: EWD 3 Overview
EWD 3 Training Course Part 2: EWD 3 OverviewRob Tweed
2.1K views93 slides

More Related Content

What's hot

QEWD.js, JSON Web Tokens & MicroServices by
QEWD.js, JSON Web Tokens & MicroServicesQEWD.js, JSON Web Tokens & MicroServices
QEWD.js, JSON Web Tokens & MicroServicesRob Tweed
903 views117 slides
EWD 3 Training Course Part 7: Applying the QEWD Messaging Pattern by
EWD 3 Training Course Part 7: Applying the QEWD Messaging PatternEWD 3 Training Course Part 7: Applying the QEWD Messaging Pattern
EWD 3 Training Course Part 7: Applying the QEWD Messaging PatternRob Tweed
1.3K views51 slides
EWD 3 Training Course Part 36: Accessing REST and Web Services from a QEWD ap... by
EWD 3 Training Course Part 36: Accessing REST and Web Services from a QEWD ap...EWD 3 Training Course Part 36: Accessing REST and Web Services from a QEWD ap...
EWD 3 Training Course Part 36: Accessing REST and Web Services from a QEWD ap...Rob Tweed
932 views45 slides
EWD 3 Training Course Part 12: QEWD Session Timeout Control by
EWD 3 Training Course Part 12: QEWD Session Timeout ControlEWD 3 Training Course Part 12: QEWD Session Timeout Control
EWD 3 Training Course Part 12: QEWD Session Timeout ControlRob Tweed
561 views8 slides
EWD 3 Training Course Part 8: Anatomy of the QEWD Messaging Cycle by
EWD 3 Training Course Part 8: Anatomy of the QEWD Messaging CycleEWD 3 Training Course Part 8: Anatomy of the QEWD Messaging Cycle
EWD 3 Training Course Part 8: Anatomy of the QEWD Messaging CycleRob Tweed
720 views20 slides
EWD 3 Training Course Part 5b: First Steps in Building a QEWD Application by
EWD 3 Training Course Part 5b: First Steps in Building a QEWD ApplicationEWD 3 Training Course Part 5b: First Steps in Building a QEWD Application
EWD 3 Training Course Part 5b: First Steps in Building a QEWD ApplicationRob Tweed
999 views33 slides

What's hot(20)

QEWD.js, JSON Web Tokens & MicroServices by Rob Tweed
QEWD.js, JSON Web Tokens & MicroServicesQEWD.js, JSON Web Tokens & MicroServices
QEWD.js, JSON Web Tokens & MicroServices
Rob Tweed903 views
EWD 3 Training Course Part 7: Applying the QEWD Messaging Pattern by Rob Tweed
EWD 3 Training Course Part 7: Applying the QEWD Messaging PatternEWD 3 Training Course Part 7: Applying the QEWD Messaging Pattern
EWD 3 Training Course Part 7: Applying the QEWD Messaging Pattern
Rob Tweed1.3K views
EWD 3 Training Course Part 36: Accessing REST and Web Services from a QEWD ap... by Rob Tweed
EWD 3 Training Course Part 36: Accessing REST and Web Services from a QEWD ap...EWD 3 Training Course Part 36: Accessing REST and Web Services from a QEWD ap...
EWD 3 Training Course Part 36: Accessing REST and Web Services from a QEWD ap...
Rob Tweed932 views
EWD 3 Training Course Part 12: QEWD Session Timeout Control by Rob Tweed
EWD 3 Training Course Part 12: QEWD Session Timeout ControlEWD 3 Training Course Part 12: QEWD Session Timeout Control
EWD 3 Training Course Part 12: QEWD Session Timeout Control
Rob Tweed561 views
EWD 3 Training Course Part 8: Anatomy of the QEWD Messaging Cycle by Rob Tweed
EWD 3 Training Course Part 8: Anatomy of the QEWD Messaging CycleEWD 3 Training Course Part 8: Anatomy of the QEWD Messaging Cycle
EWD 3 Training Course Part 8: Anatomy of the QEWD Messaging Cycle
Rob Tweed720 views
EWD 3 Training Course Part 5b: First Steps in Building a QEWD Application by Rob Tweed
EWD 3 Training Course Part 5b: First Steps in Building a QEWD ApplicationEWD 3 Training Course Part 5b: First Steps in Building a QEWD Application
EWD 3 Training Course Part 5b: First Steps in Building a QEWD Application
Rob Tweed999 views
EWD 3 Training Course Part 35: QEWD Session Locking by Rob Tweed
EWD 3 Training Course Part 35: QEWD Session LockingEWD 3 Training Course Part 35: QEWD Session Locking
EWD 3 Training Course Part 35: QEWD Session Locking
Rob Tweed532 views
EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 4 by Rob Tweed
EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 4EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 4
EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 4
Rob Tweed718 views
EWD 3 Training Course Part 45: Using QEWD's Advanced MicroService Functionality by Rob Tweed
EWD 3 Training Course Part 45: Using QEWD's Advanced MicroService FunctionalityEWD 3 Training Course Part 45: Using QEWD's Advanced MicroService Functionality
EWD 3 Training Course Part 45: Using QEWD's Advanced MicroService Functionality
Rob Tweed2.1K views
EWD 3 Training Course Part 39: Building a React.js application with QEWD, Part 3 by Rob Tweed
EWD 3 Training Course Part 39: Building a React.js application with QEWD, Part 3EWD 3 Training Course Part 39: Building a React.js application with QEWD, Part 3
EWD 3 Training Course Part 39: Building a React.js application with QEWD, Part 3
Rob Tweed627 views
EWD 3 Training Course Part 27: The QEWD Session by Rob Tweed
EWD 3 Training Course Part 27: The QEWD SessionEWD 3 Training Course Part 27: The QEWD Session
EWD 3 Training Course Part 27: The QEWD Session
Rob Tweed920 views
EWD 3 Training Course Part 19: The cache.node APIs by Rob Tweed
EWD 3 Training Course Part 19: The cache.node APIsEWD 3 Training Course Part 19: The cache.node APIs
EWD 3 Training Course Part 19: The cache.node APIs
Rob Tweed905 views
EWD 3 Training Course Part 44: Creating MicroServices with QEWD.js by Rob Tweed
EWD 3 Training Course Part 44: Creating MicroServices with QEWD.jsEWD 3 Training Course Part 44: Creating MicroServices with QEWD.js
EWD 3 Training Course Part 44: Creating MicroServices with QEWD.js
Rob Tweed1.5K views
EWD 3 Training Course Part 28: Integrating Legacy Mumps Code with QEWD by Rob Tweed
EWD 3 Training Course Part 28: Integrating Legacy Mumps Code with QEWDEWD 3 Training Course Part 28: Integrating Legacy Mumps Code with QEWD
EWD 3 Training Course Part 28: Integrating Legacy Mumps Code with QEWD
Rob Tweed1.2K views
EWD 3 Training Course Part 15: Using a Framework other than jQuery with QEWD by Rob Tweed
EWD 3 Training Course Part 15: Using a Framework other than jQuery with QEWDEWD 3 Training Course Part 15: Using a Framework other than jQuery with QEWD
EWD 3 Training Course Part 15: Using a Framework other than jQuery with QEWD
Rob Tweed541 views
EWD 3 Training Course Part 1: How Node.js Integrates With Global Storage Data... by Rob Tweed
EWD 3 Training Course Part 1: How Node.js Integrates With Global Storage Data...EWD 3 Training Course Part 1: How Node.js Integrates With Global Storage Data...
EWD 3 Training Course Part 1: How Node.js Integrates With Global Storage Data...
Rob Tweed3.9K views
qewd-ripple: The Ripple OSI Middle Tier by Rob Tweed
qewd-ripple: The Ripple OSI Middle Tierqewd-ripple: The Ripple OSI Middle Tier
qewd-ripple: The Ripple OSI Middle Tier
Rob Tweed720 views
EWD 3 Training Course Part 41: Building a React.js application with QEWD, Part 5 by Rob Tweed
EWD 3 Training Course Part 41: Building a React.js application with QEWD, Part 5EWD 3 Training Course Part 41: Building a React.js application with QEWD, Part 5
EWD 3 Training Course Part 41: Building a React.js application with QEWD, Part 5
Rob Tweed621 views
EWD 3 Training Course Part 31: Using QEWD for Web and REST Services by Rob Tweed
EWD 3 Training Course Part 31: Using QEWD for Web and REST ServicesEWD 3 Training Course Part 31: Using QEWD for Web and REST Services
EWD 3 Training Course Part 31: Using QEWD for Web and REST Services
Rob Tweed3.3K views
EWD 3 Training Course Part 6: What Happens when a QEWD Application is Started by Rob Tweed
EWD 3 Training Course Part 6: What Happens when a QEWD Application is StartedEWD 3 Training Course Part 6: What Happens when a QEWD Application is Started
EWD 3 Training Course Part 6: What Happens when a QEWD Application is Started
Rob Tweed1K views

Viewers also liked

EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 2 by
EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 2EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 2
EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 2Rob Tweed
597 views56 slides
EWD 3 Training Course Part 26: Event-driven Indexing by
EWD 3 Training Course Part 26: Event-driven IndexingEWD 3 Training Course Part 26: Event-driven Indexing
EWD 3 Training Course Part 26: Event-driven IndexingRob Tweed
678 views14 slides
EWD 3 Training Course Part 17: Introduction to Global Storage Databases by
EWD 3 Training Course Part 17: Introduction to Global Storage DatabasesEWD 3 Training Course Part 17: Introduction to Global Storage Databases
EWD 3 Training Course Part 17: Introduction to Global Storage DatabasesRob Tweed
1.3K views35 slides
EWD 3 Training Course Part 13: Putting Everything so far into Practice using ... by
EWD 3 Training Course Part 13: Putting Everything so far into Practice using ...EWD 3 Training Course Part 13: Putting Everything so far into Practice using ...
EWD 3 Training Course Part 13: Putting Everything so far into Practice using ...Rob Tweed
805 views14 slides
EWD 3 Training Course Part 18: Modelling NoSQL Databases using Global Storage by
EWD 3 Training Course Part 18: Modelling NoSQL Databases using Global StorageEWD 3 Training Course Part 18: Modelling NoSQL Databases using Global Storage
EWD 3 Training Course Part 18: Modelling NoSQL Databases using Global StorageRob Tweed
1.2K views35 slides
EWD 3 Training Course Part 24: Traversing a Document's Leaf Nodes by
EWD 3 Training Course Part 24: Traversing a Document's Leaf NodesEWD 3 Training Course Part 24: Traversing a Document's Leaf Nodes
EWD 3 Training Course Part 24: Traversing a Document's Leaf NodesRob Tweed
622 views19 slides

Viewers also liked(15)

EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 2 by Rob Tweed
EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 2EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 2
EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 2
Rob Tweed597 views
EWD 3 Training Course Part 26: Event-driven Indexing by Rob Tweed
EWD 3 Training Course Part 26: Event-driven IndexingEWD 3 Training Course Part 26: Event-driven Indexing
EWD 3 Training Course Part 26: Event-driven Indexing
Rob Tweed678 views
EWD 3 Training Course Part 17: Introduction to Global Storage Databases by Rob Tweed
EWD 3 Training Course Part 17: Introduction to Global Storage DatabasesEWD 3 Training Course Part 17: Introduction to Global Storage Databases
EWD 3 Training Course Part 17: Introduction to Global Storage Databases
Rob Tweed1.3K views
EWD 3 Training Course Part 13: Putting Everything so far into Practice using ... by Rob Tweed
EWD 3 Training Course Part 13: Putting Everything so far into Practice using ...EWD 3 Training Course Part 13: Putting Everything so far into Practice using ...
EWD 3 Training Course Part 13: Putting Everything so far into Practice using ...
Rob Tweed805 views
EWD 3 Training Course Part 18: Modelling NoSQL Databases using Global Storage by Rob Tweed
EWD 3 Training Course Part 18: Modelling NoSQL Databases using Global StorageEWD 3 Training Course Part 18: Modelling NoSQL Databases using Global Storage
EWD 3 Training Course Part 18: Modelling NoSQL Databases using Global Storage
Rob Tweed1.2K views
EWD 3 Training Course Part 24: Traversing a Document's Leaf Nodes by Rob Tweed
EWD 3 Training Course Part 24: Traversing a Document's Leaf NodesEWD 3 Training Course Part 24: Traversing a Document's Leaf Nodes
EWD 3 Training Course Part 24: Traversing a Document's Leaf Nodes
Rob Tweed622 views
EWD 3 Training Course Part 25: Document Database Capabilities by Rob Tweed
EWD 3 Training Course Part 25: Document Database CapabilitiesEWD 3 Training Course Part 25: Document Database Capabilities
EWD 3 Training Course Part 25: Document Database Capabilities
Rob Tweed905 views
EWD 3 Training Course Part 21: Persistent JavaScript Objects by Rob Tweed
EWD 3 Training Course Part 21: Persistent JavaScript ObjectsEWD 3 Training Course Part 21: Persistent JavaScript Objects
EWD 3 Training Course Part 21: Persistent JavaScript Objects
Rob Tweed779 views
EWD 3 Training Course Part 20: The DocumentNode Object by Rob Tweed
EWD 3 Training Course Part 20: The DocumentNode ObjectEWD 3 Training Course Part 20: The DocumentNode Object
EWD 3 Training Course Part 20: The DocumentNode Object
Rob Tweed1K views
EWD 3 Training Course Part 33: Configuring QEWD to use CORS by Rob Tweed
EWD 3 Training Course Part 33: Configuring QEWD to use CORSEWD 3 Training Course Part 33: Configuring QEWD to use CORS
EWD 3 Training Course Part 33: Configuring QEWD to use CORS
Rob Tweed1.1K views
EWD 3 Training Course Part 22: Traversing Documents using DocumentNode Objects by Rob Tweed
EWD 3 Training Course Part 22: Traversing Documents using DocumentNode ObjectsEWD 3 Training Course Part 22: Traversing Documents using DocumentNode Objects
EWD 3 Training Course Part 22: Traversing Documents using DocumentNode Objects
Rob Tweed732 views
EWD 3トレーニングコース#9 複雑なewd-xpressメッセージと応答 by Kiyoshi Sawada
EWD 3トレーニングコース#9 複雑なewd-xpressメッセージと応答EWD 3トレーニングコース#9 複雑なewd-xpressメッセージと応答
EWD 3トレーニングコース#9 複雑なewd-xpressメッセージと応答
Kiyoshi Sawada223 views
EWD 3トレーニング・コース #4 ewd-xpressのインストールと構成 by Kiyoshi Sawada
EWD 3トレーニング・コース #4 ewd-xpressのインストールと構成EWD 3トレーニング・コース #4 ewd-xpressのインストールと構成
EWD 3トレーニング・コース #4 ewd-xpressのインストールと構成
Kiyoshi Sawada236 views
EWD 3トレーニング・コース #3 EWD 3 モジュールの概要 by Kiyoshi Sawada
EWD 3トレーニング・コース #3 EWD 3 モジュールの概要EWD 3トレーニング・コース #3 EWD 3 モジュールの概要
EWD 3トレーニング・コース #3 EWD 3 モジュールの概要
Kiyoshi Sawada133 views
EWD 3 トレーニング・コース #1 Node.jsとGT.Mの統合方法 by Kiyoshi Sawada
EWD 3トレーニング・コース #1 Node.jsとGT.Mの統合方法EWD 3トレーニング・コース #1 Node.jsとGT.Mの統合方法
EWD 3 トレーニング・コース #1 Node.jsとGT.Mの統合方法
Kiyoshi Sawada262 views

Similar to EWD 3 Training Course Part 37: Building a React.js application with ewd-xpress Part 1

React loadable by
React loadableReact loadable
React loadableGeorge Bukhanov
221 views86 slides
Love at first Vue by
Love at first VueLove at first Vue
Love at first VueDalibor Gogic
660 views37 slides
Rest web service_with_spring_hateoas by
Rest web service_with_spring_hateoasRest web service_with_spring_hateoas
Rest web service_with_spring_hateoasZeid Hassan
295 views6 slides
Sst hackathon express by
Sst hackathon expressSst hackathon express
Sst hackathon expressAeshan Wijetunge
331 views13 slides
Reactive application using meteor by
Reactive application using meteorReactive application using meteor
Reactive application using meteorSapna Upreti
278 views106 slides
WordCamp Montreal 2016 WP-API + React with server rendering by
WordCamp Montreal 2016  WP-API + React with server renderingWordCamp Montreal 2016  WP-API + React with server rendering
WordCamp Montreal 2016 WP-API + React with server renderingZiad Saab
289 views31 slides

Similar to EWD 3 Training Course Part 37: Building a React.js application with ewd-xpress Part 1(20)

Rest web service_with_spring_hateoas by Zeid Hassan
Rest web service_with_spring_hateoasRest web service_with_spring_hateoas
Rest web service_with_spring_hateoas
Zeid Hassan295 views
Reactive application using meteor by Sapna Upreti
Reactive application using meteorReactive application using meteor
Reactive application using meteor
Sapna Upreti278 views
WordCamp Montreal 2016 WP-API + React with server rendering by Ziad Saab
WordCamp Montreal 2016  WP-API + React with server renderingWordCamp Montreal 2016  WP-API + React with server rendering
WordCamp Montreal 2016 WP-API + React with server rendering
Ziad Saab289 views
Day In A Life Of A Node.js Developer by Edureka!
Day In A Life Of A Node.js DeveloperDay In A Life Of A Node.js Developer
Day In A Life Of A Node.js Developer
Edureka!1.2K views
Day in a life of a node.js developer by Edureka!
Day in a life of a node.js developerDay in a life of a node.js developer
Day in a life of a node.js developer
Edureka!2.5K views
EWD 3 Training Course Part 14: Using Ajax for QEWD Messages by Rob Tweed
EWD 3 Training Course Part 14: Using Ajax for QEWD MessagesEWD 3 Training Course Part 14: Using Ajax for QEWD Messages
EWD 3 Training Course Part 14: Using Ajax for QEWD Messages
Rob Tweed693 views
React Native +Redux + ES6 (Updated) by Chiew Carol
React Native +Redux + ES6 (Updated)React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)
Chiew Carol694 views
Introduction to Vaadin by netomi
Introduction to VaadinIntroduction to Vaadin
Introduction to Vaadin
netomi3.7K views
Maciej Treder ''Angular Universal - a medicine for the Angular + SEO/CDN issu... by OdessaJS Conf
Maciej Treder ''Angular Universal - a medicine for the Angular + SEO/CDN issu...Maciej Treder ''Angular Universal - a medicine for the Angular + SEO/CDN issu...
Maciej Treder ''Angular Universal - a medicine for the Angular + SEO/CDN issu...
OdessaJS Conf710 views
React Native for multi-platform mobile applications by Matteo Manchi
React Native for multi-platform mobile applicationsReact Native for multi-platform mobile applications
React Native for multi-platform mobile applications
Matteo Manchi1.6K views
React Lifecycle and Reconciliation by Zhihao Li
React Lifecycle and ReconciliationReact Lifecycle and Reconciliation
React Lifecycle and Reconciliation
Zhihao Li2.8K views
Integrating React.js Into a PHP Application: Dutch PHP 2019 by Andrew Rota
Integrating React.js Into a PHP Application: Dutch PHP 2019Integrating React.js Into a PHP Application: Dutch PHP 2019
Integrating React.js Into a PHP Application: Dutch PHP 2019
Andrew Rota2.2K views

More from Rob Tweed

QEWD Update by
QEWD UpdateQEWD Update
QEWD UpdateRob Tweed
945 views32 slides
Data Persistence as a Language Feature by
Data Persistence as a Language FeatureData Persistence as a Language Feature
Data Persistence as a Language FeatureRob Tweed
1.3K views108 slides
LNUG: Having Your Node.js Cake and Eating It Too by
LNUG: Having Your Node.js Cake and Eating It TooLNUG: Having Your Node.js Cake and Eating It Too
LNUG: Having Your Node.js Cake and Eating It TooRob Tweed
2.8K views81 slides
EWD 3 Training Course Part 43: Using JSON Web Tokens with QEWD REST Services by
EWD 3 Training Course Part 43: Using JSON Web Tokens with QEWD REST ServicesEWD 3 Training Course Part 43: Using JSON Web Tokens with QEWD REST Services
EWD 3 Training Course Part 43: Using JSON Web Tokens with QEWD REST ServicesRob Tweed
891 views93 slides
QEWD.js: Have your Node.js Cake and Eat It Too by
QEWD.js: Have your Node.js Cake and Eat It TooQEWD.js: Have your Node.js Cake and Eat It Too
QEWD.js: Have your Node.js Cake and Eat It TooRob Tweed
628 views76 slides
ewd-qoper8-vistarpc: Exposing VistA's RPCs as REST Services by
ewd-qoper8-vistarpc: Exposing VistA's RPCs as REST Servicesewd-qoper8-vistarpc: Exposing VistA's RPCs as REST Services
ewd-qoper8-vistarpc: Exposing VistA's RPCs as REST ServicesRob Tweed
333 views37 slides

More from Rob Tweed(9)

QEWD Update by Rob Tweed
QEWD UpdateQEWD Update
QEWD Update
Rob Tweed945 views
Data Persistence as a Language Feature by Rob Tweed
Data Persistence as a Language FeatureData Persistence as a Language Feature
Data Persistence as a Language Feature
Rob Tweed1.3K views
LNUG: Having Your Node.js Cake and Eating It Too by Rob Tweed
LNUG: Having Your Node.js Cake and Eating It TooLNUG: Having Your Node.js Cake and Eating It Too
LNUG: Having Your Node.js Cake and Eating It Too
Rob Tweed2.8K views
EWD 3 Training Course Part 43: Using JSON Web Tokens with QEWD REST Services by Rob Tweed
EWD 3 Training Course Part 43: Using JSON Web Tokens with QEWD REST ServicesEWD 3 Training Course Part 43: Using JSON Web Tokens with QEWD REST Services
EWD 3 Training Course Part 43: Using JSON Web Tokens with QEWD REST Services
Rob Tweed891 views
QEWD.js: Have your Node.js Cake and Eat It Too by Rob Tweed
QEWD.js: Have your Node.js Cake and Eat It TooQEWD.js: Have your Node.js Cake and Eat It Too
QEWD.js: Have your Node.js Cake and Eat It Too
Rob Tweed628 views
ewd-qoper8-vistarpc: Exposing VistA's RPCs as REST Services by Rob Tweed
ewd-qoper8-vistarpc: Exposing VistA's RPCs as REST Servicesewd-qoper8-vistarpc: Exposing VistA's RPCs as REST Services
ewd-qoper8-vistarpc: Exposing VistA's RPCs as REST Services
Rob Tweed333 views
EWD 3 Training Course Part 42: The QEWD Docker Appliance by Rob Tweed
EWD 3 Training Course Part 42: The QEWD Docker ApplianceEWD 3 Training Course Part 42: The QEWD Docker Appliance
EWD 3 Training Course Part 42: The QEWD Docker Appliance
Rob Tweed1.3K views
EWD 3 Training Course Part 32: Configuring QEWD to use SSL/HTTPS by Rob Tweed
EWD 3 Training Course Part 32: Configuring QEWD to use SSL/HTTPSEWD 3 Training Course Part 32: Configuring QEWD to use SSL/HTTPS
EWD 3 Training Course Part 32: Configuring QEWD to use SSL/HTTPS
Rob Tweed608 views
EWD 3 Training Course Part 23: Traversing a Range using DocumentNode Objects by Rob Tweed
EWD 3 Training Course Part 23: Traversing a Range using DocumentNode ObjectsEWD 3 Training Course Part 23: Traversing a Range using DocumentNode Objects
EWD 3 Training Course Part 23: Traversing a Range using DocumentNode Objects
Rob Tweed797 views

Recently uploaded

Elevate your SAP landscape's efficiency and performance with HCL Workload Aut... by
Elevate your SAP landscape's efficiency and performance with HCL Workload Aut...Elevate your SAP landscape's efficiency and performance with HCL Workload Aut...
Elevate your SAP landscape's efficiency and performance with HCL Workload Aut...HCLSoftware
6 views2 slides
El Arte de lo Possible by
El Arte de lo PossibleEl Arte de lo Possible
El Arte de lo PossibleNeo4j
39 views35 slides
DevsRank by
DevsRankDevsRank
DevsRankdevsrank786
11 views1 slide
Unleash The Monkeys by
Unleash The MonkeysUnleash The Monkeys
Unleash The MonkeysJacob Duijzer
7 views28 slides
DSD-INT 2023 Leveraging the results of a 3D hydrodynamic model to improve the... by
DSD-INT 2023 Leveraging the results of a 3D hydrodynamic model to improve the...DSD-INT 2023 Leveraging the results of a 3D hydrodynamic model to improve the...
DSD-INT 2023 Leveraging the results of a 3D hydrodynamic model to improve the...Deltares
6 views22 slides
DSD-INT 2023 Delft3D FM Suite 2024.01 2D3D - New features + Improvements - Ge... by
DSD-INT 2023 Delft3D FM Suite 2024.01 2D3D - New features + Improvements - Ge...DSD-INT 2023 Delft3D FM Suite 2024.01 2D3D - New features + Improvements - Ge...
DSD-INT 2023 Delft3D FM Suite 2024.01 2D3D - New features + Improvements - Ge...Deltares
17 views12 slides

Recently uploaded(20)

Elevate your SAP landscape's efficiency and performance with HCL Workload Aut... by HCLSoftware
Elevate your SAP landscape's efficiency and performance with HCL Workload Aut...Elevate your SAP landscape's efficiency and performance with HCL Workload Aut...
Elevate your SAP landscape's efficiency and performance with HCL Workload Aut...
HCLSoftware6 views
El Arte de lo Possible by Neo4j
El Arte de lo PossibleEl Arte de lo Possible
El Arte de lo Possible
Neo4j39 views
DSD-INT 2023 Leveraging the results of a 3D hydrodynamic model to improve the... by Deltares
DSD-INT 2023 Leveraging the results of a 3D hydrodynamic model to improve the...DSD-INT 2023 Leveraging the results of a 3D hydrodynamic model to improve the...
DSD-INT 2023 Leveraging the results of a 3D hydrodynamic model to improve the...
Deltares6 views
DSD-INT 2023 Delft3D FM Suite 2024.01 2D3D - New features + Improvements - Ge... by Deltares
DSD-INT 2023 Delft3D FM Suite 2024.01 2D3D - New features + Improvements - Ge...DSD-INT 2023 Delft3D FM Suite 2024.01 2D3D - New features + Improvements - Ge...
DSD-INT 2023 Delft3D FM Suite 2024.01 2D3D - New features + Improvements - Ge...
Deltares17 views
Neo4j y GenAI by Neo4j
Neo4j y GenAI Neo4j y GenAI
Neo4j y GenAI
Neo4j45 views
DSD-INT 2023 Machine learning in hydraulic engineering - Exploring unseen fut... by Deltares
DSD-INT 2023 Machine learning in hydraulic engineering - Exploring unseen fut...DSD-INT 2023 Machine learning in hydraulic engineering - Exploring unseen fut...
DSD-INT 2023 Machine learning in hydraulic engineering - Exploring unseen fut...
Deltares6 views
Copilot Prompting Toolkit_All Resources.pdf by Riccardo Zamana
Copilot Prompting Toolkit_All Resources.pdfCopilot Prompting Toolkit_All Resources.pdf
Copilot Prompting Toolkit_All Resources.pdf
Riccardo Zamana8 views
DSD-INT 2023 FloodAdapt - A decision-support tool for compound flood risk mit... by Deltares
DSD-INT 2023 FloodAdapt - A decision-support tool for compound flood risk mit...DSD-INT 2023 FloodAdapt - A decision-support tool for compound flood risk mit...
DSD-INT 2023 FloodAdapt - A decision-support tool for compound flood risk mit...
Deltares13 views
2023-November-Schneider Electric-Meetup-BCN Admin Group.pptx by animuscrm
2023-November-Schneider Electric-Meetup-BCN Admin Group.pptx2023-November-Schneider Electric-Meetup-BCN Admin Group.pptx
2023-November-Schneider Electric-Meetup-BCN Admin Group.pptx
animuscrm13 views
SUGCON ANZ Presentation V2.1 Final.pptx by Jack Spektor
SUGCON ANZ Presentation V2.1 Final.pptxSUGCON ANZ Presentation V2.1 Final.pptx
SUGCON ANZ Presentation V2.1 Final.pptx
Jack Spektor22 views
Roadmap y Novedades de producto by Neo4j
Roadmap y Novedades de productoRoadmap y Novedades de producto
Roadmap y Novedades de producto
Neo4j50 views
DSD-INT 2023 Simulating a falling apron in Delft3D 4 - Engineering Practice -... by Deltares
DSD-INT 2023 Simulating a falling apron in Delft3D 4 - Engineering Practice -...DSD-INT 2023 Simulating a falling apron in Delft3D 4 - Engineering Practice -...
DSD-INT 2023 Simulating a falling apron in Delft3D 4 - Engineering Practice -...
Deltares6 views
Generic or specific? Making sensible software design decisions by Bert Jan Schrijver
Generic or specific? Making sensible software design decisionsGeneric or specific? Making sensible software design decisions
Generic or specific? Making sensible software design decisions
DSD-INT 2023 European Digital Twin Ocean and Delft3D FM - Dols by Deltares
DSD-INT 2023 European Digital Twin Ocean and Delft3D FM - DolsDSD-INT 2023 European Digital Twin Ocean and Delft3D FM - Dols
DSD-INT 2023 European Digital Twin Ocean and Delft3D FM - Dols
Deltares7 views
Citi TechTalk Session 2: Kafka Deep Dive by confluent
Citi TechTalk Session 2: Kafka Deep DiveCiti TechTalk Session 2: Kafka Deep Dive
Citi TechTalk Session 2: Kafka Deep Dive
confluent17 views

EWD 3 Training Course Part 37: Building a React.js application with ewd-xpress Part 1

  • 1. Copyright © 2016 M/Gateway Developments Ltd EWD 3 Training Course Part 37 Building a React.js-based QEWD Application (a) Getting started Rob Tweed Director, M/Gateway Developments Ltd Twitter: @rtweed
  • 2. Copyright © 2016 M/Gateway Developments Ltd Assumptions • You understand the basic principles of React.js • If not, try taking this introductory course: – https://www.udemy.com/introduction-to-reactjs • You've installed Node.js and an appropriate database: – Windows or OS X: Caché or GlobalsDB – Linux: Redis, Caché, GlobalsDB or GT.M
  • 3. Copyright © 2016 M/Gateway Developments Ltd Setting up the React.js Environment • Ensure that you've installed: – QEWD – qewd-monitor – ewd-client • If you haven't done so, here's how: – cd ~/qewd // or wherever you want your QEWD environment – npm install qewd qewd-monitor ewd-client
  • 4. Copyright © 2016 M/Gateway Developments Ltd If you're using Linux • You can use the QEWD / React installer: cd ~ wget https://raw.githubusercontent.com/robtweed/qewd/master/installers/reactEnvironment.sh source reactEnvironment.sh
  • 5. Copyright © 2016 M/Gateway Developments Ltd Otherwise do it manually cd ~/qewd npm install react react-dom babelify babel-preset-react react-bootstrap npm install react-toastr react-select socket.io-client npm install jquery ewd-client ewd-react-tools qewd-react npm install -g browserify npm install -g uglify-js
  • 6. Copyright © 2016 M/Gateway Developments Ltd Create a new application folder cd qewdwww mkdir react-demo1 cd react-demo1 npm install babel-preset-es2015
  • 7. Copyright © 2016 M/Gateway Developments Ltd Ready to start developing!
  • 8. Copyright © 2016 M/Gateway Developments Ltd index.html ~/qewd/www/react-demo1/index.html <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <title id="QEWD React.js Example"></title> </head> <body> <div id="content"></div> <script src="bundle.js"></script> </body> </html>
  • 9. Copyright © 2016 M/Gateway Developments Ltd app.js ~/qewd/www/react-demo1/app.js var reactLoader = require('qewd-react').loader; var params = { applicationName: 'react-demo1', MainPage: require('./MainPage') }; reactLoader(params);
  • 10. Copyright © 2016 M/Gateway Developments Ltd MainPage.js c:ewd3wwwreact-demo1MainPage.js "use strict" var React = require('react'); var MainPage = React.createClass({ render: function() { console.log('rendering MainPage'); return ( <div> This is my test React.js Application </div> ); } }); module.exports = MainPage;
  • 11. Copyright © 2016 M/Gateway Developments Ltd Bundle it cd ~/qewd/www/react-demo1 browserify -t [ babelify --compact false --presets [es2015 react] ] app.js > bundle.js You should now see bundle.js in the ~/qewd/www/react-demo1 folder
  • 12. Copyright © 2016 M/Gateway Developments Ltd Try it
  • 13. Copyright © 2016 M/Gateway Developments Ltd So what just happened?
  • 14. Copyright © 2016 M/Gateway Developments Ltd It's a standard React.js App… • But it has automated: – EWD 3 / ewd-client startup – QEWD application registration • Used qewd-react.loader to do this
  • 15. Copyright © 2016 M/Gateway Developments Ltd The startup sequence • Explained in an earlier part of the course: – Wait until the browser's DOM is ready – Then invoke EWD.start() • Passing socket.io object as an argument if using web-sockets – When EWD has started • You need to wait until your QEWD application has been registered in the QEWD back-end – Now your application is ready for user interaction
  • 16. Copyright © 2016 M/Gateway Developments Ltd Doing this in React is more tricky • Must use React's life-cycle methods – If any of these are invoked, DOM is ready • Can therefore start EWD within them – BUT the top-level component will still render while EWD is starting – SO you need two render alternatives, dependent on a state variable's value • 'Please wait' message; or • Render the application's main component – AND • reset the state variable's value when EWD has started and application has been registered • pass EWD object into main component as a prop
  • 17. Copyright © 2016 M/Gateway Developments Ltd A lot to remember • Need to do all of these things every time you want to start any QEWD application – Lots to remember and potentially go wrong – Ideal candidate for automation • So all this behaviour is pre-written for you in the qewd-react module – Let it do all that startup stuff – You just focus on the main and subsequent modules for your application
  • 18. Copyright © 2016 M/Gateway Developments Ltd By all means take a look • ~/qewd/node_modules/qewd-react – /lib/loader.js – Uses the componentWillMount() and componentDidMount() lifecycle methods • EWD is started in the latter – Uses a state variable that flips when your application is registered • Causing your main component to render • It's then over to you
  • 19. Copyright © 2016 M/Gateway Developments Ltd Hierarchy of Components • Your QEWD application must be written as a hierarchy of React components – Each is a self-contained module – Each one will need access to the EWD object • To send messages to the QEWD back-end • To handle responses/messages sent/returned from the QEWD back-end • Components are bundled for use in browser – Using WebPack or Browserify
  • 20. Copyright © 2016 M/Gateway Developments Ltd We saw this before • See Part 30 of this course (Modularising QEWD Applications) – From around slide 55 • The EWD object must be made available to each module – BUT it must be the post-registration instance of the EWD object • So it has the send() method, etc and session token available
  • 21. Copyright © 2016 M/Gateway Developments Ltd How's this done with React? Let's look at the render() function in that loader module…
  • 22. Copyright © 2016 M/Gateway Developments Ltd How's this done with React? render: function render() { var componentPath = ['app']; var renderComponent; if (this.state.status === 'wait') { renderComponent = React.createElement( 'div', null, 'Please wait...' ); } else { renderComponent = React.createElement(MainPage, { controller: this.controller, componentPath: componentPath }); } return renderComponent; } });
  • 23. Copyright © 2016 M/Gateway Developments Ltd How's this done with React? render: function render() { var componentPath = ['app']; var renderComponent; if (this.state.status === 'wait') { renderComponent = React.createElement( 'div', null, 'Please wait...' ); } else { renderComponent = React.createElement(MainPage, { controller: this.controller, componentPath: componentPath }); } return renderComponent; } }); Here's the "Please wait" message which appears while EWD is starting and application is being registered
  • 24. Copyright © 2016 M/Gateway Developments Ltd How's this done with React? render: function render() { var componentPath = ['app']; var renderComponent; if (this.state.status === 'wait') { renderComponent = React.createElement( 'div', null, 'Please wait...' ); } else { renderComponent = React.createElement(MainPage, { controller: this.controller, componentPath: componentPath }); } return renderComponent; } }); Here's how it invokes your main component instead, once everything has started
  • 25. Copyright © 2016 M/Gateway Developments Ltd How's this done with React? render: function render() { var componentPath = ['app']; var renderComponent; if (this.state.status === 'wait') { renderComponent = React.createElement( 'div', null, 'Please wait...' ); } else { renderComponent = React.createElement(MainPage, { controller: this.controller, componentPath: componentPath }); } return renderComponent; } }); Here's how it invokes your main component instead, once everything has started Your main component is referred to as MainPage
  • 26. Copyright © 2016 M/Gateway Developments Ltd Where's the EWD object? render: function render() { var componentPath = ['app']; var renderComponent; if (this.state.status === 'wait') { renderComponent = React.createElement( 'div', null, 'Please wait...' ); } else { renderComponent = React.createElement(MainPage, { controller: this.controller, componentPath: componentPath }); } return renderComponent; } }); But where is the EWD object?
  • 27. Copyright © 2016 M/Gateway Developments Ltd Where's the EWD object? render: function render() { var componentPath = ['app']; var renderComponent; if (this.state.status === 'wait') { renderComponent = React.createElement( 'div', null, 'Please wait...' ); } else { renderComponent = React.createElement(MainPage, { controller: this.controller, componentPath: componentPath }); } return renderComponent; } }); This is it
  • 28. Copyright © 2016 M/Gateway Developments Ltd Where's the EWD object? render: function render() { var componentPath = ['app']; var renderComponent; if (this.state.status === 'wait') { renderComponent = React.createElement( 'div', null, 'Please wait...' ); } else { renderComponent = React.createElement(MainPage, { controller: this.controller, componentPath: componentPath }); } return renderComponent; } }); EWD is part of an object I've called the controller
  • 29. Copyright © 2016 M/Gateway Developments Ltd Where's the EWD object? render: function render() { var componentPath = ['app']; var renderComponent; if (this.state.status === 'wait') { renderComponent = React.createElement( 'div', null, 'Please wait...' ); } else { renderComponent = React.createElement(MainPage, { controller: this.controller, componentPath: componentPath }); } return renderComponent; } }); EWD is part of an object I've called the controller This object is instantiated for you and passed to your Main module as a prop named controller
  • 30. Copyright © 2016 M/Gateway Developments Ltd Separation of Concerns • An important principle of modern web application development is separation of concerns – Move away from monolithic programming – Each key aspect of an application is kept separate • Easier to maintain and understand • More scalable as application grows in size
  • 31. Copyright © 2016 M/Gateway Developments Ltd React focuses on the View • Your React components should just describe the View aspect of your application – What it looks like under various situations as the application is used • The other aspects of your application, commonly referred to as the Model and Controller, should, for best practice, be kept separate from the View
  • 32. Copyright © 2016 M/Gateway Developments Ltd The controller object • Provides a place to describe the dynamic behaviour that needs to take place in any of your application's React components • The controller object is passed as a prop to any of your components that requires dynamic behaviour
  • 33. Copyright © 2016 M/Gateway Developments Ltd The controller object • The controller object is initially created for you by the qewd-react loader module and passed to your MainPage module as a prop – You refer to it as this.props.controller – The controller object includes within it the post-registration EWD object • eg this.props.controller.send() allows you to send messages to the QEWD back-end
  • 34. Copyright © 2016 M/Gateway Developments Ltd The controller object • The idea is for you to extend the controller object in each of your React components to define the behaviour of that component: – Events – Messages to be sent – Responses to be handled – Corresponding changes to state variables within the component • Which cause a re-render of the component and its child components
  • 35. Copyright © 2016 M/Gateway Developments Ltd Passing on the controller object • qewd-react's loader module creates the controller object for you and passes it to your MainPage component • It's up to you to pass it on to any of your other React components as a prop
  • 36. Copyright © 2016 M/Gateway Developments Ltd So let's review the demo app
  • 37. Copyright © 2016 M/Gateway Developments Ltd index.html ~/qewd/www/react-demo1/index.html <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <title id="QEWD React.js Example"></title> </head> <body> <div id="content"></div> <script src="bundle.js"></script> </body> </html> Place-holder div into which React renders its generated mark-up Your application will be built up from within this div Always give it an id of 'content'
  • 38. Copyright © 2016 M/Gateway Developments Ltd index.html ~/qewd/www/react-demo1/index.html <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <title id="ewd-xpress React.js Example"></title> </head> <body> <div id="content"></div> <script src="bundle.js"></script> </body> </html> Load the bundled application's Javascript into the browser You'll use Browserify or WebPack to turn your hierarchy of React Components into a bundle file
  • 39. Copyright © 2016 M/Gateway Developments Ltd app.js ~/qewd/www/react-demo1/app.js var reactLoader = require('qewd-react').loader; var params = { applicationName: 'react-demo1', MainPage: require('./MainPage') }; reactLoader(params); This is the top level of your React application's hierarchy of modules
  • 40. Copyright © 2016 M/Gateway Developments Ltd app.js ~/qewd/www/react-demo1/app.js var reactLoader = require('qewd-react').loader; var params = { applicationName: 'react-demo1', MainPage: require('./MainPage') }; reactLoader(params); This is the top level of your React application's hierarchy of modules It makes use of the qewd-react loader to get everything started
  • 41. Copyright © 2016 M/Gateway Developments Ltd app.js ~/qewd/www/react-demo1/app.js var reactLoader = require('qewd-react').loader; var params = { applicationName: 'react-demo1', MainPage: require('./MainPage') }; reactLoader(params); You just define two things:
  • 42. Copyright © 2016 M/Gateway Developments Ltd app.js ~/qewd/www/react-demo1/app.js var reactLoader = require('qewd-react').loader; var params = { applicationName: 'react-demo1', MainPage: require('./MainPage') }; reactLoader(params); You just define two things: The application name This is the name that will be used by ewd-xpress to register it
  • 43. Copyright © 2016 M/Gateway Developments Ltd app.js ~/qewd/www/react-demo1/app.js var reactLoader = require('qewd-react').loader; var params = { applicationName: 'react-demo1', MainPage: require('./MainPage') }; reactLoader(params); You just define two things: Your Application's effective top-level Component Referred to as MainPage but your component file can be named what you like Note: you use require() to load the file
  • 44. Copyright © 2016 M/Gateway Developments Ltd MainPage.js ~/qewd/www/react-demo1/MainPage.js "use strict" var React = require('react'); var MainPage = React.createClass({ render: function() { console.log('rendering MainPage'); return ( <div> This is my test React.js Application </div> ); } }); module.exports = MainPage; So as far as you're concerned, this is your top component By the time it is invoked, EWD has started and the application is registered by QEWD
  • 45. Copyright © 2016 M/Gateway Developments Ltd MainPage.js ~/qewd/www/react-demo1/MainPage.js "use strict" var React = require('react'); var MainPage = React.createClass({ render: function() { console.log('rendering MainPage'); return ( <div> This is my test React.js Application </div> ); } }); module.exports = MainPage; Here we're not doing anything except displaying this text
  • 46. Copyright © 2016 M/Gateway Developments Ltd Then we bundled it cd ~/qewd/www/react-demo1 browserify -t [ babelify --compact false --presets [es2015 react] ] app.js > bundle.js We told Browserify to start with app.js It automatically threads its way down through any require() functions
  • 47. Copyright © 2016 M/Gateway Developments Ltd Then we bundled it cd ~/qewd/www/react-demo1 browserify -t [ babelify --compact false --presets [es2015 react] ] app.js > bundle.js We told Browserify to start with app.js It automatically threads its way down through any require() functions and combines all the JavaScript into a single file named bundle.js
  • 48. Copyright © 2016 M/Gateway Developments Ltd So when we start the app ~/qewd/www/react-demo1/index.html <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <title id="QEWD React.js Example"></title> </head> <body> <div id="content"></div> <script src="bundle.js"></script> </body> </html> The index.html file is loaded into the browser, and it then loads the bundled JavaScript file
  • 49. Copyright © 2016 M/Gateway Developments Ltd And what we see is…
  • 50. Copyright © 2016 M/Gateway Developments Ltd And what we see is… The application is registered
  • 51. Copyright © 2016 M/Gateway Developments Ltd And what we see is… And displays the text defined in your MainPage component
  • 52. Copyright © 2016 M/Gateway Developments Ltd It's not doing much so far ~/qewd/www/react-demo1/MainPage.js "use strict" var React = require('react'); var MainPage = React.createClass({ render: function() { console.log('rendering MainPage'); return ( <div> This is my test React.js Application </div> ); } }); module.exports = MainPage; We'll start to build it out in the next part of the course
  • 53. Copyright © 2016 M/Gateway Developments Ltd It's not doing much so far ~/qewd/www/react-demo1/MainPage.js "use strict" var React = require('react'); var MainPage = React.createClass({ render: function() { console.log('rendering MainPage'); return ( <div> This is my test React.js Application </div> ); } }); module.exports = MainPage; We'll make it send a message To QEWD and return a response that we display See the next part of this course