Skip to content

Instantly share code, notes, and snippets.

@lxynox

lxynox/index.html

Created February 28, 2017 00:19
Show Gist options
  • Save lxynox/e3d636234a219ef04ee0bb63ca0d98a0 to your computer and use it in GitHub Desktop.
Save lxynox/e3d636234a219ef04ee0bb63ca0d98a0 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/kupezi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<script src="https://fb.me/react-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
</head>
<body>
<section id='counter'>
<!-- vanilla
<button class='increment'>+</button>
<span>0</span>
<button class='decrement'>-</button>
-->
<!-- vue
<button @click='increment' class='increment'>+</button>
<span>{{ value }}</span>
<button @click='decrement' class='decrement'>-</button>
-->
</section>
<script id="jsbin-javascript">
'use strict'
const {Component} = React
const {render} = ReactDOM
const {querySelector} = document
const query = querySelector.bind(document)
function counter_vanilla() {
function attachListeners() {
const inc_btn = query('button.increment')
const dec_btn = query('button.decrement')
inc_btn.addEventListener('click', handler.increment)
dec_btn.addEventListener('click', handler.decrement)
}
let span = query('#counter span')
let value = parseInt(span.textContent)
let handler = {
increment: (e) => { span.textContent = ++value },
decrement: (e) => { span.textContent = --value }
}
attachListeners()
}
function counter_vue(){
new Vue({
el: '#counter',
data: {
value: 0
},
methods: {
increment: function(e) {
++this.value
},
decrement: function(e) {
--this.value
}
}
})
}
function counter_react() {
class Counter extends Component {
constructor(...props) {
super(...props)
this.state = { value: 0 }
this.increment = this.handleIncrement.bind(this)
this.decrement = this.handleDecrement.bind(this)
}
handleIncrement() {
this.setState({ value: this.state.value + 1 })
}
handleDecrement() {
this.setState({ value: this.state.value - 1})
}
render() {
const {value} = this.state
return (
React.createElement("div", null,
React.createElement("button", {onClick: this.increment}, "+"),
React.createElement("span", null, value ),
React.createElement("button", {onClick: this.decrement}, "-")
)
)
}
}
render(
React.createElement(Counter, null),
document.getElementById('counter')
)
}
// counter_vanilla()
// counter_vue()
// counter_react()
</script>
<script id="jsbin-source-javascript" type="text/javascript">'use strict'
const {Component} = React
const {render} = ReactDOM
const {querySelector} = document
const query = querySelector.bind(document)
function counter_vanilla() {
function attachListeners() {
const inc_btn = query('button.increment')
const dec_btn = query('button.decrement')
inc_btn.addEventListener('click', handler.increment)
dec_btn.addEventListener('click', handler.decrement)
}
let span = query('#counter span')
let value = parseInt(span.textContent)
let handler = {
increment: (e) => { span.textContent = ++value },
decrement: (e) => { span.textContent = --value }
}
attachListeners()
}
function counter_vue(){
new Vue({
el: '#counter',
data: {
value: 0
},
methods: {
increment: function(e) {
++this.value
},
decrement: function(e) {
--this.value
}
}
})
}
function counter_react() {
class Counter extends Component {
constructor(...props) {
super(...props)
this.state = { value: 0 }
this.increment = this.handleIncrement.bind(this)
this.decrement = this.handleDecrement.bind(this)
}
handleIncrement() {
this.setState({ value: this.state.value + 1 })
}
handleDecrement() {
this.setState({ value: this.state.value - 1})
}
render() {
const {value} = this.state
return (
<div>
<button onClick={this.increment}>+</button>
<span>{ value }</span>
<button onClick={this.decrement}>-</button>
</div>
)
}
}
render(
<Counter />,
document.getElementById('counter')
)
}
// counter_vanilla()
// counter_vue()
// counter_react()
</script></body>
</html>
Raw
jsbin.kupezi.js
'use strict'
const {Component} = React
const {render} = ReactDOM
const {querySelector} = document
const query = querySelector.bind(document)
function counter_vanilla() {
function attachListeners() {
const inc_btn = query('button.increment')
const dec_btn = query('button.decrement')
inc_btn.addEventListener('click', handler.increment)
dec_btn.addEventListener('click', handler.decrement)
}
let span = query('#counter span')
let value = parseInt(span.textContent)
let handler = {
increment: (e) => { span.textContent = ++value },
decrement: (e) => { span.textContent = --value }
}
attachListeners()
}
function counter_vue(){
new Vue({
el: '#counter',
data: {
value: 0
},
methods: {
increment: function(e) {
++this.value
},
decrement: function(e) {
--this.value
}
}
})
}
function counter_react() {
class Counter extends Component {
constructor(...props) {
super(...props)
this.state = { value: 0 }
this.increment = this.handleIncrement.bind(this)
this.decrement = this.handleDecrement.bind(this)
}
handleIncrement() {
this.setState({ value: this.state.value + 1 })
}
handleDecrement() {
this.setState({ value: this.state.value - 1})
}
render() {
const {value} = this.state
return (
React.createElement("div", null,
React.createElement("button", {onClick: this.increment}, "+"),
React.createElement("span", null, value ),
React.createElement("button", {onClick: this.decrement}, "-")
)
)
}
}
render(
React.createElement(Counter, null),
document.getElementById('counter')
)
}
// counter_vanilla()
// counter_vue()
// counter_react()
@lxynox
Copy link
Author

lxynox commented Feb 28, 2017

Vanilla, Vue, React style simple counter.

Compare directly how frameworks handle/enhance vanilla when applied in simple situations.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment