ReactでBEMなclassNameを書きやすくするBemmerというライブラリを作った

modifier_sample.less

.exButton {
  color: black;

  &--isOdd  { color: red; }
  &--isEven { color: blue; }
}

with_bemmer.es6

import React  from 'react';
import Bemmer from 'bemmer';

var ExButton = React.createClass({
  getInitialState() {
    return { count: 0 };
  },
  
  _onClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    var bemmer = new Bemmer('exButton', this.props.className);
    var isOdd = () => this.state.count % === 1;

    return (
      <a
        className={bemmer.mo('isOdd', isOdd()).mo('isEven', !isOdd()).out()}
        onClick={this._onClick}
      >
        push me!!
      </a>
    );
  },
});

without_bemmer.es6

import React from 'react/addons';

var ExButton = React.createClass({
  getInitialState() {
    return { count: 0 };
  },
  
  _onClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    var isOdd = () => this.state.count % === 1;
    var className = React.addons.classSet({
      'exButton':         true,
      'exButton--isOdd':  isOdd(),
      'exButton--isEven': !isOdd(),
    });
  
    return (
      <a
        className={className}
        onClick={this._onClick}
      >
        push me!!
      </a>
    );
  },
});