NodeSchool's 'learnyoureact' ported to CodePen (based on 'Codepen React Boilerplate').
A Pen by Oliver Schafeld on CodePen.
NodeSchool's 'learnyoureact' ported to CodePen (based on 'Codepen React Boilerplate').
A Pen by Oliver Schafeld on CodePen.
/** @jsx React.DOM */ | |
var TodoBox = React.createClass({ | |
render: function(){ | |
return ( | |
<div className="todoBox"> | |
<h1>Todos</h1> | |
<TodoList /> | |
</div> | |
); | |
} | |
}); | |
var TodoList = React.createClass({ | |
render: function(){ | |
return ( | |
<div className="todoList"> | |
<table style={{border: "2px solid black"}}> | |
<tbody> | |
<Todo title="Shopping">Milk</Todo> | |
<Todo title="Hair cut">13:00</Todo> | |
</tbody> | |
</table> | |
</div> | |
); | |
} | |
}); | |
var Todo = React.createClass({ | |
render: function(){ | |
return ( | |
<tr> | |
<td style={{border: "1px solid black"}}>{this.props.title}</td> | |
<td style={{border: "1px solid black"}}>{this.props.children}</td> | |
</tr> | |
); | |
} | |
}); | |
React.renderComponent(<TodoBox name="Todo Box"/>, document.body); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="//codepen.io/chriscoyier/pen/yIgqi.js"></script> | |
<script src="//fb.me/react-0.11.1.js"></script> | |
<script src="//fb.me/JSXTransformer-0.11.0.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> |