Rs review 2

app/actions/action-types.js

@@ -1,3 +1,8 @@
+// Use "todos/CHECK_TODO",
+// it is just good practice.
+// When we have more than a single reducer
+// working, we can quickly tell what reducer
+// an action belongs to (and avoid conflicts).
 export const CHECK_TODO = "CHECK_TODO"
 export const ADD_TODO = "ADD_TODO"
 export const REMOVE_TODO = "REMOVE_TODO"

app/actions/index.js

@@ -1,8 +1,18 @@
+// I think the index file should just
+// import stuff and export stuff.
+// Move this to an actions.js file.
+
+// import * as t, and you can
+// access the members as t.CHECK_TODO
+// for example. This way you can
+// protect the global namespace and keep it clean.
 import {
     CHECK_TODO,
     ADD_TODO,
     REMOVE_TODO
 } from './action-types';
+
+// This should come as the first statement in file.
 "use strict";
 
 export const checkTodo = (todo) => {

app/app.js

@@ -2,6 +2,7 @@ import React from 'react';
 import TodoList from 'components/todos-list';
 import NewTodoInput from 'components/new-todo-input';
 
+// Very clean code!
 const App = () => (
   <div>
     <NewTodoInput />

app/components/new-todo-input.js

@@ -3,6 +3,14 @@ import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
 import { addTodo} from '../actions/index';
 
+// The way to avoid using document.getElementById and acessing the DOM
+// directly is to add an event handler to <input/> and use a local state.
+// Something like:
+// <input onChange={(event) => this.setState({newTodoText: event.target.value})}
+// You can also make it go through Redux here, 
+// but local state is not always evil,
+// specially in this case 
+// where you are just storing the value from a form field.
 class NewTodoInput extends Component{
 
  keyPressHandler(e){

app/components/todos-list.js

@@ -3,6 +3,14 @@ import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
 import {delTodo, checkTodo} from '../actions/index';
 
+// Extract the code inside map to a TodoListItem component.
+// Pass each todo as a prop to the Item component.
+// This will also simplify your code and you'll be able
+// to put all render code inside render().
+// It will be simpler. Instead of having
+// a method return all items,
+// iterate on render().
+
 class TodoList extends Component{
 
   createListItems(){

app/initialize.js

@@ -3,6 +3,9 @@ import Redux from 'redux';
 import ReactDOM from 'react-dom';
 import {start} from './todos'
 
+// Put the code from todos.js here.
+// No need to have two files doing pretty much
+// the same.
 document.addEventListener('DOMContentLoaded', () => {
   start();
 });

app/todos.js

@@ -5,9 +5,13 @@ import {Provider} from 'react-redux';
 import Reducer from 'reducers/reducer'
 import App from 'app';
 
+// Move this to initialize, that makes
+// more sense don't you think?
 export function start () {
 const store = createStore(Reducer);
 
+// Reformat, it looks weird with the
+// comma on its own big line. Use ESLint.
 ReactDOM.render(
   <Provider store = {store}>
     <App />