JSFiddle - React, Tailwind, and code Playground

by luodan

HTML

<script 
src="https://unpkg.com/foxview">
</script>

<div id="app-4">
</div>

JavaScript

const {render,html,Component,defineComponent} = FoxView
// 定义名为 counter 的计数器组件
class Counter extends Component{
  constructor(props){
    super(props);
    this.state = {
      count:props.initValue
    }
  }
  add(){
    this.setState({
      count:this.state.count + 1
    })
  }
  minus(){
    this.setState({
      count:this.state.count - 1
    })
  }
  render(){
    return html`<div>
      <button @click=${this.add}>add</button>
      <button @click=${this.minus}>minus</button>
      <div>
        result:${this.state.count}
      </div>
    </div>`
  }
}
defineComponent('counter', Counter)



render(
  html`<div>
    <counter initValue="${5}"></counter>
  </div>`,
  document.getElementById('app-4')
)