Refactor pieces of the To Do List to React components (no Redux)

components/AddTodoInput.js

@@ -0,0 +1,32 @@
+class AddTodoInput extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            text: ''
+        };
+    }
+
+    handleInput(e) {
+        this.setState({ text: e.target.value });
+    }
+
+    handleSubmit(e) {
+        e.preventDefault();
+        addTodo(this.state.text);
+        this.setState({ text: '' });
+    }
+
+    render() {
+        return (
+            <form className="form-inline d-inline" id="addForm" onSubmit={this.handleSubmit.bind(this)}>
+                <input id="todoInput" type="text"
+                       value={this.state.text}
+                       onChange={this.handleInput.bind(this)}
+                       className="form-control"/>
+                <button id="addTodo" type="submit" className="btn btn-primary mx-1">Add</button>
+            </form>
+        );
+    }
+}
+
+ReactDOM.render(<AddTodoInput/>, document.querySelector('[data-react-component="AddTodoInput"]'));

components/RemoveCompletedButton.js

@@ -0,0 +1,25 @@
+class RemoveCompletedButton extends React.Component {
+    handleClick() {
+        removeCheckedItems();
+    }
+
+    render() {
+        if(this.props.show) {
+            return (
+                <button onClick={this.handleClick} className="btn btn-outline-secondary mx-1">
+                    Remove Completed
+                </button>
+            );
+        }
+        return null;
+    }
+}
+
+RemoveCompletedButton.defaultProps = {
+    show: false
+};
+
+ReactDOM.render(
+    <RemoveCompletedButton />,
+    document.querySelector('[data-react-component="RemoveCompletedButton"]')
+);

index.html

@@ -11,15 +11,15 @@
     <h1>To Do List</h1>
     <ul id="todos" class="list-group my-2">
     </ul>
-    <form class="form-inline d-inline" id="addForm">
-        <input id="todoInput" class="form-control" type="text"/>
-        <button id="addTodo" type="submit" class="btn btn-primary mx-1">Add</button>
-    </form>
-    <button id="clearCompleted" class="btn btn-outline-secondary mx-1" style="display: none">
-        Remove Completed
-    </button>
+    <span data-react-component="AddTodoInput"></span>
+    <span data-react-component="RemoveCompletedButton"></span>
 </div>
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
 <script src="jquery/todo.js" type="text/javascript"></script>
+<script src="components/AddTodoInput.js" type="text/babel"></script>
+<script src="components/RemoveCompletedButton.js" type="text/babel"></script>
 </body>
 </html>

jquery/todo.js

@@ -39,30 +39,17 @@ function toggleComplete(todo) {
     }
 }
 
+function removeCheckedItems() {
+    $('#todos input:checked').closest('li').remove();
+    maybeHideDeleteAll();
+
+}
+
 function maybeHideDeleteAll() {
     var completedItems = $('#todos input:checked').length;
-    if(completedItems > 0) {
-        $('#clearCompleted').show();
-    } else {
-        $('#clearCompleted').hide();
-    }
+    ReactDOM.render(
+        React.createElement(RemoveCompletedButton, { show: completedItems > 0 }),
+        document.querySelector('[data-react-component="RemoveCompletedButton"]')
+    );
 }
 
-// Attach the DOM events once the page has loaded
-$(document).ready(function() {
-    // When the form input is submitted, add the todo item
-    $("#addForm").on('submit', function(e) {
-        e.preventDefault();
-        var input = $("input#todoInput");
-        addTodo(input.val());
-        input.val("");
-    });
-
-    // When the form input is submitted, add the todo item
-    $("#clearCompleted").on('click', function(e) {
-        e.preventDefault(e);
-        $('#todos input:checked').closest('li').remove();
-        $(this).hide();
-    });
-});
-