React Class Template

react-class.jsx

/**
 * $CLASS_DESCRIPTION$
 *
 * @class           $CLASS_NAME$
 * @author          =undo= <[email protected]>
 * @date            $DATE_NOW$
 * @version         1.0.0
 */

var $CLASS_NAME$ = React.createClass( {


  /**
   * The render() method is required. When called, it should examine this.props and this.state and return a single
   * child element. This child element can be either a virtual representation of a native DOM component (such as <div />
   * or React.DOM.div()) or another composite component that you've defined yourself.
   *
   * You can also return null or false to indicate that you don't want anything rendered. Behind the scenes,
   * React renders a <noscript> tag to work with our current diffing algorithm. When returning null or false,
   * ReactDOM.findDOMNode(this) will return null.
   *
   * The render() function should be pure, meaning that it does not modify component state, it returns the same result
   * each time it's invoked, and it does not read from or write to the DOM or otherwise interact with the browser
   * (e.g., by using setTimeout). If you need to interact with the browser, perform your work in componentDidMount()
   * or the other lifecycle methods instead. Keeping render() pure makes server rendering more practical and makes
   * components easier to think about.
   */
  render : function()
  {
    return ( <span/> );
  },

  /**
   * Invoked once before the component is mounted. The return value will be used as the initial value of this.state.
   *
   * @returns {{}}
   */
  getInitialState : function()
  {
    return {};
  },

  /**
   * Invoked once and cached when the class is created. Values in the mapping will be set on this.props if that prop is
   * not specified by the parent component (i.e. using an in check).
   * This method is invoked before any instances are created and thus cannot rely on this.props.
   * In addition, be aware that any complex objects returned by getDefaultProps() will be shared across instances,
   * not copied.
   *
   * @returns {{}}
   */
  getDefaultProps : function()
  {
    return {};
  },

  /**
   * The propTypes object allows you to validate props being passed to your components.
   * For more information about propTypes, see https://facebook.github.io/react/docs/reusable-components.html
   */
  propTypes : {},

  /**
   * The mixins array allows you to use mixins to share behavior among multiple components.
   * For more information about mixins, see https://facebook.github.io/react/docs/reusable-components.html
   */
  mixins : [],

  /**
   * The statics object allows you to define static methods that can be called on the component class.
   *
   * @example
   *
   *    var MyComponent = React.createClass({
   *      statics: {
   *        customMethod: function(foo) {
   *          return foo === 'bar';
   *        }
   *      },
   *      render: function() {
   *      }
   *    });
   *
   *    MyComponent.customMethod('bar');  // true
   *
   *
   */
  statics : {},


  /**
   * The displayName string is used in debugging messages. JSX sets this value automatically; see JSX in Depth.
   */
  displayName : '$CLASS_NAME$',

  /*
   |--------------------------------------------------------------------------
   | Mounting
   |--------------------------------------------------------------------------
   |
   |
   */


  /**
   * Invoked once, both on the client and server, immediately before the initial rendering occurs.
   * If you call setState within this method, render() will see the updated state and will be executed only once despite
   * the state change.
   */
  componentWillMount : function()
  {
    //
  },

  /**
   * Invoked once, only on the client (not on the server), immediately after the initial rendering occurs.
   * At this point in the lifecycle, you can access any refs to your children (e.g., to access the underlying DOM
   * representation).
   *
   * The componentDidMount() method of child components is invoked before that of parent components.
   * If you want to integrate with other JavaScript frameworks, set timers using setTimeout or setInterval, or send AJAX
   * requests, perform those operations in this method.
   */
  componentDidMount : function()
  {
    //
  },

  /*
   |--------------------------------------------------------------------------
   | Updating
   |--------------------------------------------------------------------------
   |
   |
   */

  /**
   * Invoked when a component is receiving new props. This method is not called for the initial render.
   * Use this as an opportunity to react to a prop transition before render() is called by updating the state using
   * this.setState().
   * The old props can be accessed via this.props.
   * Calling this.setState() within this function will not trigger an additional render.
   */
  componentWillReceiveProps : function()
  {
    //
  },


  /**
   * Invoked before rendering when new props or state are being received.
   * This method is not called for the initial render or when forceUpdate is used. Use this as an opportunity to return
   * false when you're certain that the transition to the new props and state will not require a component update.
   *
  shouldComponentUpdate : function()
  {
    //
  },
  */

  /**
   * Invoked immediately before rendering when new props or state are being received.
   * This method is not called for the initial render.
   * Use this as an opportunity to perform preparation before an update occurs.
   *
   * @note
   * You cannot use this.setState() in this method. If you need to update state in response to a prop change, use
   * componentWillReceiveProps instead.
   */
  componentWillUpdate : function()
  {
    //
  },


  /**
   * Invoked immediately after the component's updates are flushed to the DOM.
   * This method is not called for the initial render.
   * Use this as an opportunity to operate on the DOM when the component has been updated.
   */
  componentDidUpdate : function()
  {
    //
  },

  /*
   |--------------------------------------------------------------------------
   | Unmounting
   |--------------------------------------------------------------------------
   |
   |
   */

  /**
   * Invoked immediately before a component is unmounted from the DOM.
   * Perform any necessary cleanup in this method, such as invalidating timers or cleaning up any DOM elements that were
   * created in componentDidMount.
   */
  componentWillUnmount : function()
  {
    //
  }

} );

// React.render( <$CLASS_NAME$ />, document.getElementById( 'content' ) );