Codepen React Boilerplate / WiP: ToDo List

codepen-react-boilerplate-wip-todo-list.markdown

Codepen React Boilerplate / WiP: ToDo List

NodeSchool's 'learnyoureact' ported to CodePen (based on 'Codepen React Boilerplate').

A Pen by Oliver Schafeld on CodePen.

License.

script.js

/** @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);

scripts

<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>