Web Components
Custom Elements
<hello name="knightlab"></hello>
<div>Hello, Knight Lab</div>
Templates
<template id="knightlab" name="knightlab">
<div class="item">
<p>Hello {{name}}</p>
</div>
</template>
<div>
//include template code here//
</div>
Shadow Dom
HTML Imports
<link rel="import" href="myfile.html">
Polymer
Basic
<dom-module id="person-element">
<template>
<div>Hello, {{firstName}}</div>
</template>
<script>
Polymer({
is: "person-element",
properties: {
firstName: {
type: String,
value: 'Jane'
}
}
});
</script>
</dom-module><person-element></person-element>person.html
index.html
State
<dom-module id="person-element">
<template>
<div>Hello, {{firstName}}</div>
</template>
<script>
Polymer({
is: "person-element",
properties: {
firstName: {
type: String,
value: ''
}
},
created: function() {
this.firstName = 'Jane';
},
ready: function() {
}
});
</script>
</dom-module><person-element></person-element>person.html
index.html
Repeat Elements
<dom-module id="person-element">
<template is="dom-repeat" items={{people}} as={{person}}>
<template item={{person}}>
<div>Hello, {{person.firstName}}</div>
</template>
</template>
<script>
Polymer({
is: "person-element",
properties: {
people: {
type: Array,
value: [
{firstName: 'Henry'}, {firstName: 'Paul'}, {firstName: 'Jane'}
]
}
}
});
</script>
</dom-module><person-element></person-element>person.html
index.html
React
Basic
class Person extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}ReactDOM.render(<Person name="Jane" />, document.getElementbyId('root'))person.jsx
index.html
index.jsx
<html>
<body>
<div id="root"></div>
</body>
</html>State
class Person extends React.Component {
constructor(props) {
super(props);
this.state({
age = ''
})
}
componentDidMount() {
this.setState({
age = '23'
})
}
componentWillUnmount() {
console.log('unmount')
}
render() {
return <h1>Hello, I am {this.state.age}</h1>;
}
}ReactDOM.render(<Person name="Jane" />, document.getElementbyId('root'))person.jsx
index.html
index.jsx
<html>
<body>
<div id="root"></div>
</body>
</html>deck
By shortdiv
