all-in-one.js

import {decl} from 'bem-react-core';
import ddsl from 'ddsl-react';

const bemhtml = ddsl(function() {
  block('omg')(
    tag()('span'),
    attrs()({ href : '//yandex.ru' })
  );
});

export default decl({
    block : 'omg',
    didMount() {
        console.log('mounted');
    },
    onClick(e) {
        console.log('clicked');
    },
    render() {
      return bemhtml.match({
        block : this.block,
        attrs : { 
          onClick : this.onClick.bind(this) 
        },
        text : this.props.text
      }, this);
    }
});
 

bemhtml.js

import { Component } from 'react';
import ddsl from 'ddsl-react';

const bemhtml = ddsl(function() {
  block('omg').tag()('span');
});

export default class OMG extends Component {

  render() {
    return bemhtml.match({
      block: 'omg',
      content: this.props.children
    }, this);
  }

}
 

block.js

import {decl} from 'bem-react-core';

export default decl({
    block : 'MyBlock',
    tag : 'a',
    mods({ disabled }) {
        return { disabled };
    },
    attrs() {
        return { href : '//yandex.ru' };
    },
    didMount() {
        console.log(`${this.block} is mounted`);
    }
});

elem.js

import {decl} from 'bem-react-core';

export default decl({
    block : 'TextInput',
    elem : 'Control',
    tag : 'input',

    didMount() {
        this.props.focused?
            this._focus() :
            this._blur();
    },

    didUpdate() {
        this.props.focused?
            this._focus() :
            this._blur();
    }
});

mod.js

import {declMod} from 'bem-react-core';

export default declMod(({ myMod }) => myMod, {
    block : 'MyBlock',
    mods({ myMod }) {
        return { ...this.__base.apply(this, arguments), myMod };
    },
    onClick() {
        this.__base.apply(this, arguments);
        console.log('with myMod');
    },
    didMount() {
        this.__base();
        console.log(`${this.block} with myMod is mounted`);
    }
});

root.js

import { Component } from 'react';
import ReactDom from 'react-dom';
import Button from 'b:Button m:type=link';
import Icon from 'b:Icon';

class App extends Component {

    render() { 
        const icon = <Icon url="https://yandex.st/lego/_/pDu9OWAQKB0s2J9IojKpiS_Eho.ico" />;
        return (
            <Button icon={icon} text="button with icon" />
        );
    }
  
}

ReactDom.render(<App/>, document.getElementById('root'));