can/demos/react-view-model/component.name.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", null, this.viewModel.name);
    // return (
    //   <div>{this.viewModel.name}</div>
    // );
  }
}

AppComponent.ViewModel = DefineMap.extend("AppVM", {
  first: {
    type: "string",
    default: "Christopher"
  },
  last: {
    type: "string",
    default: "Baker"
  },
  name: {
    get() {
      return this.first + " " + this.last;
    },
  },
});

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