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

EWD 3 Training CoursePart 40

Building a React.js-based QEWD Application

(d) Using sub-components

Rob TweedDirector, 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:

controller = require('./MainPage-controller')(this.props.controller, this);},

return (// sub-component to handle the Title / banner// sub-component to handle the main display of content

);});module.exports = MainPage;

MainPage.js

Let's just take 2 for now tokeep it simple:

return (<Title /><Content />

MainPage.js

Let's just take 2 for now tokeep it simple:

"use strict"var React = require('react');var controller;var Title = require('./Title');var Content = require('./Content');var MainPage = React.createClass({

getInitialState: function() {return {

status: 'initial',}

},componentWillMount: function() {

return (<Title /><Content />

MainPage.js

These must beloaded as modules

status: 'initial',}

return (<Title

controller = {controller} /><Content

controller = {controller} />

MainPage.js

We need to pass thecontroller object into them:

status: 'initial',}

return (<Title

MainPage.js

The child componentsare now going to

do the work

The Main Page will nolonger have any

dynamic behaviour assuch, but we'll leave

the controller in place,but simplify it

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

status: 'initial',}

return (<Title

MainPage.js

We'll also leavethis state variable

in place

It might come inuseful later

"use strict"var React = require('react');var controller;var Title = require('./Title');var MainPage = React.createClass({

status: 'initial',}

return (<Title

MainPage.js

So let's createThe first

Sub-component:

<Title /> Componentvar React = require('react');var heading = 'My QEWD React Demo';var Title = React.createClass({

render: function() {return (<h2>{heading}</h2>

module.exports = Title;

This doesn't require thecontroller object for its

current behaviour

"use strict"var React = require('react');var controller;var Title = require('./Title');var MainPage = React.createClass({

status: 'initial',}

controller = require('./MainPage-controller')(this.props.controller, this);},render: function() {return (<Title

MainPage.js

But we'll still passin the controller

for now.

We might need itlater

If we did want to use it, itwould be referenced as

this.props.controller

Save as:

~/qewd/www/react-demo1/Title.js

Re-bundle and try it again

Now let's add the Content Component

status: 'initial',}

return (<Title

MainPage.js

Add the ContentComponent…

<Content /> Componentvar React = require('react');

var Content = React.createClass({

render: function() {return (<div>Content will go here...</div>

module.exports = Content;

We'll keep it very simple for now

No dynamic behaviour yet

<Content /> Componentvar React = require('react');

var Content = React.createClass({

render: function() {return (<div>Content will go here...</div>

module.exports = Content;

Save as:

C:\ewd3\www\react-demo1\Content.js

Re-bundle it

cd \ewd3\www\react-demo1

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

You'll get an error![es2015 react] ] app.js > bundle.jsSyntaxError: C:/ewd3-react/www/react-demo3/MainPage.js: Adjacent JSX elements must 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-react\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\location.js:22:13)

at Parser.pp.jsxParseElementAt (C:\ewd3-react\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\plugins\jsx\index.js:470:10)

You'll get an error![es2015 react] ] app.js > bundle.jsSyntaxError: C:/ewd3-react/www/react-demo3/MainPage.js: Adjacent JSX elements must 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-react\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\location.js:22:13)

at Parser.pp.jsxParseElementAt (C:\ewd3-react\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\plugins\jsx\index.js:470:10)

status: 'initial',}

return (<Title

Check in MainPage.js

What's inside the returnmust only be a single

parent JSX tag

status: 'initial',}

return (<Title

What's inside the returnmust only be a single

parent JSX tag

So we must put <Title>and <Content> inside

a parent tag

status: 'initial',}

return (<div>

<Titlecontroller = {controller}

/><Content

</div>);

}});module.exports = MainPage;

A <div> tag will do the job!

Now it should re-bundle OK

cd \ewd3\www\react-demo1

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

Try it again

And now we have ourtwo 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

Software

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

12º EWD Brasília

EWD 3 Training Course Part 43: Using JSON Web Tokens with QEWD REST Services

React.js – intro

React.js + Flux

React.js tw meetup #5

From Hack Days to Production The QEWD Health It Platformec2.mgateway.com/QEWD-HIT-Platform.pdf · 2019-06-28 · Copyright © 2016 M/Gateway Developments Ltd QEWD Platform • Open

Building websites using React.js and WordPress API€¦ · Bespoke everywhere! THE BEGINNING • Few tutorials about React.js and Redux • WordPress API. THE APPROACH • React.js

EWD 3 Training Course Part 5b: First Steps in Building a QEWD Application

Intoroduction to React.js

EWD 3トレーニング・コース #2 EWD 3 の概要

Understanding Facebook's React.js

React.JS Conf & F8

EWD 3 Training Course Part 29: Running QEWD as a Service

Mobprogramming on React.js

React.js+Redux Workshops

Spaßbahndekoder EWD 3xs (Version: Early2018 – 02.01.2018) Lötanleitung: EWD …sbdekoder.de/wp-content/uploads/2018/01/Loetanleitun… · · 2018-01-02Der EWD 3 ist durchaus

EWD Land Cruiser

EWD 3トレーニングコース#30 ewd-xpressアプリケーションをモジュラー化する

Intro to React.js

EWD 3 Training Course Part 42: The QEWD Docker Appliance

EWD 3トレーニング・コース　#2 EWD 3 の概要