can/demos/react-view-model/component.counter.html

MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

<script src="../../node_modules/steal/steal.js" dev-bundle main="@empty" id="demo-source">
import React from "react";
import ReactDOM from "react-dom";
import Component from "react-view-model/component";
import DefineMap from "can-define/map/map";

class AppComponent extends Component {
  render() {
    return React.createElement('div', {
      onClick: this.viewModel.increment.bind(this.viewModel)
    }, 'Count: ', this.viewModel.count, ' (Click Me)');
    // return (
    //   <div onClick={ this.viewModel.increment.bind(this.viewModel) }>
    //     Count: {this.viewModel.count} (Click Me)
    //   </div>
    // );
  }
}

AppComponent.ViewModel = DefineMap.extend("AppVM", {
  count: {
    type: "number",
    default: 0
  },
  increment: function() {
    return this.count++;
  },
});

var div = document.createElement("div");
document.body.appendChild(div);
ReactDOM.render(React.createElement(AppComponent), div);
// ReactDOM.render(<AppComponent />, div);
</script>