erspark2002/todo_app_ver2.html

## todo_app_ver2.html
<!DOCTYPE html>
<!--
NOTES:
  multiple components
  uses 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: 'aaa', id: count++}];
      let todoList;

      class Todo extends Component {
        render() {
          return (
            <div>
              <TodoItem todoList={todoList}/>
              <TodoList todos={todos} ref={el=>{todoList=el}}/>
            </div>
          );
        }
      };
      class TodoItem extends Component {
        render() {
          let input;
          return (
            <div>
              <input ref={el=>(input=el)}/>
              <button onClick={()=>{
                console.log('#input:', input.value);
                todos.push({
                  desc: input.value,
                  id: count++
                });
                console.log('#todos:', todos);
                todoList.forceUpdate();
              }}>Add</button>
            </div>
          );
        }
      }

      class TodoList extends Component {
        render() {
          console.log('--> TodoList todos:', todos);
          return (
            <ul>
              {todos.map(todo => (
                <li key={todo.id}>
                  {todo.desc}
                </li>
              ))}
            </ul>
          );
        }
      }

      ReactDOM.render(<Todo />, document.getElementById('app'));
      console.log('done');
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<!--
	NOTES:
	multiple components
	uses 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: 'aaa', id: count++}];
	let todoList;

	class Todo extends Component {
	render() {
	return (
	<div>
	<TodoItem todoList={todoList}/>
	<TodoList todos={todos} ref={el=>{todoList=el}}/>
	</div>
	);
	}
	};
	class TodoItem extends Component {
	render() {
	let input;
	return (
	<div>
	<input ref={el=>(input=el)}/>
	<button onClick={()=>{
	console.log('#input:', input.value);
	todos.push({
	desc: input.value,
	id: count++
	});
	console.log('#todos:', todos);
	todoList.forceUpdate();
	}}>Add</button>
	</div>
	);
	}
	}

	class TodoList extends Component {
	render() {
	console.log('--> TodoList todos:', todos);
	return (
	<ul>
	{todos.map(todo => (
	<li key={todo.id}>
	{todo.desc}
	</li>
	))}
	</ul>
	);
	}
	}

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