A convenience wrapper around React.createElement() to allow succinctly using React without using JSX

h.js

/* eslint no-param-reassign:0 */

import React from 'react';
import _ from 'lodash';

module.exports = h;

var classIdSplit = /([\.#]?[a-zA-Z0-9_:-]+)/;
var notClassId = /^\.|#/;

function h(tag_name, properties, children = []) {
    /**
    Wrapper for React.createElement() to simplify usage and remove boilerplate

    Usage:

        h('div', [h('h2', 'Hello')]);
        h('div#foo.bar.baz', [h('h2', 'Hello')]);
        h('div.bar.baz', [h('h2', 'Hello')]);
        h('div', {className: 'greeting'}, [h('h2', 'Hello')]);
    **/
    var tag, props;

    if (_.isEmpty(children) && (
            typeof properties === 'string' ||
            _.isArray(properties) ||
            React.isValidElement(properties)
        )) {
        children = properties;
        props = {};
    }

    props = props || properties || {};

    if (typeof tag_name === 'string') {
        tag = parseTag(tag_name, props);
    } else if (typeof tag_name === 'undefined') {
        throw new Error('tag_name argument cannot be undefined.');
    } else {
        tag = tag_name;
    }

    if (!_.isArray(children)) {
        children = [children];
    }

    return React.createElement(tag, props, ...children);
}

function parseTag(tag, props) {
    if (!tag) {
        return 'div';
    }

    var noId = !(props.hasOwnProperty('id'));

    var tagParts = tag.split(classIdSplit);
    var tagName = null;

    if (notClassId.test(tagParts[1])) {
        tagName = 'div';
    }

    var classes, part, type, i;

    for (i = 0; i < tagParts.length; i += 1) {
        part = tagParts[i];

        if (!part) {
            continue;
        }

        type = part.charAt(0);

        if (!tagName) {
            tagName = part;
        } else if (type === '.') {
            classes = classes || [];
            classes.push(part.substring(1, part.length));
        } else if (type === '#' && noId) {
            props.id = part.substring(1, part.length);
        }
    }

    if (classes) {
        if (props.className) {
            classes.push(props.className);
        }

        props.className = classes.join(' ');
    }

    return props.namespace ? tagName : tagName.toLowerCase();
}

Update: or use https://github.com/mlmorg/react-hyperscript instead!