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

Copyright © 2016 M/Gateway Developments Ltd
EWD 3 Training Course
Part 40
Building a React.js-based
QEWD Application
(d) Using sub-components
Rob Tweed
Director, M/Gateway Developments Ltd
Twitter: @rtweed

Still a very simple app
• Our demo doesn't do very much
• Just a single top-level component
– MainPage.js
• Plus its associated controller module
• React.js apps are usually a hierarchy of
components
– Let's start extending our demo

A More Typical Scenario
Main Page
Title / Banner Login Form Main Menu Content

"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() {
return (
// sub-component to handle the Title / banner
// sub-component to handle a log-in form
// sub-component to handle a main menu
// sub-component to handle the main display of content
);
}
});
module.exports = MainPage;
MainPage.js
How it would be implemented:

"use strict"
var controller;
return {
status: 'initial',
}
},
},
return (
// sub-component to handle the Title / banner
// sub-component to handle the main display of content
);
});
MainPage.js
Let's just take 2 for now to
keep it simple:

"use strict"
var controller;
return {
status: 'initial',
}
},
},
return (
<Title />
<Content />
);
}
});
MainPage.js
Let's just take 2 for now to
keep it simple:

"use strict"
var controller;
var Title = require('./Title');
var Content = require('./Content');
return {
status: 'initial',
}
},
},
return (
<Title />
<Content />
);
}
});
MainPage.js
These must be
loaded as modules

"use strict"
var controller;
return {
status: 'initial',
}
},
},
return (
<Title
controller = {controller}
/>
<Content
/>
);
}
});
MainPage.js
We need to pass the
controller object into them:

"use strict"
var controller;
return {
status: 'initial',
}
},
},
return (
<Title
/>
<Content
/>
);
}
});
MainPage.js
The child components
are now going to
do the work
The Main Page will no
longer have any
dynamic behaviour as
such, but we'll leave
the controller in place,
but simplify it

MainPage-controller.js
module.exports = function (controller, component) {
controller.log = true;
return controller;
};

"use strict"
var controller;
return {
status: 'initial',
}
},
},
return (
<Title
/>
<Content
/>
);
}
});
MainPage.js
We'll also leave
this state variable
in place
It might come in
useful later

"use strict"
var controller;
return {
status: 'initial',
}
},
},
return (
<Title
/>
);
}
});
MainPage.js
So let's create
The first
Sub-component:
<Title />

<Title /> Component
var heading = 'My QEWD React Demo';
var Title = React.createClass({
return (
<h2>
{heading}
</h2>
);
}
});
module.exports = Title;

<Title /> Component
return (
<h2>
{heading}
</h2>
);
}
});
This doesn't require the
controller object for its
current behaviour

"use strict"
var controller;
return {
status: 'initial',
}
},
},
return (
<Title
/>
);
}
});
MainPage.js
But we'll still pass
in the controller
for now.
We might need it
later

<Title /> Component
return (
<h2>
{heading}
</h2>
);
}
});
If we did want to use it, it
would be referenced as
this.props.controller

<Title /> Component
return (
<h2>
{heading}
</h2>
);
}
});
Save as:
~/qewd/www/react-demo1/Title.js

Re-bundle and try it again

Now let's add the Content Component

"use strict"
var controller;
return {
status: 'initial',
}
},
},
return (
<Title
/>
<Content
/>
);
}
});
MainPage.js
Add the Content
Component…

<Content /> Component
var Content = React.createClass({
return (
<div>
Content will go here...
</div>
);
}
});
module.exports = Content;
We'll keep it very simple for now
No dynamic behaviour yet

<Content /> Component
var Content = React.createClass({
return (
<div>
Content will go here...
</div>
);
}
});
module.exports = Content;
Save as:
C:ewd3wwwreact-demo1Content.js

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

You'll get an error!
[es2015 react] ] app.js > bundle.js
SyntaxError: C:/ewd3-react/www/react-demo3/MainPage.js: Adjacent JSX elements mu
st be wrapped in an enclosing tag (21:6)
19 | controller = {controller}
20 | />
> 21 | <Content
| ^
22 | controller = {controller}
23 | />
24 | );
at Parser.pp.raise (C:ewd3-reactnode_modulesbabelifynode_modulesbabel-c
orenode_modulesbabylonlibparserlocation.js:22:13)
at Parser.pp.jsxParseElementAt (C:ewd3-reactnode_modulesbabelifynode_mod
ulesbabel-corenode_modulesbabylonlibpluginsjsxindex.js:470:10)

"use strict"
var controller;
return {
status: 'initial',
}
},
},
return (
<Title
/>
<Content
/>
);
}
});
Check in MainPage.js
What's inside the return
must only be a single
parent JSX tag

"use strict"
var controller;
return {
status: 'initial',
}
},
},
return (
<Title
/>
<Content
/>
);
}
});
What's inside the return
must only be a single
parent JSX tag
So we must put <Title>
and <Content> inside
a parent tag

"use strict"
var controller;
return {
status: 'initial',
}
},
},
return (
<div>
<Title
/>
<Content
/>
</div>
);
}
});
A <div> tag will do the job!

Now it should re-bundle OK
cd ewd3wwwreact-demo1
browserify -t [ babelify --compact false --presets [es2015 react] ] app.js > bundle.js

Try it again
And now we have our
two components working
properly

Still just a simple app
• No dynamic behaviour
• Not using the QEWD back-end
• But we've now established the basic
patterns for React development with
QEWD
– The components we've created can be used
as convenient templates
• In the next part of the course, we'll add
some dynamic behaviour

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

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 4

More from Rob Tweed

Recently uploaded

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