Make todo example shorter and not rely on the DOM.

_js/examples/todo.js

@@ -6,48 +6,38 @@ var TODO_COMPONENT = "\
 /** @jsx React.DOM */\n\
 var TodoList = React.createClass({\n\
   render: function() {\n\
-    var items = this.props.items.map(function(item) {\n\
-      return <li>{item}</li>;\n\
-    });\n\
-    return <ul>{items}</ul>;\n\
+    var createItem = function(itemText) {\n\
+      return <li>{itemText}</li>;\n\
+    };\n\
+    return <ul>{this.props.items.map(createItem)}</ul>;\n\
   }\n\
 });\n\
-\n\
-var TodoCreate = React.createClass({\n\
-  handleSubmit: React.autoBind(function() {\n\
-    var textInput = this.refs.textInput.getDOMNode();\n\
-    this.props.onCreate(textInput.value);\n\
-    textInput.value = '';\n\
-    return false;\n\
-  }),\n\
-  render: function() {\n\
-    return (\n\
-      <form onSubmit={this.handleSubmit}>\n\
-        <input type=\"text\" ref=\"textInput\" />\n\
-        <button>Add</button>\n\
-      </form>\n\
-    );\n\
-  }\n\
-});\n\
-\n\
 var TodoApp = React.createClass({\n\
   getInitialState: function() {\n\
-    return {items: []};\n\
+    return {items: [], text: ''};\n\
+  },\n\
+  onKey: function(e) {\n\
+    this.setState({text: e.target.value});\n\
+  },\n\
+  handleSubmit: function(e) {\n\
+    e.preventDefault();\n\
+    var nextItems = this.state.items.concat([this.state.text]);\n\
+    var nextText = '';\n\
+    this.setState({items: nextItems, text: nextText});\n\
   },\n\
-  onItemCreate: React.autoBind(function(value) {\n\
-    this.setState({items: this.state.items.concat([value])});\n\
-  }),\n\
   render: function() {\n\
     return (\n\
       <div>\n\
         <h3>TODO</h3>\n\
         <TodoList items={this.state.items} />\n\
-        <TodoCreate onCreate={this.onItemCreate} />\n\
+        <form onSubmit={this.handleSubmit.bind(this)}>\n\
+          <input onKeyUp={this.onKey.bind(this)} value={this.state.text} />\n\
+          <button>{'Add #' + (this.state.items.length + 1)}</button>\n\
+        </form>\n\
       </div>\n\
     );\n\
   }\n\
 });\n\
-\n\
 React.renderComponent(<TodoApp />, mountNode);\
 ";
 

index.md

@@ -56,10 +56,11 @@ id: home
     <div class="example">
       <h3>An Application</h3>
       <p>
-        Using properties and state, we can put together a small Todo
-        application. React provides an interface to the DOM via `refs`. Although
-        event handlers appear to be rendered inline, they will be
-        collected and implemented using event delegation.
+        Using `props` and `state`, we can put together a small Todo application.
+        This example uses `state` to track the current list of items as well as
+        the text that the user has entered. Although event handlers appear to be
+        rendered inline, they will be collected and implemented using event
+        delegation. 
       </p>
       <div id="todoExample"></div>
     </div>