added basic add and remove item using simple input

src/js/actions/AppActions.js

@@ -6,8 +6,14 @@ var AppActions = {
     AppDispatcher.handleViewAction({
       actionType:AppConstants.ADD_ITEM,
       item: item
-    })
+    });
+  },
+  removeItem: function(itemIndex){
+    AppDispatcher.handleViewAction({
+      actionType:AppConstants.REMOVE_ITEM,
+      itemIndex: itemIndex
+    });
   }
 }
 
-module.exports = AppActions
+module.exports = AppActions;

src/js/components/app.js

@@ -3,17 +3,66 @@ var React = require('react');
 var AppActions = require('../actions/AppActions');
 var AppStore = require('../stores/AppStore');
 
+var getItemsFromStore = function () {
+  return {
+    items: AppStore.getItems()
+  };
+}
+
 var App = React.createClass({
-    handleClick:function(){
-      AppActions.addItem('this is the item');
-    },
-    render:function(){
-      return (
-        <div className="wrapper">
-          <h3 onClick={this.handleClick}>Click this Title, then check console</h3>
-        </div>
-      )
+  getInitialState: function() {
+    return getItemsFromStore();
+  },
+
+  componentDidMount: function() {
+    AppStore.addChangeListener(this._onChange);
+  },
+
+  _onChange: function() {
+    this.setState(getItemsFromStore());
+  },
+
+  addNewItem: function() {
+    var newitem  = this.refs.taskitem.getDOMNode().value.trim();
+    if(newitem.length !== 0) {
+      AppActions.addItem(newitem);
+      this.refs.taskitem.getDOMNode().value = '';
+      this.refs.taskitem.getDOMNode().focus();
     }
-  });
+    else {
+      console.error('Please enter something. Input is empty');
+    }
+  },
+
+  removeItem: function(itemIndex) {
+    AppActions.removeItem(itemIndex);
+  },
+
+  render:function(){
+    return (
+      <div className="wrapper">
+        <input ref="taskitem" placeholder="Enter item" />
+        <button onClick={this.addNewItem}>Add task</button>
+        <div>
+          <ul>
+            {
+              this.state.items.map(function(item, i) {
+                var removeItemClick = this.removeItem.bind(this, i);
+                return (
+                  <li key={item}>
+                    <button onClick={removeItemClick}>
+                      Remove task
+                    </button> 
+                    {item}
+                  </li>
+                )
+              }, this)
+            }
+          </ul>
+        </div>
+      </div>
+    )
+  }
+});
 
 module.exports = App;

src/js/constants/AppConstants.js

@@ -1,4 +1,5 @@
 module.exports = {
   ADD_ITEM: 'ADD_ITEM',
-  REMOVE_ITEM: 'REMOVE_ITEM'
+  REMOVE_ITEM: 'REMOVE_ITEM',
+  VIEW_ACTION: 'VIEW_ACTION'
 };

src/js/dispatcher/AppDispatcher.js

@@ -1,13 +1,36 @@
+/**
+ * Copyright 2013-2014 Facebook, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * A singleton that operates as the central hub for application updates.
+ */
+
 var Dispatcher = require('flux').Dispatcher;
-var assign = require('object-assign');
+var Assign = require('object-assign');
+var AppConstants = require('../constants/AppConstants');
 
-var AppDispatcher = assign(new Dispatcher(), {
-  handleViewAction: function(action) {
-    this.dispatch({
-      source: 'VIEW_ACTION',
-      action: action
-    });
-  }
+var AppDispatcher = Assign(new Dispatcher(), {
+	/**
+	* @param {object} action The details of the action, including the action's
+	* type and additional data coming from the view.
+	*/
+	handleViewAction: function(action) {
+    	this.dispatch({
+      		source: AppConstants.VIEW_ACTION,
+      		action: action
+    	});
+  	}
 });
 
 module.exports = AppDispatcher;

src/js/stores/AppStore.js

@@ -5,16 +5,47 @@ var assign = require('object-assign');
 
 
 var CHANGE_EVENT = 'change';
+var items = [];
 
 var AppStore = assign({}, EventEmitter.prototype, {
+
   emitChange: function() {
     this.emit(CHANGE_EVENT);
+  },
+
+  addChangeListener: function(callback) {
+    this.on(CHANGE_EVENT, callback);
+  },
+
+  getItems: function() {
+  	return items;
+  },
+
+  addItem: function(item) {
+  	if(items.indexOf(item) === -1) {
+  		items.push(item);
+  	}
+  },
+
+  removeItem: function(index) {
+  	items.splice(index, 1);
   }
 });
 
-AppDispatcher.register(function(payload){
-  console.log(payload);
-  return true;
+AppStore.dispatchToken = AppDispatcher.register(function(payload){
+	var action = payload.action;
+	switch(action.actionType) {
+		case AppConstants.ADD_ITEM:
+			AppStore.addItem(action.item);
+			AppStore.emitChange();
+			break;
+		case AppConstants.REMOVE_ITEM:
+			AppStore.removeItem(action.itemIndex);
+			AppStore.emitChange();
+			break;
+		default:
+			// do nothing
+  }
 });
 
 module.exports = AppStore;