erspark2002/todo_app_ver1.html

## todo_app_ver1.html
<!DOCTYPE html>
<!--
NOTES:
  single component
  usees refs
  no state
-->
<html>
  <head>
    <meta charset="utf-8">
      <script src="https://fb.me/react-with-addons-15.0.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.min.js"></script>
    <script src="https://fb.me/react-dom-0.14.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
    <title>React Template with CDN Resources - JSX</title>
  </head>
  <body>
    <div id="app"></div>

    <script type="text/babel">
      console.log('start');
      const Component = React.Component;

      let count = 0;
      let todos = [{desc: 'milk', id: count++}, {desc: 'eggs', id: count++}];
      let todoList;

      class Todo extends Component {
        addItem(description) {
          todos.push({
            desc: description,
            id: count++
          });
          this.forceUpdate();
        }

        render() {
          let input;
          return (
            <div>
              <input ref={el=>(input=el)}/>
              <button onClick={()=>this.addItem(input.value)}>Add</button>
              <ul ref={el=>{todoList=el}}>
                {todos.map(todo => (
                  <li key={todo.id}>
                    {todo.desc}
                  </li>
                ))}
              </ul>
            </div>
          );
        }
      };

      ReactDOM.render(<Todo />, document.getElementById('app'));
      console.log('done');
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<!--
	NOTES:
	single component
	usees refs
	no state
	-->
	<html>
	<head>
	<meta charset="utf-8">
	<script src="https://fb.me/react-with-addons-15.0.0.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.min.js"></script>
	<script src="https://fb.me/react-dom-0.14.0.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
	<title>React Template with CDN Resources - JSX</title>
	</head>
	<body>
	<div id="app"></div>

	<script type="text/babel">
	console.log('start');
	const Component = React.Component;

	let count = 0;
	let todos = [{desc: 'milk', id: count++}, {desc: 'eggs', id: count++}];
	let todoList;

	class Todo extends Component {
	addItem(description) {
	todos.push({
	desc: description,
	id: count++
	});
	this.forceUpdate();
	}

	render() {
	let input;
	return (
	<div>
	<input ref={el=>(input=el)}/>
	<button onClick={()=>this.addItem(input.value)}>Add</button>
	<ul ref={el=>{todoList=el}}>
	{todos.map(todo => (
	<li key={todo.id}>
	{todo.desc}
	</li>
	))}
	</ul>
	</div>
	);
	}
	};

	ReactDOM.render(<Todo />, document.getElementById('app'));
	console.log('done');
	</script>
	</body>
	</html>