SlideShare ist ein Scribd-Unternehmen logo
1 von 31
Downloaden Sie, um offline zu lesen
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
Copyright © 2016 M/Gateway Developments Ltd
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
Copyright © 2016 M/Gateway Developments Ltd
A More Typical Scenario
Main Page
Title / Banner Login Form Main Menu Content
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() {
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:
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);
},
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 to
keep it simple:
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() {
return (
<Title />
<Content />
);
}
});
module.exports = MainPage;
MainPage.js
Let's just take 2 for now to
keep it simple:
Copyright © 2016 M/Gateway Developments Ltd
"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() {
controller = require('./MainPage-controller')(this.props.controller, this);
},
render: function() {
return (
<Title />
<Content />
);
}
});
module.exports = MainPage;
MainPage.js
These must be
loaded as modules
Copyright © 2016 M/Gateway Developments Ltd
"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() {
controller = require('./MainPage-controller')(this.props.controller, this);
},
render: function() {
return (
<Title
controller = {controller}
/>
<Content
controller = {controller}
/>
);
}
});
module.exports = MainPage;
MainPage.js
We need to pass the
controller object into them:
Copyright © 2016 M/Gateway Developments Ltd
"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() {
controller = require('./MainPage-controller')(this.props.controller, this);
},
render: function() {
return (
<Title
controller = {controller}
/>
<Content
controller = {controller}
/>
);
}
});
module.exports = MainPage;
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
Copyright © 2016 M/Gateway Developments Ltd
MainPage-controller.js
module.exports = function (controller, component) {
controller.log = true;
return controller;
};
Copyright © 2016 M/Gateway Developments Ltd
"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() {
controller = require('./MainPage-controller')(this.props.controller, this);
},
render: function() {
return (
<Title
controller = {controller}
/>
<Content
controller = {controller}
/>
);
}
});
module.exports = MainPage;
MainPage.js
We'll also leave
this state variable
in place
It might come in
useful later
Copyright © 2016 M/Gateway Developments Ltd
"use strict"
var React = require('react');
var controller;
var Title = require('./Title');
var MainPage = React.createClass({
getInitialState: function() {
return {
status: 'initial',
}
},
componentWillMount: function() {
controller = require('./MainPage-controller')(this.props.controller, this);
},
render: function() {
return (
<Title
controller = {controller}
/>
);
}
});
module.exports = MainPage;
MainPage.js
So let's create
The first
Sub-component:
<Title />
Copyright © 2016 M/Gateway Developments Ltd
<Title /> Component
var React = require('react');
var heading = 'My QEWD React Demo';
var Title = React.createClass({
render: function() {
return (
<h2>
{heading}
</h2>
);
}
});
module.exports = Title;
Copyright © 2016 M/Gateway Developments Ltd
<Title /> Component
var 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 the
controller object for its
current behaviour
Copyright © 2016 M/Gateway Developments Ltd
"use strict"
var React = require('react');
var controller;
var Title = require('./Title');
var MainPage = React.createClass({
getInitialState: function() {
return {
status: 'initial',
}
},
componentWillMount: function() {
controller = require('./MainPage-controller')(this.props.controller, this);
},
render: function() {
return (
<Title
controller = {controller}
/>
);
}
});
module.exports = MainPage;
MainPage.js
But we'll still pass
in the controller
for now.
We might need it
later
Copyright © 2016 M/Gateway Developments Ltd
<Title /> Component
var React = require('react');
var heading = 'My QEWD React Demo';
var Title = React.createClass({
render: function() {
return (
<h2>
{heading}
</h2>
);
}
});
module.exports = Title;
If we did want to use it, it
would be referenced as
this.props.controller
Copyright © 2016 M/Gateway Developments Ltd
<Title /> Component
var React = require('react');
var heading = 'My QEWD React Demo';
var Title = React.createClass({
render: function() {
return (
<h2>
{heading}
</h2>
);
}
});
module.exports = Title;
Save as:
~/qewd/www/react-demo1/Title.js
Copyright © 2016 M/Gateway Developments Ltd
Re-bundle and try it again
Copyright © 2016 M/Gateway Developments Ltd
Now let's add the Content Component
Copyright © 2016 M/Gateway Developments Ltd
"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() {
controller = require('./MainPage-controller')(this.props.controller, this);
},
render: function() {
return (
<Title
controller = {controller}
/>
<Content
controller = {controller}
/>
);
}
});
module.exports = MainPage;
MainPage.js
Add the Content
Component…
Copyright © 2016 M/Gateway Developments Ltd
<Content /> Component
var 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
Copyright © 2016 M/Gateway Developments Ltd
<Content /> Component
var React = require('react');
var Content = React.createClass({
render: function() {
return (
<div>
Content will go here...
</div>
);
}
});
module.exports = Content;
Save as:
C:ewd3wwwreact-demo1Content.js
Copyright © 2016 M/Gateway Developments Ltd
Re-bundle it
cd ewd3wwwreact-demo1
browserify -t [ babelify --compact false --presets [es2015 react] ] app.js > bundle.js
Copyright © 2016 M/Gateway Developments Ltd
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)
Copyright © 2016 M/Gateway Developments Ltd
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)
Copyright © 2016 M/Gateway Developments Ltd
"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() {
controller = require('./MainPage-controller')(this.props.controller, this);
},
render: function() {
return (
<Title
controller = {controller}
/>
<Content
controller = {controller}
/>
);
}
});
module.exports = MainPage;
Check in MainPage.js
What's inside the return
must only be a single
parent JSX tag
Copyright © 2016 M/Gateway Developments Ltd
"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() {
controller = require('./MainPage-controller')(this.props.controller, this);
},
render: function() {
return (
<Title
controller = {controller}
/>
<Content
controller = {controller}
/>
);
}
});
module.exports = MainPage;
Check in MainPage.js
What's inside the return
must only be a single
parent JSX tag
So we must put <Title>
and <Content> inside
a parent tag
Copyright © 2016 M/Gateway Developments Ltd
"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() {
controller = require('./MainPage-controller')(this.props.controller, this);
},
render: function() {
return (
<div>
<Title
controller = {controller}
/>
<Content
controller = {controller}
/>
</div>
);
}
});
module.exports = MainPage;
Check in MainPage.js
A <div> tag will do the job!
Copyright © 2016 M/Gateway Developments Ltd
Now it should re-bundle OK
cd ewd3wwwreact-demo1
browserify -t [ babelify --compact false --presets [es2015 react] ] app.js > bundle.js
Copyright © 2016 M/Gateway Developments Ltd
Try it again
And now we have our
two components working
properly
Copyright © 2016 M/Gateway Developments Ltd
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

Weitere ähnliche Inhalte

Was ist angesagt?

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 ApplicationRob 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
 
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 PatternRob Tweed
 
EWD 3 Training Course Part 11: Handling Errors in QEWD
EWD 3 Training Course Part 11: Handling Errors in QEWDEWD 3 Training Course Part 11: Handling Errors in QEWD
EWD 3 Training Course Part 11: Handling Errors in QEWDRob 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 QEWDRob 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 ApplicationsRob Tweed
 
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 ServicesRob 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 SessionRob 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 APIsRob 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 ServiceRob 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 AuthenticationRob 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 ControlRob 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 LockingRob Tweed
 
Micronaut For Single Page Apps
Micronaut For Single Page AppsMicronaut For Single Page Apps
Micronaut For Single Page AppsZachary Klein
 
Composable and streamable Play apps
Composable and streamable Play appsComposable and streamable Play apps
Composable and streamable Play appsYevgeniy Brikman
 
CodeIgniter PHP MVC Framework
CodeIgniter PHP MVC FrameworkCodeIgniter PHP MVC Framework
CodeIgniter PHP MVC FrameworkBo-Yi Wu
 
Node JS Express : Steps to Create Restful Web App
Node JS Express : Steps to Create Restful Web AppNode JS Express : Steps to Create Restful Web App
Node JS Express : Steps to Create Restful Web AppEdureka!
 
NodeJS : Communication and Round Robin Way
NodeJS : Communication and Round Robin WayNodeJS : Communication and Round Robin Way
NodeJS : Communication and Round Robin WayEdureka!
 

Was ist angesagt? (20)

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 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...
 
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 11: Handling Errors in QEWD
EWD 3 Training Course Part 11: Handling Errors in QEWDEWD 3 Training Course Part 11: Handling Errors in QEWD
EWD 3 Training Course Part 11: Handling Errors in QEWD
 
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 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 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 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 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 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 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 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
 
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
 
Micronaut For Single Page Apps
Micronaut For Single Page AppsMicronaut For Single Page Apps
Micronaut For Single Page Apps
 
Composable and streamable Play apps
Composable and streamable Play appsComposable and streamable Play apps
Composable and streamable Play apps
 
CodeIgniter PHP MVC Framework
CodeIgniter PHP MVC FrameworkCodeIgniter PHP MVC Framework
CodeIgniter PHP MVC Framework
 
Angular beans
Angular beansAngular beans
Angular beans
 
Node JS Express : Steps to Create Restful Web App
Node JS Express : Steps to Create Restful Web AppNode JS Express : Steps to Create Restful Web App
Node JS Express : Steps to Create Restful Web App
 
NodeJS : Communication and Round Robin Way
NodeJS : Communication and Round Robin WayNodeJS : Communication and Round Robin Way
NodeJS : Communication and Round Robin Way
 
Serverless Java on Kubernetes
Serverless Java on KubernetesServerless Java on Kubernetes
Serverless Java on Kubernetes
 

Andere mochten auch

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 ObjectsRob Tweed
 
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 IndexingRob 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 ServicesRob 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 QEWDRob Tweed
 
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 ObjectsRob Tweed
 
Mumps the Internet scale database
Mumps the Internet scale databaseMumps the Internet scale database
Mumps the Internet scale databasegeorge.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 StorageRob 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 NodesRob 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 CapabilitiesRob 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 ObjectsRob Tweed
 
EWD 3 Training Course Part 20: The DocumentNode Object
EWD 3 Training Course Part 20: The DocumentNode ObjectEWD 3 Training Course Part 20: The DocumentNode Object
EWD 3 Training Course Part 20: The DocumentNode ObjectRob 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/HTTPSRob 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 ModeRob 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 ApplianceRob 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 CORSRob Tweed
 

Andere mochten auch (15)

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 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
 
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 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 20: The DocumentNode Object
EWD 3 Training Course Part 20: The DocumentNode ObjectEWD 3 Training Course Part 20: The DocumentNode Object
EWD 3 Training Course Part 20: The DocumentNode Object
 
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 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 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
 

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

React & Redux for noobs
React & Redux for noobsReact & Redux for noobs
React & Redux for noobs[T]echdencias
 
Rest web service_with_spring_hateoas
Rest web service_with_spring_hateoasRest web service_with_spring_hateoas
Rest web service_with_spring_hateoasZeid Hassan
 
JSLab. Алексей Волков. "React на практике"
JSLab. Алексей Волков. "React на практике"JSLab. Алексей Волков. "React на практике"
JSLab. Алексей Волков. "React на практике"GeeksLab Odessa
 
JavaDo#09 Spring boot入門ハンズオン
JavaDo#09 Spring boot入門ハンズオンJavaDo#09 Spring boot入門ハンズオン
JavaDo#09 Spring boot入門ハンズオンharuki ueno
 
Integrating Wicket with Java EE 6
Integrating Wicket with Java EE 6Integrating Wicket with Java EE 6
Integrating Wicket with Java EE 6Michael Plöd
 
Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017Elyse Kolker Gordon
 
React Native Androidはなぜ動くのか
React Native Androidはなぜ動くのかReact Native Androidはなぜ動くのか
React Native Androidはなぜ動くのかYukiya Nakagawa
 
Apache Wicket Web Framework
Apache Wicket Web FrameworkApache Wicket Web Framework
Apache Wicket Web FrameworkLuther Baker
 
A full introductory guide to React
A full introductory guide to ReactA full introductory guide to React
A full introductory guide to ReactJean Carlo Emer
 
React for Re-use: Creating UI Components with Confluence Connect
React for Re-use: Creating UI Components with Confluence ConnectReact for Re-use: Creating UI Components with Confluence Connect
React for Re-use: Creating UI Components with Confluence ConnectAtlassian
 
20150516 modern web_conf_tw
20150516 modern web_conf_tw20150516 modern web_conf_tw
20150516 modern web_conf_twTse-Ching Ho
 
Building and deploying React applications
Building and deploying React applicationsBuilding and deploying React applications
Building and deploying React applicationsAstrails
 
Getting Started with React v16
Getting Started with React v16Getting Started with React v16
Getting Started with React v16Benny Neugebauer
 
Universal JS Applications with React
Universal JS Applications with ReactUniversal JS Applications with React
Universal JS Applications with ReactThanh Trần Trọng
 
Gutenberg sous le capot, modules réutilisables
Gutenberg sous le capot, modules réutilisablesGutenberg sous le capot, modules réutilisables
Gutenberg sous le capot, modules réutilisablesRiad Benguella
 
Patterns Are Good For Managers
Patterns Are Good For ManagersPatterns Are Good For Managers
Patterns Are Good For ManagersAgileThought
 

Ähnlich wie EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 4 (20)

React outbox
React outboxReact outbox
React outbox
 
Let's react - Meetup
Let's react - MeetupLet's react - Meetup
Let's react - Meetup
 
React lecture
React lectureReact lecture
React lecture
 
React & Redux for noobs
React & Redux for noobsReact & Redux for noobs
React & Redux for noobs
 
Rest web service_with_spring_hateoas
Rest web service_with_spring_hateoasRest web service_with_spring_hateoas
Rest web service_with_spring_hateoas
 
JSLab. Алексей Волков. "React на практике"
JSLab. Алексей Волков. "React на практике"JSLab. Алексей Волков. "React на практике"
JSLab. Алексей Волков. "React на практике"
 
JavaDo#09 Spring boot入門ハンズオン
JavaDo#09 Spring boot入門ハンズオンJavaDo#09 Spring boot入門ハンズオン
JavaDo#09 Spring boot入門ハンズオン
 
Integrating Wicket with Java EE 6
Integrating Wicket with Java EE 6Integrating Wicket with Java EE 6
Integrating Wicket with Java EE 6
 
Intro react js
Intro react jsIntro react js
Intro react js
 
Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017
 
React Native Androidはなぜ動くのか
React Native Androidはなぜ動くのかReact Native Androidはなぜ動くのか
React Native Androidはなぜ動くのか
 
Apache Wicket Web Framework
Apache Wicket Web FrameworkApache Wicket Web Framework
Apache Wicket Web Framework
 
A full introductory guide to React
A full introductory guide to ReactA full introductory guide to React
A full introductory guide to React
 
React for Re-use: Creating UI Components with Confluence Connect
React for Re-use: Creating UI Components with Confluence ConnectReact for Re-use: Creating UI Components with Confluence Connect
React for Re-use: Creating UI Components with Confluence Connect
 
20150516 modern web_conf_tw
20150516 modern web_conf_tw20150516 modern web_conf_tw
20150516 modern web_conf_tw
 
Building and deploying React applications
Building and deploying React applicationsBuilding and deploying React applications
Building and deploying React applications
 
Getting Started with React v16
Getting Started with React v16Getting Started with React v16
Getting Started with React v16
 
Universal JS Applications with React
Universal JS Applications with ReactUniversal JS Applications with React
Universal JS Applications with React
 
Gutenberg sous le capot, modules réutilisables
Gutenberg sous le capot, modules réutilisablesGutenberg sous le capot, modules réutilisables
Gutenberg sous le capot, modules réutilisables
 
Patterns Are Good For Managers
Patterns Are Good For ManagersPatterns Are Good For Managers
Patterns Are Good For Managers
 

Mehr von Rob Tweed

Data Persistence as a Language Feature
Data Persistence as a Language FeatureData Persistence as a Language Feature
Data Persistence as a Language FeatureRob 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 TooRob 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 FunctionalityRob 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.jsRob Tweed
 
QEWD.js, JSON Web Tokens & MicroServices
QEWD.js, JSON Web Tokens & MicroServicesQEWD.js, JSON Web Tokens & MicroServices
QEWD.js, JSON Web Tokens & MicroServicesRob 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 TooRob 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 ServicesRob 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 TierRob Tweed
 

Mehr von Rob Tweed (9)

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
 
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 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
 
QEWD.js, JSON Web Tokens & MicroServices
QEWD.js, JSON Web Tokens & MicroServicesQEWD.js, JSON Web Tokens & MicroServices
QEWD.js, JSON Web Tokens & MicroServices
 
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
 

Kürzlich hochgeladen

About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9Jürgen Gutsch
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmonyelliciumsolutionspun
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionsNirav Modi
 
Introduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntroduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntelliSource Technologies
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyRaymond Okyere-Forson
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorShane Coughlan
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesSoftwareMill
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfTobias Schneck
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadIvo Andreev
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024Mind IT Systems
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfBrain Inventory
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesShyamsundar Das
 
Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Neo4j
 
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example ProjectMastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example Projectwajrcs
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeNeo4j
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdfMeon Technology
 
20240330_고급진 코드를 위한 exception 다루기
20240330_고급진 코드를 위한 exception 다루기20240330_고급진 코드를 위한 exception 다루기
20240330_고급진 코드를 위한 exception 다루기Chiwon Song
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampVICTOR MAESTRE RAMIREZ
 

Kürzlich hochgeladen (20)

About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspections
 
Introduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntroduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptx
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human Beauty
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in Trivandrum
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS Calculator
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retries
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and Bad
 
Sustainable Web Design - Claire Thornewill
Sustainable Web Design - Claire ThornewillSustainable Web Design - Claire Thornewill
Sustainable Web Design - Claire Thornewill
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdf
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security Challenges
 
Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!
 
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example ProjectMastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG time
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdf
 
20240330_고급진 코드를 위한 exception 다루기
20240330_고급진 코드를 위한 exception 다루기20240330_고급진 코드를 위한 exception 다루기
20240330_고급진 코드를 위한 exception 다루기
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - Datacamp
 

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

  • 1. 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
  • 2. Copyright © 2016 M/Gateway Developments Ltd 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
  • 3. Copyright © 2016 M/Gateway Developments Ltd A More Typical Scenario Main Page Title / Banner Login Form Main Menu Content
  • 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() { 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:
  • 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); }, 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 to keep it simple:
  • 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() { return ( <Title /> <Content /> ); } }); module.exports = MainPage; MainPage.js Let's just take 2 for now to keep it simple:
  • 7. Copyright © 2016 M/Gateway Developments Ltd "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() { controller = require('./MainPage-controller')(this.props.controller, this); }, render: function() { return ( <Title /> <Content /> ); } }); module.exports = MainPage; MainPage.js These must be loaded as modules
  • 8. Copyright © 2016 M/Gateway Developments Ltd "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() { controller = require('./MainPage-controller')(this.props.controller, this); }, render: function() { return ( <Title controller = {controller} /> <Content controller = {controller} /> ); } }); module.exports = MainPage; MainPage.js We need to pass the controller object into them:
  • 9. Copyright © 2016 M/Gateway Developments Ltd "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() { controller = require('./MainPage-controller')(this.props.controller, this); }, render: function() { return ( <Title controller = {controller} /> <Content controller = {controller} /> ); } }); module.exports = MainPage; 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
  • 10. Copyright © 2016 M/Gateway Developments Ltd MainPage-controller.js module.exports = function (controller, component) { controller.log = true; return controller; };
  • 11. Copyright © 2016 M/Gateway Developments Ltd "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() { controller = require('./MainPage-controller')(this.props.controller, this); }, render: function() { return ( <Title controller = {controller} /> <Content controller = {controller} /> ); } }); module.exports = MainPage; MainPage.js We'll also leave this state variable in place It might come in useful later
  • 12. Copyright © 2016 M/Gateway Developments Ltd "use strict" var React = require('react'); var controller; var Title = require('./Title'); var MainPage = React.createClass({ getInitialState: function() { return { status: 'initial', } }, componentWillMount: function() { controller = require('./MainPage-controller')(this.props.controller, this); }, render: function() { return ( <Title controller = {controller} /> ); } }); module.exports = MainPage; MainPage.js So let's create The first Sub-component: <Title />
  • 13. Copyright © 2016 M/Gateway Developments Ltd <Title /> Component var React = require('react'); var heading = 'My QEWD React Demo'; var Title = React.createClass({ render: function() { return ( <h2> {heading} </h2> ); } }); module.exports = Title;
  • 14. Copyright © 2016 M/Gateway Developments Ltd <Title /> Component var 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 the controller object for its current behaviour
  • 15. Copyright © 2016 M/Gateway Developments Ltd "use strict" var React = require('react'); var controller; var Title = require('./Title'); var MainPage = React.createClass({ getInitialState: function() { return { status: 'initial', } }, componentWillMount: function() { controller = require('./MainPage-controller')(this.props.controller, this); }, render: function() { return ( <Title controller = {controller} /> ); } }); module.exports = MainPage; MainPage.js But we'll still pass in the controller for now. We might need it later
  • 16. Copyright © 2016 M/Gateway Developments Ltd <Title /> Component var React = require('react'); var heading = 'My QEWD React Demo'; var Title = React.createClass({ render: function() { return ( <h2> {heading} </h2> ); } }); module.exports = Title; If we did want to use it, it would be referenced as this.props.controller
  • 17. Copyright © 2016 M/Gateway Developments Ltd <Title /> Component var React = require('react'); var heading = 'My QEWD React Demo'; var Title = React.createClass({ render: function() { return ( <h2> {heading} </h2> ); } }); module.exports = Title; Save as: ~/qewd/www/react-demo1/Title.js
  • 18. Copyright © 2016 M/Gateway Developments Ltd Re-bundle and try it again
  • 19. Copyright © 2016 M/Gateway Developments Ltd Now let's add the Content Component
  • 20. Copyright © 2016 M/Gateway Developments Ltd "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() { controller = require('./MainPage-controller')(this.props.controller, this); }, render: function() { return ( <Title controller = {controller} /> <Content controller = {controller} /> ); } }); module.exports = MainPage; MainPage.js Add the Content Component…
  • 21. Copyright © 2016 M/Gateway Developments Ltd <Content /> Component var 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
  • 22. Copyright © 2016 M/Gateway Developments Ltd <Content /> Component var React = require('react'); var Content = React.createClass({ render: function() { return ( <div> Content will go here... </div> ); } }); module.exports = Content; Save as: C:ewd3wwwreact-demo1Content.js
  • 23. Copyright © 2016 M/Gateway Developments Ltd Re-bundle it cd ewd3wwwreact-demo1 browserify -t [ babelify --compact false --presets [es2015 react] ] app.js > bundle.js
  • 24. Copyright © 2016 M/Gateway Developments Ltd 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)
  • 25. Copyright © 2016 M/Gateway Developments Ltd 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)
  • 26. Copyright © 2016 M/Gateway Developments Ltd "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() { controller = require('./MainPage-controller')(this.props.controller, this); }, render: function() { return ( <Title controller = {controller} /> <Content controller = {controller} /> ); } }); module.exports = MainPage; Check in MainPage.js What's inside the return must only be a single parent JSX tag
  • 27. Copyright © 2016 M/Gateway Developments Ltd "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() { controller = require('./MainPage-controller')(this.props.controller, this); }, render: function() { return ( <Title controller = {controller} /> <Content controller = {controller} /> ); } }); module.exports = MainPage; Check in MainPage.js What's inside the return must only be a single parent JSX tag So we must put <Title> and <Content> inside a parent tag
  • 28. Copyright © 2016 M/Gateway Developments Ltd "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() { controller = require('./MainPage-controller')(this.props.controller, this); }, render: function() { return ( <div> <Title controller = {controller} /> <Content controller = {controller} /> </div> ); } }); module.exports = MainPage; Check in MainPage.js A <div> tag will do the job!
  • 29. Copyright © 2016 M/Gateway Developments Ltd Now it should re-bundle OK cd ewd3wwwreact-demo1 browserify -t [ babelify --compact false --presets [es2015 react] ] app.js > bundle.js
  • 30. Copyright © 2016 M/Gateway Developments Ltd Try it again And now we have our two components working properly
  • 31. Copyright © 2016 M/Gateway Developments Ltd 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