A React UI Renderer that will create DOM elements immediately instead of going through the react engine. Useful for testing Web Component style widgets.

faux-react-dom.js

(function (global) {

  var FauxElement = function (tagName) {
    this.id = "";
    this.tagName = tagName;
    this.attributes = {};
    this.children = [];
    this.lastChild = null;
    this.firstChild = null;
  };

  FauxElement.prototype._update = function () {
    if (this.children) {
      if (this.children.length > 0) {
        this.firstChild = this.children[0];
        if (this.children.length > 1) {
          this.lastChild = this.children[this.children.length - 1];
        } else {
          this.lastChild = this.firstChild;
        }
      }
    }
  };

  FauxElement.prototype.appendChild = function (childElement) {
    this.children.push(childElement);
    this._update();
  };

  FauxElement.prototype.removeChild = function (childElement) {
    var index = this.children.indexOf(childElement);
    this.children = this.children.splice(index, 1);
    this._update();
  };

  FauxElement.prototype.setAttribute = function (key, value) {
    this.attributes[key] = value;
  };

  var ReactDOMFactory = {};
  ReactDOMFactory.createElement = function (tagName) {
    return document.createElement(tagName);
  };
  ReactDOMFactory.createTextNode = function (text) {
    return document.createTextNode(text);
  };

  var React = {};

  React.renderToString = function (ele) {
    var renderer = ReactDOMFactory.createElement("div");
    renderer.appendChild(ele);
    var domString = renderer.innerHTML;
    try {
      renderer.innerHTML = "";
    } catch (e ){

    }
    return domString;
  };


  React.render = function (ele, target) {
    var dom;
    if (ele instanceof Element) {
      dom = ele;
    } else if (typeof ele === 'string') {
      dom = React.createElement (ele, null);
    } else {
      dom = React.createElement (ele, null);
    }

    while (target.lastChild) {
      target.removeChild (target.lastChild);
    }
    target.appendChild (dom);
  };

  React.createClass = function (props) {
    return function Classz () {
      for (var p in props) {
        if (props.hasOwnProperty (p)) {
          this[p] = props[p];
        }
      }
    };
  };

  //function functionName(fun) {
  //  var ret = fun.toString();
  //  ret = ret.substr('function '.length);
  //  ret = ret.substr(0, ret.indexOf('('));
  //  return ret;
  //}

  React.createElement = function (tagId, attrs) {
    var theDom = null, a;

    function setAttributes (domToSet, domAttrs) {
      for (a in domAttrs) {
        if (domAttrs.hasOwnProperty (a)) {
          domToSet.setAttribute (a, domAttrs[a]);
        }
      }
    }

    if (typeof tagId === 'string' || tagId instanceof String) {
      theDom = ReactDOMFactory.createElement (tagId);
      setAttributes (theDom, attrs);
    }
    else {
      var TagIdConstructor = tagId;
      var theInst = new TagIdConstructor ();
      theInst.props = {};
      theInst.props.children = [];
      for (a in attrs) {
        if (attrs.hasOwnProperty (a)) {
          theInst.props[a] = attrs[a];
        }
      }

      if (theInst.hasOwnProperty ("getInitialState")) {
        var initialState = theInst.getInitialState ();
        for (a in initialState) {
          if (initialState.hasOwnProperty (a)) {
            theInst.props[a] = initialState[a];
          }
        }
      }

      var theInstRendered = theInst.render ();

      if (theInstRendered instanceof Function) {
        theDom = theInstRendered (theInst.props);
      }
      else {
        theDom = theInstRendered;
      }
    }

    function addChild (children) {
      children = Array.isArray (children) ? children: [children];
      children.forEach(function (child) {
        if (child instanceof Element) {
          theDom.appendChild (child);
        } else if (child || typeof child === 'string') {
          theDom.appendChild (ReactDOMFactory.createTextNode (child.toString()));
        }
      });

      //var theChild = undefined;
      //if (child) {
      //  if (typeof child === 'string' || child instanceof String) {
      //
      //  }
      //  else if (child.constructor == Array) {
      //    for (var i = 0; i < child.length; i += 1) {
      //      theDom.appendChild (addChild(child[i]));
      //    }
      //  }
      //  else if (child instanceof Element) {
      //    theDom.appendChild (child);
      //  } else if (child || typeof child === 'string') {
      //    theChild = ReactDOMFactory.createTextNode (child.toString());
      //    theDom.appendChild (theChild);
      //  }
      //  if (theInst) {
      //    theInst.props.children.push (child);
      //  }
      //}
    }

    if (arguments.length >= 3) {
      for (var childIndex = 2; childIndex < arguments.length; childIndex += 1) {
        addChild (arguments[childIndex]);
      }
    }

    return theDom;
  };

  // For nodejs
  if (typeof module !== "undefined" && module && module.exports) {
    module.exports = React;

    // For consistency with CommonJS environments' exports
    module.exports.React = React;
  }

  // For CommonJS with exports, but without module.exports, like Rhino
  if (typeof exports !== "undefined" && exports) {
    exports.React = React;
  }

  if (typeof define === "function" && define.amd) {
    define (function () {
      return React;
    });
  }

  window.React = React;

} (( function () {
  return this;
} ())));