Welcome! This site has a bunch of small demos like this one, each with many implementations:
import {Component} from '@angular/core';
@Component({
selector: '#app',
template: `
<p>{{count}} bottles of beer on the wall</p>
<button (click)="more()">Buy more</button>
`
})
export class Clicker {
count = 3
more() {
this.count++
}
}
import angular from 'angular'
angular.module('clickerapp')
.component('clicker', {
template: `
<p>{{$ctrl.count}} bottles of beer on the wall</p>
<button ng-click="$ctrl.more()">Buy more</button>
`,
controller: class Clicker {
$onInit () {
this.count = 3
}
more () {
this.count = this.count + 1
}
}
})
const html = require('choo/html')
const model = {
state: { count: 3 },
reducers: {
buyMore: (state, data) => ({ count: state.count + 1 })
}
}
const view = (state, prev, send) => html`
<main>
<p>${state.count} bottles of beer on the wall</p>
<button onclick=${e => send('buyMore')}>Buy more</button>
</main>
`
module.exports = {model: model, view: view}
import {Block} from 'cyclow'
const Counter = () => Block({
events: {
init: () => count => 3,
click: () => count => count + 1
},
view: count => ({content: [
{content: `${count} bottles of beer on the wall`},
{tag: 'button', on: {click: ['click']}, content: 'Buy more'}
]})
})
export default Counter
import React from 'react'
class Clicker extends React.Component {
constructor () {
super()
this.state = {count: 3}
this.more = () => this.setState({count: this.state.count + 1})
}
render () {
return <div>
<p>{this.state.count} bottles of beer on the wall</p>
<button onClick={this.more}>Buy more</button>
</div>
}
}
export default Clicker
import Vue from 'vue'
Vue.component('clicker', {
template: `
<p>{{count}} bottles of beer on the wall</p>
<button v-on:click="more">Buy more</button>
`,
data: () => ({count: 3}),
methods: {
more () {
this.count++
}
}
})
This lets you compare frameworks and solutions. Sort of like TodoMVC but on a smaller and more accessible scale!