How to use the react.createClass function in react

<li>Get the latest release for your system from
                            <a href="https://github.com/appbaseio/transporter/releases/tag/v0.1.2-appbase"> here <span></span></a>.</li>
                          <li>Set the source and sink configurations as mentioned
                          in the file here, and save it in the same folder as config.yml.</li>
                        <li>Run the transporter using ./transporter run --config &lt;config_file&gt; &lt;transform_file&gt;</li>
                        
                        <p>Or shoot us at info@appbase.io or intercom if you want us to help with importing data.</p>
                      
                    
                  );
    }
});

// Prettify the json body i.e. embed that into
// a code block so that highlightjs recognises it.
var Pretty = React.createClass({
    componentDidMount: function() {
        var current = React.findDOMNode(this);
        hljs.highlightBlock(current);
    },
    selectText: function() {
        var range = document.createRange();
        var selection = window.getSelection();
        var ele = document.getElementById('for-copy');
        range.selectNodeContents(ele);
        selection.removeAllRanges();
        selection.addRange(range);
    },
    render: function() {

        return (<pre>                    <code></code></pre>

var React     = require('react');
var classSet  = require('../utils/classSet');

var InputElement = React.createClass({
  render: function() {
    var item = this.props.item;
    var classes = classSet({
      "form--group": true,
      "has--error": item.hasError && !item.pristine
    });
    return (
      <div>
        <label>{item.label}</label>
        <input value="{item.value}" id="{item.id}" type="text">
        <span></span>
        <span>{item.errorMessage}</span>
      </div>
    );
  },
  _onChange: function(e) {

'use strict';

var React = require('react'),
    PubSub = require('../utils/PubSub');

module.exports = React.createClass({
  displayName: 'Highlighter',

  mixins: [PubSub],

  getInitialState: function getInitialState() {
    return {
      direction: 'to-right',
      styles: {
        display: 'none',
        left: '0px',
        right: '0px'
      },
      Highlighter: false
    };
  },

const React = require('react');
const Highcharts = require('highcharts');
const OptionsActions = require('../actions/options_actions');

const Highchart = React.createClass({

  componentDidMount() {

  },

  componentWillUpdate() {
    this.chart = new Highcharts[this.props.type || "Chart"](
      this.props.container,
      this.props.options
    );
  },

  render() {
    let klass = "chart"

    if (this.props.dashSeg) {

render() {
        const {item, size, onPress} = this.props;
        const {icon, index} = item;
        return (
            icon!=null ?
            
                <img style="{{width:size,">
                
            
            :

route(routes) {
    let context = { resolver: this };

    let ResolverContext = React.createClass({
      childContextTypes: mixin.contextTypes,

      getChildContext: function() {
        return context;
      },

      render: function() {
        return ;
      }
    });

    return (
      
        {routes}
      
    );

*/

const React = require("react");
const ArticleEditor = require("./article-editor.jsx");
const StatefulArticleEditor = require("./stateful-article-editor.jsx");
const Util = require("./util.js");

const defaultArticle = [
    {
        content: "",
        images: {},
        widgets: {},
    },
];

const ArticleDemo = React.createClass({
    propTypes: {
        content: React.PropTypes.any.isRequired,
    },

    getDefaultProps() {
        return {
            content: defaultArticle,
        };
    },

    getInitialState: function() {
        return {
            isMobile: navigator.userAgent.indexOf("Mobile") !== -1,
        };
    },

var author = TaskEventBase.getAuthor(props);
    var student = props.loggedInUserGuid == props.recipient.guid ? "you" : props.recipient.name;
    return author + ' excused ' + student;
}

var defaultState = React.createClass({
    displayName: 'ConfirmedStudentExcusedTaskEventDefault',
    render: taskEventWithOptionalMessage(text)
});

var deletedState = React.createClass({
    displayName: 'ConfirmedStudentExcusedTaskEventDeleted',
    render: taskEventWithOptionalMessageDeleted('deleted a confirmation of excuse.')
});

var editedState = React.createClass({
    displayName: 'ConfirmedStudentExcusedTaskEventEdited',
    render: taskEventWithOptionalMessageEdited(text)
});


module.exports = {};
module.exports[eventStates.default] = defaultState;
module.exports[eventStates.deleted] = deletedState;
module.exports[eventStates.edited] = editedState;

/*
 * Copyright (c) 2015, Joyent, Inc.
 */

/** @jsx React.DOM **/

var api = require('../../request');

var React = require('react');

var LinkAggregationForm = require('./form.jsx');
var LinkAggregationsList = require('./list.jsx');



var Component = React.createClass({
    propTypes: {
        server: React.PropTypes.string.isRequired,
        nics: React.PropTypes.array
    },
    getInitialState: function () {
        return {
            mode: 'list',
            linkAggregations: []
        };
    },
    componentWillMount: function () {
        this.refreshAggregations();
    },
    refreshAggregations: function () {
        api.get('/api/linkaggrs').query({belongs_to_uuid: this.props.server}).end(function (res) {
            this.setState({linkAggregations: res.body});

function createBadgeStyle(style) {
    return React.createClass({
        displayName: Badge.displayName + style,
        render: function() {
            return ;
        }
    });
}