Web Technologies and Client/Server Computing
#04
Web Client
(HTM5, React.js)
CLIENT/SERVER COMPUTING AND WEB TECHNOLOGIES
1
Web Page Layers
2
Behavior
Presentation
Content
JavaScript
Cascading
Style Sheet
Hypertext
Markup Language
HTML
Hypertext: A software system that links topics on
the screen to related information and graphics,
which are typically accessed by a point-and-click
method.
Markup Language: A set of markup tags for
grouping and describing page content.
3
Document Object Model
<html>
<head> </head>
<body>
<h1></h1>
<div> ... </div>
</body>
</html>
4
Document
head
body
h1
div
child elements ...
Document Hierarchy: Parents, children and siblings
HTML Elements
An HTML element includes both the HTML tag and
everything between the tag (the content).
Tags normally come in pairs. The first tag is the start
tag, and the second tag is the end tag.
HTML has a defined set of tag names (also called
keywords) that the browser understands.
Most elements can have attributes, which provides
additional information about the element.
<div class=
"
left-nav
"
></div>
5
<tag>
Content
</tag>
Essential Element Tags
6
Primary
Structure
html
head
body
Head
Elements
title
meta
link
Structural
Elements
(block)
p
br
h1 – h6
ul
ol
a
img
(div)
Formatting
Elements
(inline)
em
i
strong
b
q
blockquote
(span)
CSS
Stylesheet
Rules defining how an html element will be
“presented” in the browser.
Targeted to specific elements in the html document.
Cascading
Rules for resolving conflicts with multiple CSS rules
applied to the same elements.
For example, if there are two rules defining the color
or your
h1
elements, the rule that comes last in the
cascade order will “trump” the other.
7
Browser CSS
Linked
CSS
Embedded
CSS
Inline
CSS
Importance
CSS Syntax
Every style is defined by a
selector
and a
declaration
. The declaration contains at least one
property/value pair.
Together they are called a
CSS Rule
.
body {font-family: Arial, Helvetica}p {color: #666666}h1 {font-size: 24px}a {color: blue}8
selector {property: value;} Declaration
CSS Selector
Type Selector
targets an html element by name
Id Selector
An ID is an html attribute added to a html markup.
Reference that ID with a hash (#)
#logo { declaration }
<img id="logo" src="" alt="">
Class Selector
A class is an html attribute added to a html markup.
Reference that ID with a period (.)
.ingredients {declaration}
<ul class=
"
ingredients
"
>
9
p
.
#
JavaScript
JavaScript as HTML element
<script type="text/javascript">
…
</script>
JavaScript as external resources
<script type="text/javascript"
src="e.js"
></script>
Purposes
Manipulate HTML DOM via document object
document.getElementById("logo")...
Handle Event from HTML element
<p onclick="do_smth()"> ... </p>
Implement application logics, e.g., form validations
10
Refer to Chapter #03
for syntaxes.
Libraries
CSS Framework
Heavyweights: Bootstrap, Foundation
Middleweights: Gummy, Groundwork
Lightweights: Pure, Base, Kube CSS
JavaScript Library
DOM manipulation, animation, events, HTTP
requests
jQuery, minified.js
Supports: underscore.js, moment.js
JavaScript Framework
jQuery, Dojo, Ember.js, AngularJS, ReactJS, VueJS
11
http://www.monolinea.com/css-frameworks-comparison/
http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
ReactJS
A JAVASCRIPT LIBRARY FOR BUILDING USER
INTERFACES
12
React features
JSX
JavaScript extension
Try it:
http://babeljs.io/repl
Components
Reusable, Maintainable, Testable
The virtual DOM
13
The virtual DOM
14
Reference:
https://stackoverflow.com/questions/21109361/why-is-reacts-concept-of-virtual-dom-said-to-be-
more-performant-than-dirty-mode
Setup
Softwares
node & npm
IDE: Web storm, VS Code, Atom, Sublime, vi
Quick start
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
Reference:
https://reactjs.org/tutorial/tutorial.html
15
React: Start from scratch
Prepare and create package.json:
npm init -y
Install global package:
npm install -g babel babel-cli
npm install -g webpack-dev-server
Add dependencies and plugins:
npm install webpack webpack-dev-server --save
npm install react react-dom --save
npm install babel-core babel-loader --save
npm install babel-preset-react babel-preset-es2015 --save
16
Reference:
https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm
Compiler, Server and Loaders
create webpack.config.js
var config = {entry: './src/index.js',
output: {path:'/',
filename: 'bundle.js',
},
devServer: {inline: true,
port: 8080
},
module: {loaders: [
{exclude: /node_modules/,
loader: 'babel-loader',
query: {presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
17
Compiler, Server and Loaders
edit package.json
"scripts": {"start": "webpack-dev-server --hot"
"test": "echo \"Error: no test specified\" && exit 1"
},
npm start
18
<!DOCTYPE html>
<html
lang
=
"en"
>
<head>
<meta
charset
=
"UTF-
8
"
>
<title>
React App
</title>
</head>
<body>
<div
id
=
"app"
></div>
<script
src
=
"index.js"
></script>
</body>
</html>
import
React
from
'react
’
;
class
App
extends
React
.
Component
{render
()
{return
(
<div>
Hello
World
!!!
</
div
>
);
}
}
export
default
App
;
import
React
from
'react'
;
import
ReactDOM
from
'react-dom'
;
import
App
from
'./
a
pp.jsx'
;
ReactDOM
.
render
(
<
App
/>,
document
.
getElementById
(
'app
'
)
)
;
index.html
app.jsx
main.js
Try to modify in
app.jsx and check
result at browser
Component based
19
import
React
from
'react'
;
class
App
extends
React
.
Component
{render
()
{return
(
<div>
<
Header
/>
<
Content
/>
</
div
>
);
}
}
class
Header
extends
React
.
Component
{render
()
{return
(
<div>
<h1>
Header
</
h1
>
</
div
>
);
}
}
class
Content
extends
React
.
Component
{render
()
{return
(
<div>
<h2>
Content
</
h2
>
<p>
The
content text
!!!</
p
>
</
div
>
);
}
}
export
default
App
;
In practical, Header
and Content should be
separately created
and exported.
Data passing (props vs. state)
React has 2 objects of data passing in order to
control data into a component
Props
Pass from parent to child components
Immutable
Props CANNOT
be
CHANGED
inside a component
Single source of the truth
Fixed throughout the component
State
Reside within component
Mutable
State
CAN
be
CHANGED
20
Props: pass to a component
21
import
React
,
{ Component } from
'react'
;
class
Foo
extends
Component {render
() {return
(
<div> <h1>
Foo:
{this
.
props
.
name
}
</h1></div>
)
}
}
class
App
extends
Component {render
() {return
(
<div>
<Foo
name
="FooName"
/>
</div>
)
;
}
}
export default
App
;
Define a new
property ‘name’
State: initial and update
22
class
App
extends
Component {constructor
(props){super
(props)
this
.
state
= { fooState
:
"Foo State"
}
}
render
() {return
(
<div>
Message: {this
.
state
.
fooState
}
<br/>
</div>
)
;
}
}
Initial state
object
Read state
object
State: bind method to context
23
class
App
extends
Component {constructor
(props){super
(props)
this
.
state
= { fooState
:
"Foo State"
}
this
.
updateMessage
=
this
.
updateMessage
.
bind
(
this
)
}
updateMessage
(e) {this
.
setState
( {fooState
:
"New Foo State: "
+ e.
target
.
value
})
}
render
() {return
(
<div>
<div>
Message:
<input
type
='text'
onChange
=
{this
.
updateMessage
}
/> <br/>
{this
.
state
.
fooState
}
<br/>
</div>
</div>
)
;
}
}
Have to bind
method to
‘App’ context,
otherwise a
new method
will not be
known
Trig the
method
Define the
method to
update
state
State: automatically bind
24
class
App
extends
Component {constructor
(props){super
(props)
this
.
state
= { fooState
:
"Foo State"
}
}
updateMessage
= (e) => {this
.
setState
( {fooState
:
"New Foo State: "
+ e.
target
.
value
})
}
render
() {return
(
<div>
<div>
Message:
<input
type
='text'
onChange
=
{this
.
updateMessage
}
/> <br/>
{this
.
state
.
fooState
}
<br/>
</div>
</div>
)
;
}
}
Arrow function binds a
method automatically
State:
Parent and child component
25
class
Foo
extends
Component {render
() {return
(
<div>
<h3>
Foo: {this
.
props
.
name
}
</h3>
{this
.
props
.
fooState
}
</div>
)
}
}
class
App
extends
Component {...
render
() {return
(
<div>
<div>
Message:
<input
type
='text'
onChange
=
{this
.
updateMessage
}
/> <br/>
{this
.
state
.
fooState
}
<br/>
</div>
<Foo
name
="FooName
"
fooState
=
{this
.
state
.
fooState
}
updateMessage
=
{this
.
updateMessage
.
bind
(
this
)}
/>
</div>
)
;
}
}
Update ‘state’ from
parent but it affects
to child component
Pass ‘state’ as ‘props’
Read ‘state’ as ‘props’
React – AJAX Request
PROMISES: AXIOS LIBRARY
26
HTTP Library: Axios
Target API:
https://api.github.com/users/wwarodom
Example: axios
npm install axios --save
27
import
React
,
{ Component } from
'react'
;
import
axios
from
'axios'
;
const
USER =
'wwarodom'
;
class
Profile
extends
Component {constructor
(props){super
(props)
this
.
state
= { data
:
{}}
}
componentDidMount
() {axios.
get
(
`https://api.github.com/users/
${USER}`
)
.
then
(response => {this
.
setState
({data
: response.
data
})
console
.
log
(response.
data
)
}
)
}
Send Http request
28
render
() {const
dataOption = Object.
keys
(
this
.
state
.
data
)
.
map
( (key
,
index) =>
<option
value
=
{index}>
{index+1
+
'. '
+key+
': '
+
this
.
state
.
data
[key]}
</option>
)
return
(
<div>
<h2>
Github Profile
</h2>
<ul>
<li>
{this
.
state
.
data
.
url
}
</li>
<li>
{this
.
state
.
data
.login}
</li>
<li>
{this
.
state
.
data
[
'blog'
]}
</li>
</ul>
<dd><select>
{dataOption}</select></dd>
</div>
)
;
}
}
export default
Profile
;
Read object
Pick a value
In this content, various aspects of web technologies, client/server computing, HTML elements, CSS rules, and essential element tags are discussed along with visual representations. Explore the fundamentals of HTML, CSS, JavaScript, and the Document Object Model (DOM).
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
1 #04 Web Client (HTM5, React.js) CLIENT/SERVER COMPUTING AND WEB TECHNOLOGIES
Web Page Layers 2 Behavior JavaScript Cascading Style Sheet Presentation Hypertext Markup Language Content
HTML 3 Hypertext: A software system that links topics on the screen to related information and graphics, which are typically accessed by a point-and-click method. Markup Language: A set of markup tags for grouping and describing page content.
Document Object Model 4 Document <html> <head> </head> <body> head body <h1></h1> <div> ... </div> h1 div </body> </html> child elements ... Document Hierarchy: Parents, children and siblings
HTML Elements 5 <tag>Content</tag> An HTML element includes both the HTML tag and everything between the tag (the content). Tags normally come in pairs. The first tag is the start tag, and the second tag is the end tag. HTML has a defined set of tag names (also called keywords) that the browser understands. Most elements can have attributes, which provides additional information about the element. <div class="left-nav"></div>
Essential Element Tags 6 Primary Structure html head body Structural Elements (block) Formatting Elements (inline) p br h1 h6 ul ol a img (div) em i strong b q blockquote (span) Head Elements title meta link
CSS 7 Stylesheet Rules defining how an html element will be presented in the browser. Targeted to specific elements in the html document. Cascading Rules for resolving conflicts with multiple CSS rules applied to the same elements. For example, if there are two rules defining the color or your h1 elements, the rule that comes last in the cascade order will trump the other. Linked CSS Embedded CSS Inline CSS Browser CSS Importance
CSS Syntax 8 selector {property: value;} Declaration Every style is defined by a selector and a declaration. The declaration contains at least one property/value pair. Together they are called a CSS Rule. body {font-family: Arial, Helvetica} p {color: #666666} h1 {font-size: 24px} a {color: blue}
CSS Selector 9 Type Selector p targets an html element by name Id Selector An ID is an html attribute added to a html markup. Reference that ID with a hash (#) #logo { declaration } # <img id="logo" src="" alt=""> Class Selector A class is an html attribute added to a html markup. Reference that ID with a period (.) .ingredients {declaration} . <ul class="ingredients">
JavaScript 10 JavaScript as HTML element <script type="text/javascript"> Refer to Chapter #03 for syntaxes. </script> JavaScript as external resources <script type="text/javascript" src="e.js"></script> Purposes Manipulate HTML DOM via document object document.getElementById("logo")... Handle Event from HTML element <p onclick="do_smth()"> ... </p> Implement application logics, e.g., form validations
Libraries 11 http://www.monolinea.com/css-frameworks-comparison/ CSS Framework Heavyweights: Bootstrap, Foundation Middleweights: Gummy, Groundwork Lightweights: Pure, Base, Kube CSS JavaScript Library DOM manipulation, animation, events, HTTP requests jQuery, minified.js Supports: underscore.js, moment.js JavaScript Framework jQuery, Dojo, Ember.js, AngularJS, ReactJS, VueJS http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
12 ReactJS A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
React features 13 JSX JavaScript extension Try it: http://babeljs.io/repl Components Reusable, Maintainable, Testable The virtual DOM
The virtual DOM 14 Reference: https://stackoverflow.com/questions/21109361/why-is-reacts-concept-of-virtual-dom-said-to-be- more-performant-than-dirty-mode
Setup 15 Softwares node & npm IDE: Web storm, VS Code, Atom, Sublime, vi Quick start npm install -g create-react-app create-react-app my-app cd my-app npm start Reference: https://reactjs.org/tutorial/tutorial.html
React: Start from scratch 16 Prepare and create package.json: npm init -y Install global package: npm install -g babel babel-cli npm install -g webpack-dev-server Add dependencies and plugins: npm install webpack webpack-dev-server --save npm install react react-dom --save npm install babel-core babel-loader --save npm install babel-preset-react babel-preset-es2015 --save Reference: https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm
Compiler, Server and Loaders 17 create webpack.config.js var config = { entry: './src/index.js', output: { path:'/', filename: 'bundle.js', }, devServer: { inline: true, port: 8080 }, module: { loaders: [ { exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } } ] } } module.exports = config;
Compiler, Server and Loaders 18 edit package.json "scripts": { "start": "webpack-dev-server --hot" "test": "echo \"Error: no test specified\" && exit 1" }, app.jsx main.js index.html importReactfrom'react'; importReactDOMfrom'react-dom'; importAppfrom'./app.jsx'; ReactDOM.render( <App/>, document.getElementById('app') ); importReactfrom'react ; <!DOCTYPE html> <htmllang="en"> <head> <metacharset="UTF-8"> <title>React App</title> </head> <body> <divid="app"></div> <scriptsrc="index.js"></script> </body> </html> classAppextendsReact.Component { render(){ return(<div>HelloWorld!!!</div>); } } exportdefaultApp; Try to modify in app.jsx and check result at browser npm start
Component based 19 importReactfrom'react'; class App extendsReact.Component { render(){ return( <div> <Header/> <Content/> </div> ); } } In practical, Header and Content should be separately created and exported. extendsReact.Component { class Header render(){ return( <div><h1>Header</h1> </div>); } } class Content extendsReact.Component { render(){ return( <div> <h2>Content</h2> <p>The content text!!!</p> </div> ); } } exportdefaultApp;
Data passing (props vs. state) 20 React has 2 objects of data passing in order to control data into a component Props Pass from parent to child components Immutable Props CANNOT be CHANGED inside a component Single source of the truth Fixed throughout the component State Reside within component Mutable State CAN be CHANGED
Props: pass to a component 21 import React, { Component } from 'react'; class Foo extends Component { render() { return ( <div> <h1> Foo: {this.props.name} </h1></div> ) } } class App extends Component { render() { return ( <div> <Foo name="FooName" /> </div> ); } } Define a new property name export default App;
State: initial and update 22 class App extends Component { constructor(props){ super(props) this.state = { fooState: "Foo State" } } Initial state object render() { return ( <div> Message: {this.state.fooState} <br/> </div> ); } } Read state object
State: bind method to context 23 class App extends Component { constructor(props){ super(props) this.state = { fooState: "Foo State" } this.updateMessage = this.updateMessage.bind(this) } Have to bind method to App context, otherwise a new method will not be known updateMessage(e) { this.setState( {fooState: "New Foo State: " + e.target.value }) } Define the method to update state render() { return ( <div> <div> Message: <input type='text' onChange={this.updateMessage}/> <br/> {this.state.fooState} <br/> </div> </div> ); } Trig the method }
State: automatically bind 24 class App extends Component { constructor(props){ super(props) this.state = { fooState: "Foo State" } } Arrow function binds a method automatically updateMessage = (e) => { this.setState( {fooState: "New Foo State: " + e.target.value }) } render() { return ( <div> <div> Message: <input type='text' onChange={this.updateMessage}/> <br/> {this.state.fooState} <br/> </div> </div> ); } }
State: Parent and child component 25 class Foo extends Component { render() { return ( <div> <h3> Foo: {this.props.name} </h3> {this.props.fooState} </div> Read state as props ) } } class App extends Component { ... Pass state as props render() { return ( <div> <div> Message: <input type='text' onChange={this.updateMessage}/> <br/> {this.state.fooState} <br/> </div> <Foo name="FooName" fooState={this.state.fooState} updateMessage={this.updateMessage.bind(this)} /> </div> Update state from parent but it affects to child component ); } }
26 React AJAX Request PROMISES: AXIOS LIBRARY
HTTP Library: Axios 27 Target API: https://api.github.com/users/wwarodom Example: axios npm install axios --save import React, { Component } from 'react'; import axios from 'axios'; const USER = 'wwarodom'; class Profile extends Component { constructor(props){ super(props) this.state = { data: {} } } Send Http request componentDidMount() { axios.get(`https://api.github.com/users/${USER}`) .then(response => { this.setState({data: response.data}) console.log(response.data) } ) }
28 Read object render() { const dataOption = Object.keys(this.state.data) .map( (key,index) => <option value={index}> {index+1 +'. ' +key+ ': ' + this.state.data[key]} </option> ) return ( <div> Pick a value <h2> Github Profile</h2> <ul> <li>{this.state.data.url}</li> <li>{this.state.data.login}</li> <li>{this.state.data['blog']}</li> </ul> <dd><select>{dataOption}</select></dd> </div> ); } } export default Profile;
