react-flex

button.react.js

const block = require('react-flex/block');

module.exports = block('button')(
  tag() => 'button',
  attrs() => ({
    name: this.ctx.name,
    id: this.ctx.id
  }),
  onClick(e) => {
    console.log('shit!');
  },
  onComponentDidMount() => {
    console.log('component was mounted');
  }),
  content() => ({
    elem: 'text',
    content: this.ctx.text
  })
);

button__elem.react.js

const block = require('../button.react.js');

module.exports = block('button').elem('text')(
  tag() => 'span',
  onHover(e) => {
    console.log('text hovered!');
  },
  onComponentDidMount() => {
    console.log('elem text was mounted');
  },
  content() => `${this.applyNext()} and extend`
);

button_theme_wow.react.js

const block = require('../button.react.js');

module.exports = block('button').mod('theme', 'wow')(
  onClick(e) => {
    console.log('component with theme!');
    return this.applyNext();
  }
);

index.jsx

const Button = require('./button.react.js');
const React = require('./react');

React.render(<Button theme='wow' text='button text' />);