This document discusses separating concerns in React components. It provides an example of extracting the dynamic logic from a React component into a separate controller module. This keeps the component focused only on the view logic and renders. The controller module is required by the component and handles any asynchronous behavior or state updates. Separating these concerns improves modularity and makes the code easier to understand and maintain. The example transforms an existing component to use this pattern by moving the dynamic code into a new controller file and augmenting the main component with the controller's methods.

1. Copyright © 2016 M/Gateway Developments Ltd
EWD 3 Training Course
Part 39
Building a React.js-based
QEWD Application
(c) Separating Concerns
Rob Tweed
Director, M/Gateway Developments Ltd
Twitter: @rtweed

2. 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;

3. 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

4. Copyright © 2016 M/Gateway Developments Ltd
"use strict"
var React = require('react');
var controller;
var MainPage = React.createClass({
getInitialState: function() {
return {
status: 'initial',
}
},
componentWillMount: function() {
controller = require('./MainPage-controller')(this.props.controller, this);
},
render: function() {
console.log('rendering MainPage');
return (
<div>{this.displayText}</div>
);
}
});
module.exports = MainPage;
MainPage.js

5. Copyright © 2016 M/Gateway Developments Ltd
"use strict"
var React = require('react');
var controller;
var MainPage = React.createClass({
getInitialState: function() {
return {
status: 'initial',
}
},
componentWillMount: function() {
controller = require('./MainPage-controller')(this.props.controller, this);
},
render: function() {
console.log('rendering MainPage');
return (
<div>{this.displayText}</div>
);
}
});
module.exports = MainPage;
MainPage.js
Now describes only the
View for our component

6. Copyright © 2016 M/Gateway Developments Ltd
"use strict"
var React = require('react');
var controller;
var MainPage = React.createClass({
getInitialState: function() {
return {
status: 'initial',
}
},
componentWillMount: function() {
controller = require('./MainPage-controller')(this.props.controller, this);
},
render: function() {
console.log('rendering MainPage');
return (
<div>{ this.displayText }</div>
);
}
});
module.exports = MainPage;
MainPage.js
Now describes only the
View for our component
displayText is now a
property of this, not
a variable that has to
be instantiated in the
component itself

7. Copyright © 2016 M/Gateway Developments Ltd
"use strict"
var React = require('react');
var controller;
var MainPage = React.createClass({
getInitialState: function() {
return {
status: 'initial',
}
},
componentWillMount: function() {
controller = require('./MainPage-controller')(this.props.controller, this);
},
render: function() {
console.log('rendering MainPage');
return (
<div>{this.displayText}</div>
);
}
});
module.exports = MainPage;
MainPage.js
Now describes only the
View for our component
Dynamic behaviour is
now described in a
separate module that
we load into the MainPage
Component here

8. Copyright © 2016 M/Gateway Developments Ltd
"use strict"
var React = require('react');
var controller;
var MainPage = React.createClass({
getInitialState: function() {
return {
status: 'initial',
}
},
componentWillMount: function() {
controller = require('./MainPage-controller')(this.props.controller, this);
},
render: function() {
console.log('rendering MainPage');
return (
<div>{this.displayText}</div>
);
}
});
module.exports = MainPage;
MainPage.js
Now describes only the
View for our component
State is still the concern
of MainPage, but it's just
for triggering re-renders

9. Copyright © 2016 M/Gateway Developments Ltd
MainPage-controller.js
module.exports = function (controller, component) {
// describe the Component's dynamic behaviour
return controller;
};

10. Copyright © 2016 M/Gateway Developments Ltd
MainPage-controller.js
module.exports = function (controller, component) {
// describe the Component's dynamic behaviour
return controller;
};
Invoked by the parent component like this:
componentWillMount: function() {
controller = require('./MainPage-controller')(this.props.controller, this);
},

11. Copyright © 2016 M/Gateway Developments Ltd
MainPage-controller.js
module.exports = function (controller, component) {
// describe the Component's dynamic behaviour
return controller;
};
Invoked by the parent component like this:
componentWillMount: function() {
controller = require('./MainPage-controller')(this.props.controller, this);
},

12. Copyright © 2016 M/Gateway Developments Ltd
MainPage-controller.js
module.exports = function (controller, component) {
// describe the Component's dynamic behaviour
return controller;
};
Invoked by the parent component like this:
componentWillMount: function() {
controller = require('./MainPage-controller')(this.props.controller, this);
},

13. Copyright © 2016 M/Gateway Developments Ltd
MainPage-controller.js
module.exports = function (controller, component) {
// describe the Component's dynamic behaviour
return controller;
};
Invoked by the parent component like this:
componentWillMount: function() {
controller = require('./MainPage-controller')(this.props.controller, this);
},
New augmented instance

14. 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;
This was our original
Component's logic
We need to move the
code in red into the
Controller module

15. Copyright © 2016 M/Gateway Developments Ltd
MainPage-controller.js
module.exports = function (controller, component) {
component.displayText = '';
controller.log = true;
var message = {
type: 'testMessage',
params: {
foo: 'bar'
}
};
controller.send(message, function(responseObj) {
component.displayText = responseObj.message.text;
component.setState({status: 'updated'});
});
return controller;
};

16. Copyright © 2016 M/Gateway Developments Ltd
MainPage-controller.js
module.exports = function (controller, component) {
component.displayText = '';
controller.log = true;
var message = {
type: 'testMessage',
params: {
foo: 'bar'
}
};
controller.send(message, function(responseObj) {
component.displayText = responseObj.message.text;
component.setState({status: 'updated'});
});
return controller;
};
Initialising and changing
the value of
this.displayText in the
parent component

17. Copyright © 2016 M/Gateway Developments Ltd
MainPage-controller.js
module.exports = function (controller, component) {
component.displayText = '';
controller.log = true;
var message = {
type: 'testMessage',
params: {
foo: 'bar'
}
};
controller.send(message, function(responseObj) {
component.displayText = responseObj.message.text;
component.setState({status: 'updated'});
});
return controller;
};
Changing the parent
component's state
variable value to
trigger a re-render

18. Copyright © 2016 M/Gateway Developments Ltd
Re-bundle and try it again
It will run exactly
the same as before

19. Copyright © 2016 M/Gateway Developments Ltd
Pattern for Development
• The pattern we've created can be adopted for all of your
components and sub-components
• It cleanly separates the concerns:
– View: the parent component
– Dynamic behaviour: the controller module
• There are alternatives in the React world:
– Flux, Redux, etc
– These can also be used with QEWD
• Worth exploring when you're more familiar with the concepts
within React
• Let's use the simpler pattern described in this part of the
QEWD course for now