React.js 7

<script type="text/babel">
        (() => {

        const todos = [
            {id: 0, title: 'Task 0', isDone: false},
            {id: 1, title: 'Task 1', isDone: false},
            {id: 2, title: 'Task 2', isDone: true}
        ];

        function TodoItem(props){
            return (
                <li key={props.todo.id}>
                    <label>
                    <input type="checkbox"
                        checked={props.todo.isDone}
                        onChange={() => props.checkTodo(props.todo)}
                    />
                    <span className={props.todo.isDone ? 'done' : ''}>
                    {props.todo.title}
                    </span>
                    </label>
                </li>
            );
    }

        function TodoList(props){
            const todos = props.todos.map(todo => {
                return(
                    <TodoItem
                        key={todo.id}
                        todo={todo}
                        checkTodo={props.checkTodo}
                    />

                );
        });
            return (
                <ul>
                    {todos}
                </ul>
            );
    }


        class App extends React.Component {
            constructor(){
                super();
                this.state = {
                todos: todos
            };
            this.checkTodo = this.checkTodo.bind(this);
        }

        checkTodo(todo){
            const todos = this.state.todos.map(todo => {
            return {id: todo.id, title: todo.title, isDone: todo.isDone};
        });

        const pos = this.state.todos.map(todo=>{
            return todo.id;
    }).indexOf(todo.id);

    todos[pos].isDone = !todos[pos].isDone;
    this.setState({
        todos: todos
});
    }

            render(){
             return (
                <div>
                    <h1>My Todo</h1>
                    <TodoList
                    todos={this.state.todos}
                    checkTodo={this.checkTodo}
                     />
                </div>
             );
        }

    }
        ReactDOM.render(
            <App/>,
            document.getElementById('root')
        );
    })();
    </script>

<script type="text/babel">
        (() => {

        const todos = [
            {id: 0, title: 'Task 0', isDone: false},
            {id: 1, title: 'Task 1', isDone: false},
            {id: 2, title: 'Task 2', isDone: true}
        ];

        function TodoItem(props){
            return (
                <li key={props.todo.id}>
                    <label>
                    <input type="checkbox"
                        checked={props.todo.isDone}
                        onChange={() => props.checkTodo(props.todo)}
                    />
                    <span className={props.todo.isDone ? 'done' : ''}>
                    {props.todo.title}
                    </span>
                    </label>
                    <span className="cmd" onClick={() => props.deleteTodo(props.todo)}>[x]</span>
                </li>
            );
    }

        function TodoList(props){
            const todos = props.todos.map(todo => {
                return(
                    <TodoItem
                        key={todo.id}
                        todo={todo}
                        checkTodo={props.checkTodo}
                        deleteTodo={props.deleteTodo}
                    />

                );
        });
            return (
                <ul>
                    {todos}
                </ul>
            );
    }


        class App extends React.Component {
            constructor(){
                super();
                this.state = {
                todos: todos
            };
            this.checkTodo = this.checkTodo.bind(this);
            this.deleteTodo = this.deleteTodo.bind(this);
        }

        checkTodo(todo){
            const todos = this.state.todos.map(todo => {
            return {id: todo.id, title: todo.title, isDone: todo.isDone};
        });

        const pos = this.state.todos.map(todo=>{
            return todo.id;
    }).indexOf(todo.id);

    todos[pos].isDone = !todos[pos].isDone;
    this.setState({
        todos: todos
});
    }

            render(){
             return (
                <div className="container">
                    <h1>My Todo</h1>
                    <TodoList
                    todos={this.state.todos}
                    checkTodo={this.checkTodo}
                    deleteTodo={this.deleteTodo}
                     />
                </div>
             );
        }

    }
        ReactDOM.render(
            <App/>,
            document.getElementById('root')
        );
    })();
    </script>

function TodoList(props){
            const todos = props.todos.map(todo => {
                return(
                    <TodoItem
                        key={todo.id}
                        todo={todo}
                        checkTodo={props.checkTodo}
                        deleteTodo={props.deleteTodo}
                    />

                );
        });
            return (
                <ul>
                    {props.todos.length ? todos: <li>nothing to do</li>}
                </ul>
            );
    }


        class App extends React.Component {
            constructor(){
                super();
                this.state = {
                todos: todos
            };
            this.checkTodo = this.checkTodo.bind(this);
            this.deleteTodo = this.deleteTodo.bind(this);
        }

        deleteTodo(todo){
            if (!confirm('are you sure?')) {
                return;
        }

            const todos = this.state.todos.slice();
            const pos = this.state.todos.indexOf(todo);

            todos.splice(pos, 1);
            this.setState({
            todos: todos
        });
    }

function TodoItem(props){
            return (
                <li key={props.todo.id}>
                    <label>
                    <input type="checkbox"
                        checked={props.todo.isDone}
                        onChange={() => props.checkTodo(props.todo)}
                    />
                    <span className={props.todo.isDone ? 'done' : ''}>
                    {props.todo.title}
                    </span>
                    </label>
                    <span className="cmd" onClick={() => props.deleteTodo(props.todo)}>[x]</span>
                </li>
            );
    }

        function TodoList(props){
            const todos = props.todos.map(todo => {
                return(
                    <TodoItem
                        key={todo.id}
                        todo={todo}
                        checkTodo={props.checkTodo}
                        deleteTodo={props.deleteTodo}
                    />

                );
        });
            return (
                <ul>
                    {props.todos.length ? todos: <li>nothing to do</li>}
                </ul>
            );
    }
        function TodoForm(props){
            return (
                <form>
                        <input type="text" value={props.item} onChange={props.updateItem}/>
                        <input type="submit" value="Add"/>
                </form>
            );
    }


        class App extends React.Component {
            constructor(){
                super();
                this.state = {
                todos: todos,
                item: ''
            };
            this.checkTodo = this.checkTodo.bind(this);
            this.deleteTodo = this.deleteTodo.bind(this);
            this.updateItem = this.updateItem.bind(this);
        }

        deleteTodo(todo){
            if (!confirm('are you sure?')) {
                return;
        }

            const todos = this.state.todos.slice();
            const pos = this.state.todos.indexOf(todo);

            todos.splice(pos, 1);
            this.setState({
            todos: todos
        });
    }

        checkTodo(todo){
            const todos = this.state.todos.map(todo => {
            return {id: todo.id, title: todo.title, isDone: todo.isDone};
        });

        const pos = this.state.todos.map(todo=>{
            return todo.id;
    }).indexOf(todo.id);

    todos[pos].isDone = !todos[pos].isDone;
    this.setState({
        todos: todos
});
    }


            updateItem(e){
                this.setState({
                item: e.target.value
            })
        }

            render(){
             return (
                <div className="container">
                    <h1>My Todo</h1>
                    <TodoList
                    todos={this.state.todos}
                    checkTodo={this.checkTodo}
                    deleteTodo={this.deleteTodo}
                     />
                    <TodoForm
                        item={this.state.item}
                        updateItem={this.updateItem}
                    />
                </div>
             );
        }

    }

<script type="text/babel">
        (() => {

        const todos = [];

        function TodoItem(props){
            return (
                <li key={props.todo.id}>
                    <label>
                    <input type="checkbox"
                        checked={props.todo.isDone}
                        onChange={() => props.checkTodo(props.todo)}
                    />
                    <span className={props.todo.isDone ? 'done' : ''}>
                    {props.todo.title}
                    </span>
                    </label>
                    <span className="cmd" onClick={() => props.deleteTodo(props.todo)}>[x]</span>
                </li>
            );
    }

        function TodoList(props){
            const todos = props.todos.map(todo => {
                return(
                    <TodoItem
                        key={todo.id}
                        todo={todo}
                        checkTodo={props.checkTodo}
                        deleteTodo={props.deleteTodo}
                    />

                );
        });
            return (
                <ul>
                    {props.todos.length ? todos: <li>nothing to do</li>}
                </ul>
            );
    }
        function TodoForm(props){
            return (
                <form onSubmit={props.addTodo}>
                        <input type="text" value={props.item} onChange={props.updateItem}/>
                        <input type="submit" value="Add"/>
                </form>
            );
    }

        function getUniqueId(){
            return new Date().getTime().toString(36) + '-' + Math.random().toString(36);
    }


        class App extends React.Component {
            constructor(){
                super();
                this.state = {
                todos: todos,
                item: ''
            };
            this.checkTodo = this.checkTodo.bind(this);
            this.deleteTodo = this.deleteTodo.bind(this);
            this.updateItem = this.updateItem.bind(this);
            this.addTodo = this.addTodo.bind(this);
        }

        addTodo(e){
            e.preventDefault();

            if(this.state.item.trim()===''){
            return;
        }

            const item = {
                id: getUniqueId(),
                title: this.state.item,
                isDone: false
        };

        const todos = this.state.todos.slice();
        todos.push(item);
        this.setState({
            todos: todos,
            item: ''
    });
    }

        deleteTodo(todo){
            if (!confirm('are you sure?')) {
                return;
        }

            const todos = this.state.todos.slice();
            const pos = this.state.todos.indexOf(todo);

            todos.splice(pos, 1);
            this.setState({
            todos: todos
        });
    }

        checkTodo(todo){
            const todos = this.state.todos.map(todo => {
            return {id: todo.id, title: todo.title, isDone: todo.isDone};
        });

        const pos = this.state.todos.map(todo=>{
            return todo.id;
    }).indexOf(todo.id);

    todos[pos].isDone = !todos[pos].isDone;
    this.setState({
        todos: todos
});
    }


            updateItem(e){
                this.setState({
                item: e.target.value
            })
        }

            render(){
             return (
                <div className="container">
                    <h1>My Todo</h1>
                    <TodoList
                    todos={this.state.todos}
                    checkTodo={this.checkTodo}
                    deleteTodo={this.deleteTodo}
                     />
                    <TodoForm
                        item={this.state.item}
                        updateItem={this.updateItem}
                        addTodo={this.addTodo}
                    />
                </div>
             );
        }

    }
        ReactDOM.render(
            <App/>,
            document.getElementById('root')
        );
    })();
    </script>

各パーツをそれぞれコンポートネントとして切り分ける。