SlideShare a Scribd company logo
Copyright © 2016 M/Gateway Developments Ltd
EWD 3 Training Course
Part 38
Building a React.js-based QEWD
Application
(b) First steps in developing
with React.js
Rob Tweed
Director, M/Gateway Developments Ltd
Twitter: @rtweed
Copyright © 2016 M/Gateway Developments Ltd
Here's our Main component
~/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;
Let's make it send a message
to QEWD and return
a response that we display
Copyright © 2016 M/Gateway Developments Ltd
Here's our Main component
~/qewd/www/react-demo1/MainPage.js
"use strict"
var React = require('react');
var MainPage = React.createClass({
render: function() {
console.log('rendering MainPage');
return (
<div>
We'll display the returned message here
</div>
);
}
});
module.exports = MainPage;
Let's make it send a message
To QEWD and return
a response that we display
Copyright © 2016 M/Gateway Developments Ltd
When and where to send a message?
We're currently just using the
component's render() function
~/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;
Copyright © 2016 M/Gateway Developments Ltd
When and where to send a message?
To send a message to QEWD,
we should use
a React life-cycle method
For example:
componentWillMount()
componentDidMount()
~/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;
Copyright © 2016 M/Gateway Developments Ltd
When and where to send a message?
To send a message to QEWD,
we should use
a React life-cycle method
For example:
componentWillMount()
Triggered before rendering
takes place
~/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;
Copyright © 2016 M/Gateway Developments Ltd
When and where to send a message?
To send a message to QEWD,
we should use
a React life-cycle method
For example:
componentDidMount()
Triggered after rendering
takes place
~/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;
Copyright © 2016 M/Gateway Developments Ltd
When and where to send a message?
To send a message to QEWD,
we should use
a React life-cycle method
For example:
componentWillMount()
Triggered before rendering
takes place
This would seem to be the
obvious one to use in our example
~/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;
Copyright © 2016 M/Gateway Developments Ltd
componentWillMount()
"use strict"
var React = require('react');
module.exports = React.createClass({
componentWillMount: function() {
// do something before it renders
},
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
componentWillMount()
The controller object is created
from and extends the EWD object
So to send a message, we invoke
its send() method
The controller was passed to
our main component as a prop
named controller, so we
refer to it as this.props.controller
"use strict"
var React = require('react');
var MainPage = React.createClass({
componentWillMount: function() {
this.props.controller.send({
type: 'testMessage',
params: {
foo: 'bar'
}
});
},
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
Re-bundle it
cd ewd3wwwreact-demo1
browserify -t [ babelify --compact false --presets [es2015 react] ] app.js > bundle.js
You must re-run Browserify (or WebPack) to create a new bundle.js file, every
time you modify any component or module in your application
Copyright © 2016 M/Gateway Developments Ltd
Try it
Nothing seems to have happened!
Copyright © 2016 M/Gateway Developments Ltd
But check the QEWD log..
worker 5036 received message: {"type":"testMessage","params":{"foo":"bar"},"toke
n":"9e27f30e-7152-469b-90fe-d637e5e1d8db"}
master process received response from worker 5036: {"type":"testMessage","finish
ed":true,"message":{"error":"No handler defined for react-demo1 messages of type
testMessage"}}
*** handleMessage response {"type":"testMessage","finished":true,"message":{"err
or":"No handler defined for react-demo1 messages of type testMessage"}}
sending to socket /#nDzlXWbHSfB2zCT5AAAH
Master process has finished processing response from worker process 5036 which i
s back in available pool
Copyright © 2016 M/Gateway Developments Ltd
So it did send a message
• Nothing is showing in the browser
because logging isn't enabled
• Let's fix that….
Copyright © 2016 M/Gateway Developments Ltd
Turn on logging
This is the equivalent of
EWD.log = true;
"use strict"
var React = require('react');
var MainPage = React.createClass({
componentWillMount: function() {
this.props.controller.log = true;
this.props.controller.send({
type: 'testMessage',
params: {
foo: 'bar'
}
});
},
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
Re-bundle it
browserify -t [ babelify --compact false --presets [es2015 react] ] app.js > bundle.js
Copyright © 2016 M/Gateway Developments Ltd
Try it
Now we can see that the message
was sent and a response
received
Copyright © 2016 M/Gateway Developments Ltd
Try it
But we can also see that we're
getting back an error
Of course, that's because we
haven't created a back-end
handler module for this
application
Copyright © 2016 M/Gateway Developments Ltd
We'll fix that…
~/qewd/node_modules/react-demo1.js
module.exports = {
handlers: {
testMessage: function(messageObj, session, send, finished) {
finished({text: 'Welcome! The value of foo was ' + messageObj.params.foo});
}
}
};
It's just a standard QEWD back-end handler module
Copyright © 2016 M/Gateway Developments Ltd
Try it again
Now it's working
But we're not displaying the
response in the page yet
Copyright © 2016 M/Gateway Developments Ltd
Displaying the message
So how do we get the response
message to display here?
"use strict"
var React = require('react');
var MainPage = React.createClass({
componentWillMount: function() {
this.props.controller.log = true;
this.props.controller.send({
type: 'testMessage',
params: {
foo: 'bar'
}
});
},
render: function() {
console.log('rendering MainPage');
return (
<div>
This is where we want to display the response message
</div>
);
}
});
module.exports = MainPage;
Copyright © 2016 M/Gateway Developments Ltd
We seem to have a problem
• Look carefully at the browser's console
log:
react-demo1 registered
sent: {"type":"testMessage","params":{"foo":"bar"}}
rendering MainPage
received: {"type":"testMessage","finished":true,"message":{"text":"Welcome! The value of foo was bar"}}
Copyright © 2016 M/Gateway Developments Ltd
We seem to have a problem
• Look carefully at the browser's console
log:
react-demo1 registered
sent: {"type":"testMessage","params":{"foo":"bar"}}
rendering MainPage
received: {"type":"testMessage","finished":true,"message":{"text":"Welcome! The value of foo was bar"}}
We sent the message to the back-end
Copyright © 2016 M/Gateway Developments Ltd
We seem to have a problem
• Look carefully at the browser's console
log:
react-demo1 registered
sent: {"type":"testMessage","params":{"foo":"bar"}}
rendering MainPage
received: {"type":"testMessage","finished":true,"message":{"text":"Welcome! The value of foo was bar"}}
But before the response was received
Copyright © 2016 M/Gateway Developments Ltd
We seem to have a problem
• Look carefully at the browser's console
log:
react-demo1 registered
sent: {"type":"testMessage","params":{"foo":"bar"}}
rendering MainPage
received: {"type":"testMessage","finished":true,"message":{"text":"Welcome! The value of foo was bar"}}
The Main Page render() function ran
Copyright © 2016 M/Gateway Developments Ltd
We seem to have a problem
• Look carefully at the browser's console
log:
react-demo1 registered
sent: {"type":"testMessage","params":{"foo":"bar"}}
rendering MainPage
received: {"type":"testMessage","finished":true,"message":{"text":"Welcome! The value of foo was bar"}}
The Main Page render() function ran
..and React gives us no way to
prevent that
Copyright © 2016 M/Gateway Developments Ltd
Displaying the message
So how do we deal with this?
"use strict"
var React = require('react');
var MainPage = React.createClass({
componentWillMount: function() {
this.props.controller.log = true;
this.props.controller.send({
type: 'testMessage',
params: {
foo: 'bar'
}
});
},
render: function() {
console.log('rendering MainPage');
return (
<div>
This is where we want to display the response message
</div>
);
}
});
module.exports = MainPage;
Copyright © 2016 M/Gateway Developments Ltd
By using a state variable
Have a conditional render()
outcome dependent on the
value of a state variable
"use strict"
var React = require('react');
var MainPage = React.createClass({
componentWillMount: function() {
this.props.controller.log = true;
this.props.controller.send({
type: 'testMessage',
params: {
foo: 'bar'
}
});
},
render: function() {
console.log('rendering MainPage');
return (
<div>
This is where we want to display the response message
</div>
);
}
});
module.exports = MainPage;
Copyright © 2016 M/Gateway Developments Ltd
By using a state variable
The state variable is initialised
with one value, causing
an initial rendering
"use strict"
var React = require('react');
var MainPage = React.createClass({
componentWillMount: function() {
this.props.controller.log = true;
this.props.controller.send({
type: 'testMessage',
params: {
foo: 'bar'
}
});
},
render: function() {
console.log('rendering MainPage');
return (
<div>
Initial message....probably nothing at all
</div>
);
}
});
module.exports = MainPage;
Copyright © 2016 M/Gateway Developments Ltd
By using a state variable
When the response is received
change the state variable value
and make the render()
function now display the
response message
"use strict"
var React = require('react');
var MainPage = React.createClass({
componentWillMount: function() {
this.props.controller.log = true;
this.props.controller.send({
type: 'testMessage',
params: {
foo: 'bar'
}
});
},
render: function() {
console.log('rendering MainPage');
return (
<div>
Welcome! The value of foo was bar
</div>
);
}
});
module.exports = MainPage;
Copyright © 2016 M/Gateway Developments Ltd
Do the following…
"use strict"
var React = require('react');
var MainPage = React.createClass({
getInitialState: function() {
return {
status: 'initial',
}
},
componentWillMount: function() {
this.props.controller.log = true;
this.props.controller.send({
type: 'testMessage',
params: {
foo: 'bar'
}
});
},
...etc
Create a state variable
named status with
and initial value of initial
The getInitialState() method
is provided by React for
this purpose
Copyright © 2016 M/Gateway Developments Ltd
Do the following…
"use strict"
var React = require('react');
var MainPage = React.createClass({
getInitialState: function() {
return {
status: 'initial',
}
},
componentWillMount: function() {
this.props.controller.log = true;
var message = {
type: 'testMessage',
params: {
foo: 'bar'
}
};
this.props.controller.send(message, function(responseObj) {
// handle the returned response
});
},
Modify the message-
sending logic to include a
response handler
Copyright © 2016 M/Gateway Developments Ltd
Do the following…
"use strict"
var React = require('react');
var MainPage = React.createClass({
getInitialState: function() {
return {
status: 'initial',
}
},
componentWillMount: function() {
this.props.controller.log = true;
var message = {
type: 'testMessage',
params: {
foo: 'bar'
}
};
var component = this;
this.props.controller.send(message, function(responseObj) {
component.setState({status: responseObj.message.text});
});
},
Change the state variable
and give it the value of
the response text
React provides this.setState
for this purpose
Copyright © 2016 M/Gateway Developments Ltd
Do the following…
"use strict"
var React = require('react');
var MainPage = React.createClass({
getInitialState: function() {
return {
status: 'initial',
}
},
componentWillMount: function() {
this.props.controller.log = true;
var message = {
type: 'testMessage',
params: {
foo: 'bar'
}
};
var component = this;
this.props.controller.send(message, function(responseObj) {
component.setState({status: responseObj.message.text});
});
},
We need to ensure
the external value of
this is correctly available
within the callback's closure
Copyright © 2016 M/Gateway Developments Ltd
That's the state variable working
• Now we need to make the component's
render() method conditional on its value…
Copyright © 2016 M/Gateway Developments Ltd
Do the following…
..etc..
render: function() {
console.log('rendering MainPage');
if (this.state.status === 'initial') {
return (
<div></div>
);
}
else {
return (
<div>{this.state.status}</div>
);
}
}
..etc
So it now renders an empty
div inititially
Copyright © 2016 M/Gateway Developments Ltd
Do the following…
..etc..
render: function() {
console.log('rendering MainPage');
if (this.state.status === 'initial') {
return (
<div></div>
);
}
else {
return (
<div>{this.state.status}</div>
);
}
}
..etc
Then, when re-rendered,
it displays the value of
the state variable
which should now contain
the response text
Copyright © 2016 M/Gateway Developments Ltd
Do the following…
..etc..
var component = this;
this.props.controller.send(message, function(responseObj) {
component.setState({status: responseObj.message.text});
});
},
render: function() {
console.log('rendering MainPage');
if (this.state.status === 'initial') {
return (
<div></div>
);
}
else {
return (
<div>{this.state.status}</div>
);
}
}
..etc
Re-rendering occurs
automatically when the
state variable value is
changed within the
response handler's
callback function
Copyright © 2016 M/Gateway Developments Ltd
Do the following…
..etc..
render: function() {
console.log('rendering MainPage');
if (this.state.status === 'initial') {
return (
<div></div>
);
}
else {
return (
<div>{this.state.status}</div>
);
}
}
..etc
Note how JSX variables are
specified within
curly braces
Copyright © 2016 M/Gateway Developments Ltd
Try it again
The returned message
is now displayed in the page
You may briefly see "Please wait"
appearing during the registration
process
Copyright © 2016 M/Gateway Developments Ltd
Try it again
Notice how MainPage
Is rendered twice
Once initially
then again when the
response is received
Copyright © 2016 M/Gateway Developments Ltd
Which life-cycle method to use?
"use strict"
var React = require('react');
var MainPage = React.createClass({
getInitialState: function() {
return {
status: 'initial',
}
},
componentWillMount: function() {
this.props.controller.log = true;
var message = {
type: 'testMessage',
params: {
foo: 'bar'
}
};
var component = this;
this.props.controller.send(message, function(responseObj) {
component.setState({status: responseObj.message.text});
});
},
We used componentWillMount()
which fires before our
MainPage component is
rendered.
Copyright © 2016 M/Gateway Developments Ltd
Which life-cycle method to use?
"use strict"
var React = require('react');
var MainPage = React.createClass({
getInitialState: function() {
return {
status: 'initial',
}
},
componentDidMount: function() {
this.props.controller.log = true;
var message = {
type: 'testMessage',
params: {
foo: 'bar'
}
};
var component = this;
this.props.controller.send(message, function(responseObj) {
component.setState({status: responseObj.message.text});
});
},
We could have used
componentDidMount()
However this would have
slightly delayed
sending the
message to QEWD
until after the
initial render
was completed
Copyright © 2016 M/Gateway Developments Ltd
Keep state variables for state only?
Copyright © 2016 M/Gateway Developments Ltd
"use strict"
var React = require('react');
var displayText = '';
var MainPage = React.createClass({
getInitialState: function() {
return {
status: 'initial',
}
},
componentWillMount: function() {
this.props.controller.log = true;
var message = {
type: 'testMessage',
params: {
foo: 'bar'
}
};
var component = this;
this.props.controller.send(message, function(responseObj) {
displayText = responseObj.message.text;
component.setState({status: 'updated'});
});
},
render: function() {
console.log('rendering MainPage');
return (
<div>{displayText}</div>
);
}
});
module.exports = MainPage;
Copyright © 2016 M/Gateway Developments Ltd
"use strict"
var React = require('react');
var displayText = '';
var MainPage = React.createClass({
getInitialState: function() {
return {
status: 'initial',
}
},
componentWillMount: function() {
this.props.controller.log = true;
var message = {
type: 'testMessage',
params: {
foo: 'bar'
}
};
var component = this;
this.props.controller.send(message, function(responseObj) {
displayText = responseObj.message.text;
component.setState({status: 'updated'});
});
},
render: function() {
console.log('rendering MainPage');
return (
<div>{displayText}</div>
);
}
});
module.exports = MainPage;
Use a simple variable
for the display text,
initially set to an empty
string
Copyright © 2016 M/Gateway Developments Ltd
"use strict"
var React = require('react');
var displayText = '';
var MainPage = React.createClass({
getInitialState: function() {
return {
status: 'initial',
}
},
componentWillMount: function() {
this.props.controller.log = true;
var message = {
type: 'testMessage',
params: {
foo: 'bar'
}
};
var component = this;
this.props.controller.send(message, function(responseObj) {
displayText = responseObj.message.text;
component.setState({status: 'updated'});
});
},
render: function() {
console.log('rendering MainPage');
return (
<div>{displayText}</div>
);
}
});
module.exports = MainPage;
The render() method
is no longer
conditional, but
now simply
displays the value
of the displayText
variable
Copyright © 2016 M/Gateway Developments Ltd
"use strict"
var React = require('react');
var displayText = '';
var MainPage = React.createClass({
getInitialState: function() {
return {
status: 'initial',
}
},
componentWillMount: function() {
this.props.controller.log = true;
var message = {
type: 'testMessage',
params: {
foo: 'bar'
}
};
var component = this;
this.props.controller.send(message, function(responseObj) {
displayText = responseObj.message.text;
component.setState({status: 'updated'});
});
},
render: function() {
console.log('rendering MainPage');
return (
<div>{displayText}</div>
);
}
});
module.exports = MainPage;
The status
State variable is
Still initialised as
before
Copyright © 2016 M/Gateway Developments Ltd
"use strict"
var React = require('react');
var displayText = '';
var MainPage = React.createClass({
getInitialState: function() {
return {
status: 'initial',
}
},
componentWillMount: function() {
this.props.controller.log = true;
var message = {
type: 'testMessage',
params: {
foo: 'bar'
}
};
var component = this;
this.props.controller.send(message, function(responseObj) {
displayText = responseObj.message.text;
component.setState({status: 'updated'});
});
},
render: function() {
console.log('rendering MainPage');
return (
<div>{displayText}</div>
);
}
});
module.exports = MainPage;
The response
handler now
resets the value
of the displayText
variable to the
received response
text
Copyright © 2016 M/Gateway Developments Ltd
"use strict"
var React = require('react');
var displayText = '';
var MainPage = React.createClass({
getInitialState: function() {
return {
status: 'initial',
}
},
componentWillMount: function() {
this.props.controller.log = true;
var message = {
type: 'testMessage',
params: {
foo: 'bar'
}
};
var component = this;
this.props.controller.send(message, function(responseObj) {
displayText = responseObj.message.text;
component.setState({status: 'updated'});
});
},
render: function() {
console.log('rendering MainPage');
return (
<div>{displayText}</div>
);
}
});
module.exports = MainPage;
And then changes
the status state
variable to some
other arbitrary value
Copyright © 2016 M/Gateway Developments Ltd
"use strict"
var React = require('react');
var displayText = '';
var MainPage = React.createClass({
getInitialState: function() {
return {
status: 'initial',
}
},
componentWillMount: function() {
this.props.controller.log = true;
var message = {
type: 'testMessage',
params: {
foo: 'bar'
}
};
var component = this;
this.props.controller.send(message, function(responseObj) {
displayText = responseObj.message.text;
component.setState({status: 'updated'});
});
},
render: function() {
console.log('rendering MainPage');
return (
<div>{displayText}</div>
);
}
});
module.exports = MainPage;
The state variable
is now just being
used as a trigger
to force a
re-render of the
MainPage
component
Copyright © 2016 M/Gateway Developments Ltd
"use strict"
var React = require('react');
var displayText = '';
var MainPage = React.createClass({
getInitialState: function() {
return {
status: 'initial',
}
},
componentWillMount: function() {
this.props.controller.log = true;
var message = {
type: 'testMessage',
params: {
foo: 'bar'
}
};
var component = this;
this.props.controller.send(message, function(responseObj) {
displayText = responseObj.message.text;
component.setState({status: 'updated'});
});
},
render: function() {
console.log('rendering MainPage');
return (
<div>{displayText}</div>
);
}
});
module.exports = MainPage;
On the 1st
render, displayText
is an empty
string so nothing
appears in the browser
Copyright © 2016 M/Gateway Developments Ltd
"use strict"
var React = require('react');
var displayText = '';
var MainPage = React.createClass({
getInitialState: function() {
return {
status: 'initial',
}
},
componentWillMount: function() {
this.props.controller.log = true;
var message = {
type: 'testMessage',
params: {
foo: 'bar'
}
};
var component = this;
this.props.controller.send(message, function(responseObj) {
displayText = responseObj.message.text;
component.setState({status: 'updated'});
});
},
render: function() {
console.log('rendering MainPage');
return (
<div>{displayText}</div>
);
}
});
module.exports = MainPage;
But on the 2nd
render, displayText
now contains the
returned response
Copyright © 2016 M/Gateway Developments Ltd
Re-bundle and try it again
It will run exactly
the same as before
Copyright © 2016 M/Gateway Developments Ltd
Separation of Concerns
• Currently they aren't separated
– The dynamic behaviour and its associated
controlling logic is all included in the
MainPage component
– MainPage should ideally just describe the
View logic
Copyright © 2016 M/Gateway Developments Ltd
Separation of Concerns
• Currently they aren't separated
– The dynamic behaviour and its associated
controlling logic is all included in the
MainPage component
– MainPage should ideally just describe the
View logic
• In the next part of this course we'll look at
how we can separate things

More Related Content

What's hot

EWD 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 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 Tweed
 
EWD 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 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 Tweed
 
EWD 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 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 Tweed
 
EWD 3 Training Course Part 22: Traversing Documents using DocumentNode Objects
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 Tweed
 
EWD 3 Training Course Part 7: Applying the QEWD Messaging Pattern
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 Tweed
 
EWD 3 Training Course Part 5a: First Steps in Building a QEWD Application
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 Application
Rob Tweed
 
EWD 3 Training Course Part 44: Creating MicroServices with QEWD.js
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 Tweed
 
EWD 3 Training Course Part 2: EWD 3 Overview
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 Overview
Rob Tweed
 
EWD 3 Training Course Part 10: QEWD Sessions and User Authentication
EWD 3 Training Course Part 10: QEWD Sessions and User AuthenticationEWD 3 Training Course Part 10: QEWD Sessions and User Authentication
EWD 3 Training Course Part 10: QEWD Sessions and User Authentication
Rob Tweed
 
EWD 3 Training Course Part 4: Installing & Configuring QEWD
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 QEWD
Rob Tweed
 
EWD 3 Training Course Part 34: QEWD Resilient Mode
EWD 3 Training Course Part 34: QEWD Resilient ModeEWD 3 Training Course Part 34: QEWD Resilient Mode
EWD 3 Training Course Part 34: QEWD Resilient Mode
Rob Tweed
 
EWD 3 Training Course Part 27: The QEWD Session
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 Tweed
 
EWD 3 Training Course Part 30: Modularising QEWD Applications
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 Applications
Rob Tweed
 
EWD 3 Training Course Part 28: Integrating Legacy Mumps Code with QEWD
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 Tweed
 
EWD 3 Training Course Part 19: The cache.node APIs
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 Tweed
 
EWD 3 Training Course Part 37: Building a React.js application with ewd-xpres...
EWD 3 Training Course Part 37: Building a React.js application with ewd-xpres...EWD 3 Training Course Part 37: Building a React.js application with ewd-xpres...
EWD 3 Training Course Part 37: Building a React.js application with ewd-xpres...
Rob Tweed
 
QEWD.js, JSON Web Tokens & MicroServices
QEWD.js, JSON Web Tokens & MicroServicesQEWD.js, JSON Web Tokens & MicroServices
QEWD.js, JSON Web Tokens & MicroServices
Rob Tweed
 
EWD 3 Training Course Part 45: Using QEWD's Advanced MicroService Functionality
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 Tweed
 
EWD 3 Training Course Part 29: Running QEWD as a Service
EWD 3 Training Course Part 29: Running QEWD as a ServiceEWD 3 Training Course Part 29: Running QEWD as a Service
EWD 3 Training Course Part 29: Running QEWD as a Service
Rob Tweed
 
EWD 3 Training Course Part 12: QEWD Session Timeout Control
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 Tweed
 

What's hot (20)

EWD 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 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
 
EWD 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 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
 
EWD 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 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
 
EWD 3 Training Course Part 22: Traversing Documents using DocumentNode Objects
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
 
EWD 3 Training Course Part 7: Applying the QEWD Messaging Pattern
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
 
EWD 3 Training Course Part 5a: First Steps in Building a QEWD Application
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 Application
 
EWD 3 Training Course Part 44: Creating MicroServices with QEWD.js
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
 
EWD 3 Training Course Part 2: EWD 3 Overview
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 Overview
 
EWD 3 Training Course Part 10: QEWD Sessions and User Authentication
EWD 3 Training Course Part 10: QEWD Sessions and User AuthenticationEWD 3 Training Course Part 10: QEWD Sessions and User Authentication
EWD 3 Training Course Part 10: QEWD Sessions and User Authentication
 
EWD 3 Training Course Part 4: Installing & Configuring QEWD
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 QEWD
 
EWD 3 Training Course Part 34: QEWD Resilient Mode
EWD 3 Training Course Part 34: QEWD Resilient ModeEWD 3 Training Course Part 34: QEWD Resilient Mode
EWD 3 Training Course Part 34: QEWD Resilient Mode
 
EWD 3 Training Course Part 27: The QEWD Session
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
 
EWD 3 Training Course Part 30: Modularising QEWD Applications
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 Applications
 
EWD 3 Training Course Part 28: Integrating Legacy Mumps Code with QEWD
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
 
EWD 3 Training Course Part 19: The cache.node APIs
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
 
EWD 3 Training Course Part 37: Building a React.js application with ewd-xpres...
EWD 3 Training Course Part 37: Building a React.js application with ewd-xpres...EWD 3 Training Course Part 37: Building a React.js application with ewd-xpres...
EWD 3 Training Course Part 37: Building a React.js application with ewd-xpres...
 
QEWD.js, JSON Web Tokens & MicroServices
QEWD.js, JSON Web Tokens & MicroServicesQEWD.js, JSON Web Tokens & MicroServices
QEWD.js, JSON Web Tokens & MicroServices
 
EWD 3 Training Course Part 45: Using QEWD's Advanced MicroService Functionality
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
 
EWD 3 Training Course Part 29: Running QEWD as a Service
EWD 3 Training Course Part 29: Running QEWD as a ServiceEWD 3 Training Course Part 29: Running QEWD as a Service
EWD 3 Training Course Part 29: Running QEWD as a Service
 
EWD 3 Training Course Part 12: QEWD Session Timeout Control
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
 

Viewers also liked

EWD 3 Training Course Part 26: Event-driven Indexing
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 Tweed
 
EWD 3 Training Course Part 31: Using QEWD for Web and REST Services
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 Tweed
 
85. meditech part 3
85. meditech part 385. meditech part 3
85. meditech part 3
Tim Histalk
 
EWD 3 Training Course Part 23: Traversing a Range using DocumentNode Objects
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 Tweed
 
Mumps the Internet scale database
Mumps the Internet scale databaseMumps the Internet scale database
Mumps the Internet scale database
george.james
 
EWD 3 Training Course Part 18: Modelling NoSQL Databases using Global Storage
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 Tweed
 
EWD 3 Training Course Part 24: Traversing a Document's Leaf Nodes
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 Tweed
 
EWD 3 Training Course Part 25: Document Database Capabilities
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 Tweed
 
EWD 3 Training Course Part 21: Persistent JavaScript Objects
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 Tweed
 
EWD 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 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 Tweed
 
EWD 3 Training Course Part 32: Configuring QEWD to use SSL/HTTPS
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 Tweed
 
EWD 3 Training Course Part 42: The QEWD Docker Appliance
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 Tweed
 
EWD 3 Training Course Part 33: Configuring QEWD to use CORS
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 Tweed
 
EWD 3 Training Course Part 35: QEWD Session Locking
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 Tweed
 

Viewers also liked (14)

EWD 3 Training Course Part 26: Event-driven Indexing
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
 
EWD 3 Training Course Part 31: Using QEWD for Web and REST Services
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
 
85. meditech part 3
85. meditech part 385. meditech part 3
85. meditech part 3
 
EWD 3 Training Course Part 23: Traversing a Range using DocumentNode Objects
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
 
Mumps the Internet scale database
Mumps the Internet scale databaseMumps the Internet scale database
Mumps the Internet scale database
 
EWD 3 Training Course Part 18: Modelling NoSQL Databases using Global Storage
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
 
EWD 3 Training Course Part 24: Traversing a Document's Leaf Nodes
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
 
EWD 3 Training Course Part 25: Document Database Capabilities
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
 
EWD 3 Training Course Part 21: Persistent JavaScript Objects
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
 
EWD 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 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
 
EWD 3 Training Course Part 32: Configuring QEWD to use SSL/HTTPS
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
 
EWD 3 Training Course Part 42: The QEWD Docker Appliance
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
 
EWD 3 Training Course Part 33: Configuring QEWD to use CORS
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
 
EWD 3 Training Course Part 35: QEWD Session Locking
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
 

Similar to EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 2

Intro To JavaScript Unit Testing - Ran Mizrahi
Intro To JavaScript Unit Testing - Ran MizrahiIntro To JavaScript Unit Testing - Ran Mizrahi
Intro To JavaScript Unit Testing - Ran Mizrahi
Ran Mizrahi
 
Introduction to React for Frontend Developers
Introduction to React for Frontend DevelopersIntroduction to React for Frontend Developers
Introduction to React for Frontend Developers
Sergio Nakamura
 
How to implement multiple layouts using React router V4.pptx
How to implement multiple layouts using React router V4.pptxHow to implement multiple layouts using React router V4.pptx
How to implement multiple layouts using React router V4.pptx
BOSC Tech Labs
 
How Bitbucket Pipelines Loads Connect UI Assets Super-fast
How Bitbucket Pipelines Loads Connect UI Assets Super-fastHow Bitbucket Pipelines Loads Connect UI Assets Super-fast
How Bitbucket Pipelines Loads Connect UI Assets Super-fast
Atlassian
 
An approach to responsive, realtime with Backbone.js and WebSockets
An approach to responsive, realtime with Backbone.js and WebSocketsAn approach to responsive, realtime with Backbone.js and WebSockets
An approach to responsive, realtime with Backbone.js and WebSockets
Andrei Sebastian Cîmpean
 
Server side rendering with React and Symfony
Server side rendering with React and SymfonyServer side rendering with React and Symfony
Server side rendering with React and Symfony
Ignacio Martín
 
Workshop: Building Vaadin add-ons
Workshop: Building Vaadin add-onsWorkshop: Building Vaadin add-ons
Workshop: Building Vaadin add-ons
Sami Ekblad
 
Test strategy for web development
Test strategy for web developmentTest strategy for web development
Test strategy for web development
alice yang
 
Java scipt
Java sciptJava scipt
Rest web service_with_spring_hateoas
Rest web service_with_spring_hateoasRest web service_with_spring_hateoas
Rest web service_with_spring_hateoas
Zeid Hassan
 
WordCamp Montreal 2016 WP-API + React with server rendering
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 Saab
 
React loadable
React loadableReact loadable
React loadable
George Bukhanov
 
The productive developer guide to React
The productive developer guide to ReactThe productive developer guide to React
The productive developer guide to React
Maurice De Beijer [MVP]
 
Serverless Java on Kubernetes
Serverless Java on KubernetesServerless Java on Kubernetes
Serverless Java on Kubernetes
Krzysztof Sobkowiak
 
Angular for Java Enterprise Developers: Oracle Code One 2018
Angular for Java Enterprise Developers: Oracle Code One 2018Angular for Java Enterprise Developers: Oracle Code One 2018
Angular for Java Enterprise Developers: Oracle Code One 2018
Loiane Groner
 
Unit Testing Express Middleware
Unit Testing Express MiddlewareUnit Testing Express Middleware
Unit Testing Express Middleware
Morris Singer
 
Reactive application using meteor
Reactive application using meteorReactive application using meteor
Reactive application using meteor
Sapna Upreti
 
Webpack Encore Symfony Live 2017 San Francisco
Webpack Encore Symfony Live 2017 San FranciscoWebpack Encore Symfony Live 2017 San Francisco
Webpack Encore Symfony Live 2017 San Francisco
Ryan Weaver
 
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
Daniel Bryant
 
Apache Wicket Web Framework
Apache Wicket Web FrameworkApache Wicket Web Framework
Apache Wicket Web Framework
Luther Baker
 

Similar to EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 2 (20)

Intro To JavaScript Unit Testing - Ran Mizrahi
Intro To JavaScript Unit Testing - Ran MizrahiIntro To JavaScript Unit Testing - Ran Mizrahi
Intro To JavaScript Unit Testing - Ran Mizrahi
 
Introduction to React for Frontend Developers
Introduction to React for Frontend DevelopersIntroduction to React for Frontend Developers
Introduction to React for Frontend Developers
 
How to implement multiple layouts using React router V4.pptx
How to implement multiple layouts using React router V4.pptxHow to implement multiple layouts using React router V4.pptx
How to implement multiple layouts using React router V4.pptx
 
How Bitbucket Pipelines Loads Connect UI Assets Super-fast
How Bitbucket Pipelines Loads Connect UI Assets Super-fastHow Bitbucket Pipelines Loads Connect UI Assets Super-fast
How Bitbucket Pipelines Loads Connect UI Assets Super-fast
 
An approach to responsive, realtime with Backbone.js and WebSockets
An approach to responsive, realtime with Backbone.js and WebSocketsAn approach to responsive, realtime with Backbone.js and WebSockets
An approach to responsive, realtime with Backbone.js and WebSockets
 
Server side rendering with React and Symfony
Server side rendering with React and SymfonyServer side rendering with React and Symfony
Server side rendering with React and Symfony
 
Workshop: Building Vaadin add-ons
Workshop: Building Vaadin add-onsWorkshop: Building Vaadin add-ons
Workshop: Building Vaadin add-ons
 
Test strategy for web development
Test strategy for web developmentTest strategy for web development
Test strategy for web development
 
Java scipt
Java sciptJava scipt
Java scipt
 
Rest web service_with_spring_hateoas
Rest web service_with_spring_hateoasRest web service_with_spring_hateoas
Rest web service_with_spring_hateoas
 
WordCamp Montreal 2016 WP-API + React with server rendering
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
 
React loadable
React loadableReact loadable
React loadable
 
The productive developer guide to React
The productive developer guide to ReactThe productive developer guide to React
The productive developer guide to React
 
Serverless Java on Kubernetes
Serverless Java on KubernetesServerless Java on Kubernetes
Serverless Java on Kubernetes
 
Angular for Java Enterprise Developers: Oracle Code One 2018
Angular for Java Enterprise Developers: Oracle Code One 2018Angular for Java Enterprise Developers: Oracle Code One 2018
Angular for Java Enterprise Developers: Oracle Code One 2018
 
Unit Testing Express Middleware
Unit Testing Express MiddlewareUnit Testing Express Middleware
Unit Testing Express Middleware
 
Reactive application using meteor
Reactive application using meteorReactive application using meteor
Reactive application using meteor
 
Webpack Encore Symfony Live 2017 San Francisco
Webpack Encore Symfony Live 2017 San FranciscoWebpack Encore Symfony Live 2017 San Francisco
Webpack Encore Symfony Live 2017 San Francisco
 
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
 
Apache Wicket Web Framework
Apache Wicket Web FrameworkApache Wicket Web Framework
Apache Wicket Web Framework
 

More from Rob Tweed

QEWD Update
QEWD UpdateQEWD Update
QEWD Update
Rob Tweed
 
Data Persistence as a Language Feature
Data Persistence as a Language FeatureData Persistence as a Language Feature
Data Persistence as a Language Feature
Rob Tweed
 
LNUG: Having Your Node.js Cake and Eating It Too
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 Tweed
 
QEWD.js: Have your Node.js Cake and Eat It Too
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 Tweed
 
ewd-qoper8-vistarpc: Exposing VistA's RPCs as REST Services
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 Tweed
 
qewd-ripple: The Ripple OSI Middle Tier
qewd-ripple: The Ripple OSI Middle Tierqewd-ripple: The Ripple OSI Middle Tier
qewd-ripple: The Ripple OSI Middle Tier
Rob Tweed
 

More from Rob Tweed (6)

QEWD Update
QEWD UpdateQEWD Update
QEWD Update
 
Data Persistence as a Language Feature
Data Persistence as a Language FeatureData Persistence as a Language Feature
Data Persistence as a Language Feature
 
LNUG: Having Your Node.js Cake and Eating It Too
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
 
QEWD.js: Have your Node.js Cake and Eat It Too
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
 
ewd-qoper8-vistarpc: Exposing VistA's RPCs as REST Services
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
 
qewd-ripple: The Ripple OSI Middle Tier
qewd-ripple: The Ripple OSI Middle Tierqewd-ripple: The Ripple OSI Middle Tier
qewd-ripple: The Ripple OSI Middle Tier
 

Recently uploaded

Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
ashiklo9823
 
Authentication Review-June -2024 AP & TS.pptx
Authentication Review-June -2024 AP & TS.pptxAuthentication Review-June -2024 AP & TS.pptx
Authentication Review-June -2024 AP & TS.pptx
DEMONDUOS
 
Crafting highly scalable and performant Modern Data Platforms
Crafting highly scalable and performant Modern Data PlatformsCrafting highly scalable and performant Modern Data Platforms
Crafting highly scalable and performant Modern Data Platforms
Sameer Paradkar
 
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
kiara pandey
 
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
bhumivarma35300
 
InflectraCON 360: Risk-Based Testing for Mission Critical Systems
InflectraCON 360: Risk-Based Testing for Mission Critical SystemsInflectraCON 360: Risk-Based Testing for Mission Critical Systems
InflectraCON 360: Risk-Based Testing for Mission Critical Systems
Inflectra
 
🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
bahubalikumar09988
 
To Avoid Mistakes When Using Online Attendance Sheets
To Avoid Mistakes When Using Online Attendance SheetsTo Avoid Mistakes When Using Online Attendance Sheets
To Avoid Mistakes When Using Online Attendance Sheets
Task Tracker
 
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
902basic
 
Amadeus Travel API, Amadeus Booking API, Amadeus GDS
Amadeus Travel API, Amadeus Booking API, Amadeus GDSAmadeus Travel API, Amadeus Booking API, Amadeus GDS
Amadeus Travel API, Amadeus Booking API, Amadeus GDS
aadhiyaeliza
 
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
dream girl
 
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
confluent
 
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
norina2645
 
GT degree offer diploma Transcript
GT degree offer diploma TranscriptGT degree offer diploma Transcript
GT degree offer diploma Transcript
attueb
 
PathSpotter: Exploring Tested Paths to Discover Missing Tests (FSE 2024)
PathSpotter: Exploring Tested Paths to Discover Missing Tests (FSE 2024)PathSpotter: Exploring Tested Paths to Discover Missing Tests (FSE 2024)
PathSpotter: Exploring Tested Paths to Discover Missing Tests (FSE 2024)
andrehoraa
 
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
45unexpected
 
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
3610stuck
 
SAP implementation steps PDF - Zyple Software
SAP implementation steps PDF - Zyple SoftwareSAP implementation steps PDF - Zyple Software
SAP implementation steps PDF - Zyple Software
Zyple Software
 
Amazon Music Spelling Correction - SIGIR 2024
Amazon Music Spelling Correction - SIGIR 2024Amazon Music Spelling Correction - SIGIR 2024
Amazon Music Spelling Correction - SIGIR 2024
siddharth1729
 
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
neshakor5152
 

Recently uploaded (20)

Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
 
Authentication Review-June -2024 AP & TS.pptx
Authentication Review-June -2024 AP & TS.pptxAuthentication Review-June -2024 AP & TS.pptx
Authentication Review-June -2024 AP & TS.pptx
 
Crafting highly scalable and performant Modern Data Platforms
Crafting highly scalable and performant Modern Data PlatformsCrafting highly scalable and performant Modern Data Platforms
Crafting highly scalable and performant Modern Data Platforms
 
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
 
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
 
InflectraCON 360: Risk-Based Testing for Mission Critical Systems
InflectraCON 360: Risk-Based Testing for Mission Critical SystemsInflectraCON 360: Risk-Based Testing for Mission Critical Systems
InflectraCON 360: Risk-Based Testing for Mission Critical Systems
 
🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
 
To Avoid Mistakes When Using Online Attendance Sheets
To Avoid Mistakes When Using Online Attendance SheetsTo Avoid Mistakes When Using Online Attendance Sheets
To Avoid Mistakes When Using Online Attendance Sheets
 
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
Private Girls Call Navi Mumbai 🛵🚡9820252231 💃 Choose Best And Top Girl Servic...
 
Amadeus Travel API, Amadeus Booking API, Amadeus GDS
Amadeus Travel API, Amadeus Booking API, Amadeus GDSAmadeus Travel API, Amadeus Booking API, Amadeus GDS
Amadeus Travel API, Amadeus Booking API, Amadeus GDS
 
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
 
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
 
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
 
GT degree offer diploma Transcript
GT degree offer diploma TranscriptGT degree offer diploma Transcript
GT degree offer diploma Transcript
 
PathSpotter: Exploring Tested Paths to Discover Missing Tests (FSE 2024)
PathSpotter: Exploring Tested Paths to Discover Missing Tests (FSE 2024)PathSpotter: Exploring Tested Paths to Discover Missing Tests (FSE 2024)
PathSpotter: Exploring Tested Paths to Discover Missing Tests (FSE 2024)
 
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
 
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
 
SAP implementation steps PDF - Zyple Software
SAP implementation steps PDF - Zyple SoftwareSAP implementation steps PDF - Zyple Software
SAP implementation steps PDF - Zyple Software
 
Amazon Music Spelling Correction - SIGIR 2024
Amazon Music Spelling Correction - SIGIR 2024Amazon Music Spelling Correction - SIGIR 2024
Amazon Music Spelling Correction - SIGIR 2024
 
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
 

EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 2

  • 1. Copyright © 2016 M/Gateway Developments Ltd EWD 3 Training Course Part 38 Building a React.js-based QEWD Application (b) First steps in developing with React.js Rob Tweed Director, M/Gateway Developments Ltd Twitter: @rtweed
  • 2. Copyright © 2016 M/Gateway Developments Ltd Here's our Main component ~/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; Let's make it send a message to QEWD and return a response that we display
  • 3. Copyright © 2016 M/Gateway Developments Ltd Here's our Main component ~/qewd/www/react-demo1/MainPage.js "use strict" var React = require('react'); var MainPage = React.createClass({ render: function() { console.log('rendering MainPage'); return ( <div> We'll display the returned message here </div> ); } }); module.exports = MainPage; Let's make it send a message To QEWD and return a response that we display
  • 4. Copyright © 2016 M/Gateway Developments Ltd When and where to send a message? We're currently just using the component's render() function ~/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;
  • 5. Copyright © 2016 M/Gateway Developments Ltd When and where to send a message? To send a message to QEWD, we should use a React life-cycle method For example: componentWillMount() componentDidMount() ~/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;
  • 6. Copyright © 2016 M/Gateway Developments Ltd When and where to send a message? To send a message to QEWD, we should use a React life-cycle method For example: componentWillMount() Triggered before rendering takes place ~/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;
  • 7. Copyright © 2016 M/Gateway Developments Ltd When and where to send a message? To send a message to QEWD, we should use a React life-cycle method For example: componentDidMount() Triggered after rendering takes place ~/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;
  • 8. Copyright © 2016 M/Gateway Developments Ltd When and where to send a message? To send a message to QEWD, we should use a React life-cycle method For example: componentWillMount() Triggered before rendering takes place This would seem to be the obvious one to use in our example ~/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;
  • 9. Copyright © 2016 M/Gateway Developments Ltd componentWillMount() "use strict" var React = require('react'); module.exports = React.createClass({ componentWillMount: function() { // do something before it renders }, render: function() { console.log('rendering MainPage'); return ( <div> This is my test React.js Application </div> ); } }); module.exports = MainPage;
  • 10. Copyright © 2016 M/Gateway Developments Ltd componentWillMount() The controller object is created from and extends the EWD object So to send a message, we invoke its send() method The controller was passed to our main component as a prop named controller, so we refer to it as this.props.controller "use strict" var React = require('react'); var MainPage = React.createClass({ componentWillMount: function() { this.props.controller.send({ type: 'testMessage', params: { foo: 'bar' } }); }, 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 Re-bundle it cd ewd3wwwreact-demo1 browserify -t [ babelify --compact false --presets [es2015 react] ] app.js > bundle.js You must re-run Browserify (or WebPack) to create a new bundle.js file, every time you modify any component or module in your application
  • 12. Copyright © 2016 M/Gateway Developments Ltd Try it Nothing seems to have happened!
  • 13. Copyright © 2016 M/Gateway Developments Ltd But check the QEWD log.. worker 5036 received message: {"type":"testMessage","params":{"foo":"bar"},"toke n":"9e27f30e-7152-469b-90fe-d637e5e1d8db"} master process received response from worker 5036: {"type":"testMessage","finish ed":true,"message":{"error":"No handler defined for react-demo1 messages of type testMessage"}} *** handleMessage response {"type":"testMessage","finished":true,"message":{"err or":"No handler defined for react-demo1 messages of type testMessage"}} sending to socket /#nDzlXWbHSfB2zCT5AAAH Master process has finished processing response from worker process 5036 which i s back in available pool
  • 14. Copyright © 2016 M/Gateway Developments Ltd So it did send a message • Nothing is showing in the browser because logging isn't enabled • Let's fix that….
  • 15. Copyright © 2016 M/Gateway Developments Ltd Turn on logging This is the equivalent of EWD.log = true; "use strict" var React = require('react'); var MainPage = React.createClass({ componentWillMount: function() { this.props.controller.log = true; this.props.controller.send({ type: 'testMessage', params: { foo: 'bar' } }); }, render: function() { console.log('rendering MainPage'); return ( <div> This is my test React.js Application </div> ); } }); module.exports = MainPage;
  • 16. Copyright © 2016 M/Gateway Developments Ltd Re-bundle it browserify -t [ babelify --compact false --presets [es2015 react] ] app.js > bundle.js
  • 17. Copyright © 2016 M/Gateway Developments Ltd Try it Now we can see that the message was sent and a response received
  • 18. Copyright © 2016 M/Gateway Developments Ltd Try it But we can also see that we're getting back an error Of course, that's because we haven't created a back-end handler module for this application
  • 19. Copyright © 2016 M/Gateway Developments Ltd We'll fix that… ~/qewd/node_modules/react-demo1.js module.exports = { handlers: { testMessage: function(messageObj, session, send, finished) { finished({text: 'Welcome! The value of foo was ' + messageObj.params.foo}); } } }; It's just a standard QEWD back-end handler module
  • 20. Copyright © 2016 M/Gateway Developments Ltd Try it again Now it's working But we're not displaying the response in the page yet
  • 21. Copyright © 2016 M/Gateway Developments Ltd Displaying the message So how do we get the response message to display here? "use strict" var React = require('react'); var MainPage = React.createClass({ componentWillMount: function() { this.props.controller.log = true; this.props.controller.send({ type: 'testMessage', params: { foo: 'bar' } }); }, render: function() { console.log('rendering MainPage'); return ( <div> This is where we want to display the response message </div> ); } }); module.exports = MainPage;
  • 22. Copyright © 2016 M/Gateway Developments Ltd We seem to have a problem • Look carefully at the browser's console log: react-demo1 registered sent: {"type":"testMessage","params":{"foo":"bar"}} rendering MainPage received: {"type":"testMessage","finished":true,"message":{"text":"Welcome! The value of foo was bar"}}
  • 23. Copyright © 2016 M/Gateway Developments Ltd We seem to have a problem • Look carefully at the browser's console log: react-demo1 registered sent: {"type":"testMessage","params":{"foo":"bar"}} rendering MainPage received: {"type":"testMessage","finished":true,"message":{"text":"Welcome! The value of foo was bar"}} We sent the message to the back-end
  • 24. Copyright © 2016 M/Gateway Developments Ltd We seem to have a problem • Look carefully at the browser's console log: react-demo1 registered sent: {"type":"testMessage","params":{"foo":"bar"}} rendering MainPage received: {"type":"testMessage","finished":true,"message":{"text":"Welcome! The value of foo was bar"}} But before the response was received
  • 25. Copyright © 2016 M/Gateway Developments Ltd We seem to have a problem • Look carefully at the browser's console log: react-demo1 registered sent: {"type":"testMessage","params":{"foo":"bar"}} rendering MainPage received: {"type":"testMessage","finished":true,"message":{"text":"Welcome! The value of foo was bar"}} The Main Page render() function ran
  • 26. Copyright © 2016 M/Gateway Developments Ltd We seem to have a problem • Look carefully at the browser's console log: react-demo1 registered sent: {"type":"testMessage","params":{"foo":"bar"}} rendering MainPage received: {"type":"testMessage","finished":true,"message":{"text":"Welcome! The value of foo was bar"}} The Main Page render() function ran ..and React gives us no way to prevent that
  • 27. Copyright © 2016 M/Gateway Developments Ltd Displaying the message So how do we deal with this? "use strict" var React = require('react'); var MainPage = React.createClass({ componentWillMount: function() { this.props.controller.log = true; this.props.controller.send({ type: 'testMessage', params: { foo: 'bar' } }); }, render: function() { console.log('rendering MainPage'); return ( <div> This is where we want to display the response message </div> ); } }); module.exports = MainPage;
  • 28. Copyright © 2016 M/Gateway Developments Ltd By using a state variable Have a conditional render() outcome dependent on the value of a state variable "use strict" var React = require('react'); var MainPage = React.createClass({ componentWillMount: function() { this.props.controller.log = true; this.props.controller.send({ type: 'testMessage', params: { foo: 'bar' } }); }, render: function() { console.log('rendering MainPage'); return ( <div> This is where we want to display the response message </div> ); } }); module.exports = MainPage;
  • 29. Copyright © 2016 M/Gateway Developments Ltd By using a state variable The state variable is initialised with one value, causing an initial rendering "use strict" var React = require('react'); var MainPage = React.createClass({ componentWillMount: function() { this.props.controller.log = true; this.props.controller.send({ type: 'testMessage', params: { foo: 'bar' } }); }, render: function() { console.log('rendering MainPage'); return ( <div> Initial message....probably nothing at all </div> ); } }); module.exports = MainPage;
  • 30. Copyright © 2016 M/Gateway Developments Ltd By using a state variable When the response is received change the state variable value and make the render() function now display the response message "use strict" var React = require('react'); var MainPage = React.createClass({ componentWillMount: function() { this.props.controller.log = true; this.props.controller.send({ type: 'testMessage', params: { foo: 'bar' } }); }, render: function() { console.log('rendering MainPage'); return ( <div> Welcome! The value of foo was bar </div> ); } }); module.exports = MainPage;
  • 31. Copyright © 2016 M/Gateway Developments Ltd Do the following… "use strict" var React = require('react'); var MainPage = React.createClass({ getInitialState: function() { return { status: 'initial', } }, componentWillMount: function() { this.props.controller.log = true; this.props.controller.send({ type: 'testMessage', params: { foo: 'bar' } }); }, ...etc Create a state variable named status with and initial value of initial The getInitialState() method is provided by React for this purpose
  • 32. Copyright © 2016 M/Gateway Developments Ltd Do the following… "use strict" var React = require('react'); var MainPage = React.createClass({ getInitialState: function() { return { status: 'initial', } }, componentWillMount: function() { this.props.controller.log = true; var message = { type: 'testMessage', params: { foo: 'bar' } }; this.props.controller.send(message, function(responseObj) { // handle the returned response }); }, Modify the message- sending logic to include a response handler
  • 33. Copyright © 2016 M/Gateway Developments Ltd Do the following… "use strict" var React = require('react'); var MainPage = React.createClass({ getInitialState: function() { return { status: 'initial', } }, componentWillMount: function() { this.props.controller.log = true; var message = { type: 'testMessage', params: { foo: 'bar' } }; var component = this; this.props.controller.send(message, function(responseObj) { component.setState({status: responseObj.message.text}); }); }, Change the state variable and give it the value of the response text React provides this.setState for this purpose
  • 34. Copyright © 2016 M/Gateway Developments Ltd Do the following… "use strict" var React = require('react'); var MainPage = React.createClass({ getInitialState: function() { return { status: 'initial', } }, componentWillMount: function() { this.props.controller.log = true; var message = { type: 'testMessage', params: { foo: 'bar' } }; var component = this; this.props.controller.send(message, function(responseObj) { component.setState({status: responseObj.message.text}); }); }, We need to ensure the external value of this is correctly available within the callback's closure
  • 35. Copyright © 2016 M/Gateway Developments Ltd That's the state variable working • Now we need to make the component's render() method conditional on its value…
  • 36. Copyright © 2016 M/Gateway Developments Ltd Do the following… ..etc.. render: function() { console.log('rendering MainPage'); if (this.state.status === 'initial') { return ( <div></div> ); } else { return ( <div>{this.state.status}</div> ); } } ..etc So it now renders an empty div inititially
  • 37. Copyright © 2016 M/Gateway Developments Ltd Do the following… ..etc.. render: function() { console.log('rendering MainPage'); if (this.state.status === 'initial') { return ( <div></div> ); } else { return ( <div>{this.state.status}</div> ); } } ..etc Then, when re-rendered, it displays the value of the state variable which should now contain the response text
  • 38. Copyright © 2016 M/Gateway Developments Ltd Do the following… ..etc.. var component = this; this.props.controller.send(message, function(responseObj) { component.setState({status: responseObj.message.text}); }); }, render: function() { console.log('rendering MainPage'); if (this.state.status === 'initial') { return ( <div></div> ); } else { return ( <div>{this.state.status}</div> ); } } ..etc Re-rendering occurs automatically when the state variable value is changed within the response handler's callback function
  • 39. Copyright © 2016 M/Gateway Developments Ltd Do the following… ..etc.. render: function() { console.log('rendering MainPage'); if (this.state.status === 'initial') { return ( <div></div> ); } else { return ( <div>{this.state.status}</div> ); } } ..etc Note how JSX variables are specified within curly braces
  • 40. Copyright © 2016 M/Gateway Developments Ltd Try it again The returned message is now displayed in the page You may briefly see "Please wait" appearing during the registration process
  • 41. Copyright © 2016 M/Gateway Developments Ltd Try it again Notice how MainPage Is rendered twice Once initially then again when the response is received
  • 42. Copyright © 2016 M/Gateway Developments Ltd Which life-cycle method to use? "use strict" var React = require('react'); var MainPage = React.createClass({ getInitialState: function() { return { status: 'initial', } }, componentWillMount: function() { this.props.controller.log = true; var message = { type: 'testMessage', params: { foo: 'bar' } }; var component = this; this.props.controller.send(message, function(responseObj) { component.setState({status: responseObj.message.text}); }); }, We used componentWillMount() which fires before our MainPage component is rendered.
  • 43. Copyright © 2016 M/Gateway Developments Ltd Which life-cycle method to use? "use strict" var React = require('react'); var MainPage = React.createClass({ getInitialState: function() { return { status: 'initial', } }, componentDidMount: function() { this.props.controller.log = true; var message = { type: 'testMessage', params: { foo: 'bar' } }; var component = this; this.props.controller.send(message, function(responseObj) { component.setState({status: responseObj.message.text}); }); }, We could have used componentDidMount() However this would have slightly delayed sending the message to QEWD until after the initial render was completed
  • 44. Copyright © 2016 M/Gateway Developments Ltd Keep state variables for state only?
  • 45. Copyright © 2016 M/Gateway Developments Ltd "use strict" var React = require('react'); var displayText = ''; var MainPage = React.createClass({ getInitialState: function() { return { status: 'initial', } }, componentWillMount: function() { this.props.controller.log = true; var message = { type: 'testMessage', params: { foo: 'bar' } }; var component = this; this.props.controller.send(message, function(responseObj) { displayText = responseObj.message.text; component.setState({status: 'updated'}); }); }, render: function() { console.log('rendering MainPage'); return ( <div>{displayText}</div> ); } }); module.exports = MainPage;
  • 46. Copyright © 2016 M/Gateway Developments Ltd "use strict" var React = require('react'); var displayText = ''; var MainPage = React.createClass({ getInitialState: function() { return { status: 'initial', } }, componentWillMount: function() { this.props.controller.log = true; var message = { type: 'testMessage', params: { foo: 'bar' } }; var component = this; this.props.controller.send(message, function(responseObj) { displayText = responseObj.message.text; component.setState({status: 'updated'}); }); }, render: function() { console.log('rendering MainPage'); return ( <div>{displayText}</div> ); } }); module.exports = MainPage; Use a simple variable for the display text, initially set to an empty string
  • 47. Copyright © 2016 M/Gateway Developments Ltd "use strict" var React = require('react'); var displayText = ''; var MainPage = React.createClass({ getInitialState: function() { return { status: 'initial', } }, componentWillMount: function() { this.props.controller.log = true; var message = { type: 'testMessage', params: { foo: 'bar' } }; var component = this; this.props.controller.send(message, function(responseObj) { displayText = responseObj.message.text; component.setState({status: 'updated'}); }); }, render: function() { console.log('rendering MainPage'); return ( <div>{displayText}</div> ); } }); module.exports = MainPage; The render() method is no longer conditional, but now simply displays the value of the displayText variable
  • 48. Copyright © 2016 M/Gateway Developments Ltd "use strict" var React = require('react'); var displayText = ''; var MainPage = React.createClass({ getInitialState: function() { return { status: 'initial', } }, componentWillMount: function() { this.props.controller.log = true; var message = { type: 'testMessage', params: { foo: 'bar' } }; var component = this; this.props.controller.send(message, function(responseObj) { displayText = responseObj.message.text; component.setState({status: 'updated'}); }); }, render: function() { console.log('rendering MainPage'); return ( <div>{displayText}</div> ); } }); module.exports = MainPage; The status State variable is Still initialised as before
  • 49. Copyright © 2016 M/Gateway Developments Ltd "use strict" var React = require('react'); var displayText = ''; var MainPage = React.createClass({ getInitialState: function() { return { status: 'initial', } }, componentWillMount: function() { this.props.controller.log = true; var message = { type: 'testMessage', params: { foo: 'bar' } }; var component = this; this.props.controller.send(message, function(responseObj) { displayText = responseObj.message.text; component.setState({status: 'updated'}); }); }, render: function() { console.log('rendering MainPage'); return ( <div>{displayText}</div> ); } }); module.exports = MainPage; The response handler now resets the value of the displayText variable to the received response text
  • 50. Copyright © 2016 M/Gateway Developments Ltd "use strict" var React = require('react'); var displayText = ''; var MainPage = React.createClass({ getInitialState: function() { return { status: 'initial', } }, componentWillMount: function() { this.props.controller.log = true; var message = { type: 'testMessage', params: { foo: 'bar' } }; var component = this; this.props.controller.send(message, function(responseObj) { displayText = responseObj.message.text; component.setState({status: 'updated'}); }); }, render: function() { console.log('rendering MainPage'); return ( <div>{displayText}</div> ); } }); module.exports = MainPage; And then changes the status state variable to some other arbitrary value
  • 51. Copyright © 2016 M/Gateway Developments Ltd "use strict" var React = require('react'); var displayText = ''; var MainPage = React.createClass({ getInitialState: function() { return { status: 'initial', } }, componentWillMount: function() { this.props.controller.log = true; var message = { type: 'testMessage', params: { foo: 'bar' } }; var component = this; this.props.controller.send(message, function(responseObj) { displayText = responseObj.message.text; component.setState({status: 'updated'}); }); }, render: function() { console.log('rendering MainPage'); return ( <div>{displayText}</div> ); } }); module.exports = MainPage; The state variable is now just being used as a trigger to force a re-render of the MainPage component
  • 52. Copyright © 2016 M/Gateway Developments Ltd "use strict" var React = require('react'); var displayText = ''; var MainPage = React.createClass({ getInitialState: function() { return { status: 'initial', } }, componentWillMount: function() { this.props.controller.log = true; var message = { type: 'testMessage', params: { foo: 'bar' } }; var component = this; this.props.controller.send(message, function(responseObj) { displayText = responseObj.message.text; component.setState({status: 'updated'}); }); }, render: function() { console.log('rendering MainPage'); return ( <div>{displayText}</div> ); } }); module.exports = MainPage; On the 1st render, displayText is an empty string so nothing appears in the browser
  • 53. Copyright © 2016 M/Gateway Developments Ltd "use strict" var React = require('react'); var displayText = ''; var MainPage = React.createClass({ getInitialState: function() { return { status: 'initial', } }, componentWillMount: function() { this.props.controller.log = true; var message = { type: 'testMessage', params: { foo: 'bar' } }; var component = this; this.props.controller.send(message, function(responseObj) { displayText = responseObj.message.text; component.setState({status: 'updated'}); }); }, render: function() { console.log('rendering MainPage'); return ( <div>{displayText}</div> ); } }); module.exports = MainPage; But on the 2nd render, displayText now contains the returned response
  • 54. Copyright © 2016 M/Gateway Developments Ltd Re-bundle and try it again It will run exactly the same as before
  • 55. Copyright © 2016 M/Gateway Developments Ltd Separation of Concerns • Currently they aren't separated – The dynamic behaviour and its associated controlling logic is all included in the MainPage component – MainPage should ideally just describe the View logic
  • 56. Copyright © 2016 M/Gateway Developments Ltd Separation of Concerns • Currently they aren't separated – The dynamic behaviour and its associated controlling logic is all included in the MainPage component – MainPage should ideally just describe the View logic • In the next part of this course we'll look at how we can separate things