index.html

<script src="node_modules/babel/node_modules/babel-core/browser.js"></script>
<script src="react-0.13.3.js"></script>
<script type="text/babel">
  var comp = function(fun){
    return React.createClass({render:fun});
  }
  
  var DevCardTitle = DevCardTitle || comp(function(){
    const titleStyle = {
      backgroundColor: "rgb(239, 237, 237)",
      color: "#666",
      padding: "8px 15px"
    },
    title = this.props.value || "";
 
    if (!title) { return null; }
    
    return <div style={titleStyle}>
      {title}
    </div>;
    
  });

  var DevCardDoc = DevCardDoc || comp(function(){
    const doc = this.props.value || "";
    if (!doc) { return null; }
    return <div>
      {doc}
    </div>;
  });
  
  var DevCardBody = DevCardBody || comp(function(){
    const bodyStyle = {
            padding: "5px"
          };
    return <div style={bodyStyle}>
      <DevCardDoc value={this.props.doc}/>
      {this.props.children}
    </div>
    
  });

  var DevCard = DevCard || comp(function(){
    const cardStyle = {
            border: "1px solid rgb(231,234,242)",
            borderRadius: "3px"
          };
    return <div style={cardStyle}>
      <DevCardTitle value={this.props.title}/>
      <DevCardBody doc={this.props.doc}>
          {this.props.children}
      </DevCardBody>
      </div>;
  });

  var MyComponent = MyComponent || comp(function(){
    return <div>"MY ELM" {this.props.str}</div>
  });

  var MyDevCard = MyDevCard || comp(function(){
    return  <DevCard doc="This is an important card"
                     title="MyPersonal dev cards">
              <MyComponent str="eco"/>
            </DevCard>

  });

  React.render(
  <MyDevCard/>,
   document.getElementById('example'));
</script>
<div id="example"></div>