Skip to content

Instantly share code, notes, and snippets.

@benzen
Created September 24, 2015 23:53
Show Gist options
  • Save benzen/3f79ebc59ba3a98f7386 to your computer and use it in GitHub Desktop.
Save benzen/3f79ebc59ba3a98f7386 to your computer and use it in GitHub Desktop.
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment