How to use the react-tools/build/modules/React.createClass function in react-tools

'use strict'

var React = require('react-tools/build/modules/React');

var statusForm = React.createClass({
  render: function(){
    return  <form role="form" class="form-horizontal">
              <div class="form-group">
                <label class="col-sm-4 control-label" for="brand-lead">Brand lead:</label>
                <div class="col-sm-8">
                  <input data-state="brandLead" id="brand-lead" type="text" placeholder="brand lead" class="form-control">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-4 control-label" for="status-text">Status:</label>
                <div class="col-sm-8"></div></div></form>

/**
 *
 * @jsx React.DOM
 *
 */

var React = require('react-tools/build/modules/React');

module.exports = React.createClass({

  onNavigate: function(e) {
    var href = e.target.attributes.href && e.target.attributes.href.value;
    if (href) {
      e.preventDefault();
      console.log('navigate to', href);
      window.history.navigate(href);
    }
  },

  render: function() {
    return (
      
        {this.props.children}
      
    );

});

var BlockWrapper = React.createClass({
  render: function() {
    var blockComponent = this.transferPropsTo(this.props.component()),
        className = "BlockWrapper" + (this.props.focus ? " Focused" : "");
    return (
      <div>
        {blockComponent}
        
      </div>
    );
  }
});

var Editor = React.createClass({
  mixins: [EditorAPI],

  blocks: {
    heading: Heading,
    listitem: ListItem,
    line: Line,
    paragraph: Paragraph,
    image: Image,
    code: Code
  },

  getInitialState: function() {
    return {focus: {}};
  },

  renderBlock: function(block, key) {

var React               = require('react-tools/build/modules/React'),
    Editor              = require('../editors/preformatted'),
    TextBlockMixin      = require('../text-block-mixin');

module.exports = React.createClass({
  mixins: [TextBlockMixin],
  editorComponent: Editor,

  render: function() {
    var className = "Block Code" + (this.props.focus ? " Focused" : "");
    return (
      <div>
        {this.renderEditor({preformatted: true})}
      </div>
    );
  }
});

var React               = require('react-tools/build/modules/React'),
    BlockMixin          = require('../block-mixin'),
    Focusable           = require('../focusable'),
    keys                = require('../keys');

var Line = React.createClass({
  mixins: [Focusable],
  render: function() {
    return this.transferPropsTo(React.DOM.div({tabIndex: "0"}, "***"));
  }
});

module.exports = React.createClass({
  mixins: [BlockMixin],

  render: function() {
    var className = "Block Line" + (this.props.focus ? " Focused" : "");
    return (
      <div>
        </div>
    );
  }
});

var s = getSelection(),
            r = s.getRangeAt(0);
        r.setEndAfter(this.refs.editable.getDOMNode().firstChild);
        contents = r.extractContents().firstChild.wholeText.trim();
        this.updateContent();
      } else {
        contents = '';
      }
      this.props.editor.insertAfter(this.props.block, contents);
      return true;
    }
    return false;
  }
}

var Paragraph = React.createClass({
  mixins: [BlockMixin],

  renderMarkdown: true,

  onKeyDown: function(e) {
    if (this.handleOnKeyDown(e)) {
      e.preventDefault();
    } else if (e.shiftKey && e.keyCode === KEY3 && getSelectionOffset() === 0) {
      this.changeBlock({type: 'heading', level: 1});
      e.preventDefault();
    } else if (e.keyCode === SPACE && getSelectionOffset() === 1 && this.props.block.content[0] === '*') {
      this.changeBlock({type: 'listitem', content: this.props.block.content.slice(1)});
      e.preventDefault();
    } else if (e.keyCode === BACKSPACE && getSelectionOffset() === 0) {
      this.props.editor.mergeWithPrevious(this.props.block);
      e.preventDefault();

var React               = require('react-tools/build/modules/React'),
    BlockMixin          = require('../block-mixin'),
    Focusable           = require('../focusable'),
    keys                = require('../keys');

var Line = React.createClass({
  mixins: [Focusable],
  render: function() {
    return this.transferPropsTo(React.DOM.div({tabIndex: "0"}, "***"));
  }
});

module.exports = React.createClass({
  mixins: [BlockMixin],

  render: function() {
    var className = "Block Line" + (this.props.focus ? " Focused" : "");
    return (
      <div>
        </div>

var React               = require('react-tools/build/modules/React'),
    assign              = require('lodash').assign,
    block               = require('../block'),
    Editor              = require('../editors/rich'),
    TextBlockMixin      = require('../text-block-mixin');

module.exports = React.createClass({
  mixins: [TextBlockMixin],
  editorComponent: Editor,

  tryUpgrade: function(content) {
    content = content.replace(/ /g, ' ');
    if (content.match(/^---$/)) {
      this.updateBlock({
        type: 'line'
      });
      return true;
    } else if (content.match(/^```/)) {
      this.updateBlock({
        type: 'code',
        content: content.slice(3),
        annotations: []
      });

onKeyDown: function(e) {
    if (this.handleOnKeyDown(e)) {
      e.preventDefault();
    } else if (e.keyCode === BACKSPACE && getSelectionOffset() === 0) {
      this.changeBlock({type: 'paragraph', level: undefined})
      e.preventDefault();
    }
  },

  render: function() {
    var className = "Block ListItem" + (this.props.focus ? " Focused" : "");
    return <div>{this.renderEditable()}</div>;
  }
});

var Heading = React.createClass({
  mixins: [BlockMixin],

  onKeyDown: function(e) {
    if (this.handleOnKeyDown(e)) {
      e.preventDefault();
    } else if (e.shiftKey &amp;&amp; e.keyCode === KEY3 &amp;&amp; getSelectionOffset() === 0) {
      if (this.props.block.level &lt; 6) {
        this.changeBlock({level: this.props.block.level + 1})
        e.preventDefault();
      }
    } else if (e.keyCode === BACKSPACE &amp;&amp; getSelectionOffset() === 0) {
      if (this.props.block.level === 1)
        this.changeBlock({type: 'paragraph', level: undefined})
      else
        this.changeBlock({level: this.props.block.level - 1});
      e.preventDefault();

require('./styles.styl');

var SiteGen = require('sitegen'),
    React   = require('react-tools/build/modules/React');

var Content = React.createClass({
  render: function() {
    return <article>
  }
});

var Boilerplate = React.createClass({
  siteName: 'ReactApp',

  heading: function() {
    return this.props.title
      ? <h1>{this.props.title}<a href="/">{'/' + this.siteName}</a></h1>
      : <h1>{this.siteName}</h1>;
  },

  title: function() {
    var text = this.props.title ? this.siteName + ': ' + this.props.title : this.siteName;
    return <title>{text}</title>;
  },

  render: function() {
    return (
      </article>