babel + jsx + virtual-dom

README.md

nvm use 4

npm run build
node main.js

main.jsx

'use strict';

const h = require('virtual-dom/h');
const cx = require('classnames');
const html = require('vdom-to-html');

//

class Component {
  constructor (state) {
    this.state = Object.assign({}, this.state || {}, state);
  }
}

//

class Button extends Component {
  render () {
    const classNames = cx({
      'block__element': true,
      'block__element--active': this.state.active
    });

    return (<button className={classNames}>{this.state.value}</button>);
  }
}

//
const b = new Button({ value: 'Hello World', active: true });
console.log(html(b.render()));

package.json

{
  "name": "vdom-babel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel -o main.js main.jsx"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel": "^6.3.13",
    "babel-plugin-transform-react-jsx": "^6.3.13"
  },
  "dependencies": {
    "classnames": "^2.2.1",
    "vdom-to-html": "^2.2.0",
    "virtual-dom": "^2.1.1"
  }
}