React component styles

component.examples.js.jsx

// *******************************************
// React Component w/ verbose rendering out-of-line
// *******************************************
var reactRenderCodeElseWhere = function() { 
  /* maybe do some calculations; smoke some chocolate cigarettes; */ 
  return React.DOM.div (
    //attributes
    {},
    //children
    [
      "some copy before an anchor ",
      React.DOM.a (
        //attributes
        {onClick:this.eventHandler},
        //children
        [this.props.title]
      )
    ]
  )
}

var Component = React.createClass({
  getDefaultProps: function() { return {
    title:"Click Here"
  }},
  eventHandler: function(e) {
    /* do stuff */
  },
  render: reactRenderCodeElseWhere,
  // or 
  render: function() {
    /* maybe do some calculations; smoke some chocolate cigarettes; */
    return reactRenderCodeElseWhere.apply(this,arguments);
  }
})

// *******************************************
// React Component w/ verbose rendering in-line
// *******************************************

var Component = React.createClass({
  getDefaultProps: function() { return {
    title:"Click Here"
  }},
  eventHandler: function(e) {
    /* do stuff */
  },
  render: function() { 
    /* maybe do some calculations; smoke some chocolate cigarettes; */ 
    return React.DOM.div (
      //attributes
      {},
      //children
      [
        "some copy before an anchor ",
        React.DOM.a (
          //attributes
          {onClick:this.eventHandler},
          //children
          [this.props.title]
        )
      ]
    )
  }
})

// *******************************************
// React Component w/ jsx rendering out-of-line
// *******************************************
var jsxRenderCodeElseWhere = function() { 
  /* maybe do some calculations; smoke some chocolate cigarettes; */ 
  return ( 
    <div>some copy before an anchor<a onClick={this.eventHandler}>{this.props.title}</a></div>
  )
}

var Component = React.createClass({
  getDefaultProps: function() { return {
    title:"Click Here"
  }},
  eventHandler: function(e) {
    /* do stuff */
  },
  render: jsxRenderCodeElseWhere
  // or 
  render: function() {
    /* maybe do some calculations; smoke some chocolate cigarettes; */
    return jsxRenderCodeElseWhere.apply(this,arguments);
  }
})


// *******************************************
// React Component w/ jsx rendering in-line
// *******************************************

var Component = React.createClass({
  getDefaultProps: function() { return {
    title:"Click Here"
  }},
  eventHandler: function(e) {
    /* do stuff */
  },
  render: function() { 
    /* maybe do some calculations; smoke some chocolate cigarettes; */ 
    return ( 
      <div>some copy before an anchor<a onClick={this.eventHandler}>{this.props.title}</a></div>
    )
  }
})