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

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

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

Here's our Main component
"use strict"
return (
<div>
We'll display the returned message here
</div>
);
}
});
Let's make it send a message
To QEWD and return
a response that we display

When and where to send a message?
We're currently just using the
component's render() function
"use strict"
return (
<div>
</div>
);
}
});

To send a message to QEWD,
we should use
a React life-cycle method
For example:
componentWillMount()
componentDidMount()
"use strict"
return (
<div>
</div>
);
}
});

we should use
For example:
Triggered before rendering
takes place
"use strict"
return (
<div>
</div>
);
}
});

we should use
For example:
componentDidMount()
Triggered after rendering
takes place
"use strict"
return (
<div>
</div>
);
}
});

we should use
For example:
Triggered before rendering
takes place
This would seem to be the
obvious one to use in our example
"use strict"
return (
<div>
</div>
);
}
});

"use strict"
module.exports = React.createClass({
componentWillMount: function() {
// do something before it renders
},
return (
<div>
</div>
);
}
});

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"
this.props.controller.send({
type: 'testMessage',
params: {
foo: 'bar'
}
});
},
return (
<div>
</div>
);
}
});

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

Try it
Nothing seems to have happened!

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

So it did send a message
• Nothing is showing in the browser
because logging isn't enabled
• Let's fix that….

Turn on logging
This is the equivalent of
EWD.log = true;
"use strict"
this.props.controller.log = true;
params: {
foo: 'bar'
}
});
},
return (
<div>
</div>
);
}
});

Re-bundle it
browserify -t [ babelify --compact false --presets [es2015 react] ] app.js > bundle.js

Try it
Now we can see that the message
was sent and a response
received

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

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

Try it again
Now it's working
But we're not displaying the
response in the page yet

Displaying the message
So how do we get the response
message to display here?
"use strict"
params: {
foo: 'bar'
}
});
},
return (
<div>
This is where we want to display the response message
</div>
);
}
});

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"}}

log:
rendering MainPage
We sent the message to the back-end

log:
rendering MainPage
But before the response was received

log:
rendering MainPage
The Main Page render() function ran

log:
rendering MainPage
The Main Page render() function ran
..and React gives us no way to
prevent that

Displaying the message
So how do we deal with this?
"use strict"
params: {
foo: 'bar'
}
});
},
return (
<div>
</div>
);
}
});

By using a state variable
Have a conditional render()
outcome dependent on the
value of a state variable
"use strict"
params: {
foo: 'bar'
}
});
},
return (
<div>
</div>
);
}
});

The state variable is initialised
with one value, causing
an initial rendering
"use strict"
params: {
foo: 'bar'
}
});
},
return (
<div>
Initial message....probably nothing at all
</div>
);
}
});

When the response is received
change the state variable value
and make the render()
function now display the
response message
"use strict"
params: {
foo: 'bar'
}
});
},
return (
<div>
Welcome! The value of foo was bar
</div>
);
}
});

Do the following…
"use strict"
getInitialState: function() {
return {
status: 'initial',
}
},
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

Do the following…
"use strict"
return {
status: 'initial',
}
},
var message = {
params: {
foo: 'bar'
}
};
this.props.controller.send(message, function(responseObj) {
// handle the returned response
});
},
Modify the message-
sending logic to include a
response handler

Do the following…
"use strict"
return {
status: 'initial',
}
},
var message = {
params: {
foo: 'bar'
}
};
var component = this;
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

Do the following…
"use strict"
return {
status: 'initial',
}
},
var message = {
params: {
foo: 'bar'
}
};
});
},
We need to ensure
the external value of
this is correctly available
within the callback's closure

That's the state variable working
• Now we need to make the component's
render() method conditional on its value…

Do the following…
..etc..
if (this.state.status === 'initial') {
return (
<div></div>
);
}
else {
return (
<div>{this.state.status}</div>
);
}
}
..etc
So it now renders an empty
div inititially

Do the following…
..etc..
return (
<div></div>
);
}
else {
return (
);
}
}
..etc
Then, when re-rendered,
it displays the value of
the state variable
which should now contain
the response text

Do the following…
..etc..
});
},
return (
<div></div>
);
}
else {
return (
);
}
}
..etc
Re-rendering occurs
automatically when the
state variable value is
changed within the
response handler's
callback function

Do the following…
..etc..
return (
<div></div>
);
}
else {
return (
);
}
}
..etc
Note how JSX variables are
specified within
curly braces

Try it again
The returned message
is now displayed in the page
You may briefly see "Please wait"
appearing during the registration
process

Try it again
Notice how MainPage
Is rendered twice
Once initially
then again when the
response is received

Which life-cycle method to use?
"use strict"
return {
status: 'initial',
}
},
var message = {
params: {
foo: 'bar'
}
};
});
},
We used componentWillMount()
which fires before our
MainPage component is
rendered.

Which life-cycle method to use?
"use strict"
return {
status: 'initial',
}
},
componentDidMount: function() {
var message = {
params: {
foo: 'bar'
}
};
});
},
We could have used
componentDidMount()
However this would have
slightly delayed
sending the
message to QEWD
until after the
initial render
was completed

Keep state variables for state only?

"use strict"
var displayText = '';
return {
status: 'initial',
}
},
var message = {
params: {
foo: 'bar'
}
};
displayText = responseObj.message.text;
component.setState({status: 'updated'});
});
},
return (
<div>{displayText}</div>
);
}
});

"use strict"
return {
status: 'initial',
}
},
var message = {
params: {
foo: 'bar'
}
};
});
},
return (
);
}
});
Use a simple variable
for the display text,
initially set to an empty
string

"use strict"
return {
status: 'initial',
}
},
var message = {
params: {
foo: 'bar'
}
};
});
},
return (
);
}
});
The render() method
is no longer
conditional, but
now simply
displays the value
of the displayText
variable

"use strict"
return {
status: 'initial',
}
},
var message = {
params: {
foo: 'bar'
}
};
});
},
return (
);
}
});
The status
State variable is
Still initialised as
before

"use strict"
return {
status: 'initial',
}
},
var message = {
params: {
foo: 'bar'
}
};
});
},
return (
);
}
});
The response
handler now
resets the value
of the displayText
variable to the
received response
text

"use strict"
return {
status: 'initial',
}
},
var message = {
params: {
foo: 'bar'
}
};
});
},
return (
);
}
});
And then changes
the status state
variable to some
other arbitrary value

"use strict"
return {
status: 'initial',
}
},
var message = {
params: {
foo: 'bar'
}
};
});
},
return (
);
}
});
The state variable
is now just being
used as a trigger
to force a
re-render of the
MainPage
component

"use strict"
return {
status: 'initial',
}
},
var message = {
params: {
foo: 'bar'
}
};
});
},
return (
);
}
});
On the 1st
render, displayText
is an empty
string so nothing
appears in the browser

"use strict"
return {
status: 'initial',
}
},
var message = {
params: {
foo: 'bar'
}
};
});
},
return (
);
}
});
But on the 2nd
render, displayText
now contains the
returned response

Re-bundle and try it again
It will run exactly
the same as before

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

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

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

More Related Content

What's hot

Viewers also liked

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

More from Rob Tweed

Recently uploaded

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