Học ReactJS Full Đầy Đủ Nhất

###* @jsx React.DOM ###
define [
  "react-with-addons"
  "actions/app-actions"
], (React, AppActions) ->
  "use strict"
  removeFromArticle = React.createClass(
    handleClick: (e) ->
      AppActions.removeArticle @props.index
    render: ->
      `<button onClick={this.handleClick}>-</button>`
  )
  removeFromArticle

define [
  "actions/constants"
  "dispatcher/app-dispatcher"
], (Constants, AppDispatcher)->
  "use strict"
  AppActions =
    removeArticle: (index)->
      AppDispatcher.handleViewAction(actionType: Constants.REMOVE_ARTICLE, index: index)
  AppActions

define [], ->
  "use strict"
  REMOVE_ARTICLE:    "REMOVE_ARTICLE"

define [
  "jquery"
  "dispatcher/dispatcher"
], ($, Dispatcher)->
  "use strict"
  AppDispatcher = $.extend(Dispatcher.prototype, {
    handleViewAction: (action)->
      @dispatch(
        source: 'VIEW_ACTION'
        action: action
      )
  })
  AppDispatcher

define [
  "jquery"
  "lodash"
  "dispatcher/app-dispatcher"
  "actions/constants"
  "eventemitter2"
], ($, _, AppDispatcher, Constants, EventEmitter)->
  "use strict"

  CHANGE_EVENT = "change"

  _articles = []

  _removeArticle = (index)->
    _articles.splice(index, 1)

  AppStore = $.extend(new EventEmitter(), {
    emitChange: -> @emit(CHANGE_EVENT)
    addChangeListener: (callback)-> @on(CHANGE_EVENT, callback)
    removeChangeListener: (callback)-> @removeListener(CHANGE_EVENT, callback)
    getArticle: -> _articles
    dispatcherIndex: AppDispatcher.register((payload)->
      action = payload.action

      switch action.actionType
        when Constants.REMOVE_ARTICLE then _removeArticle(action.index)

      AppStore.emitChange()
    )
  })

dist/
    js/
        app.js
    index.html
node_modules/
src/
    js/
        actions/
        components/
        constants/
        dispatcher/
        stores/
        app.js
    index.html
gulpfile.js
package.json

{
  "name": "react-flux-stores",
  "version": "1.0.0",
  "description": "Building simple store with React and Flux",
  "main": "app.js",
  "scripts": {
    "test": "gulp"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/nguyenthanhtung88/react-flux-stores.git"
  },
  "keywords": [
    "react",
    "flux",
    "store"
  ],
  "author": "Tungshooter",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/nguyenthanhtung88/react-flux-stores/issues"
  },
  "homepage": "https://github.com/nguyenthanhtung88/react-flux-stores",
  "devDependencies": {
    "flux": "^2.0.1",
    "gulp": "^3.8.11",
    "gulp-browserify": "^0.5.1",
    "gulp-concat": "^2.5.2",
    "react": "^0.13.1",
    "reactify": "^1.1.0",
    "underscore": "^1.8.3"
  }
}

npm install

var gulp = require("gulp");
var browserify = require("gulp-browserify");
var concat = require("gulp-concat");

gulp.task("browserify", function() {
    gulp.src("src/js/app.js")
        .pipe(browserify({transform: "reactify"}))
        .pipe(concat("app.js"))
        .pipe(gulp.dest("dist/js"));
});

gulp.task("copy", function() {
    gulp.src("src/index.html")
        .pipe(gulp.dest("dist"));
});

gulp.task("default", ["browserify", "copy"]);

gulp.task("watch", function() {
    gulp.watch("src/**/*.*", ["default"]);
});

npm install --global gulp

src/
    js/
        components/
            add-to-cart.js
            cart.js
            catalog.js
            decrease.js
            increase.js
            main.js
            remove-from-cart.js

var React = require("react");
var AppActions = require("../actions/app-actions");

var AddToCart = React.createClass({
    handleClick: function() {
        AppActions.addItem(this.props.item);
    },
    render: function() {
        return (
            <button onClick={this.handleClick}>Add To Cart</button>
        );
    }
});

module.exports = AddToCart;

var AppConstants = require("../constants/app-constants");
var AppDispatcher = require("../dispatcher/app-dispatcher");

var AppActions = {
    addItem: function(item) {
        AppDispatcher.handleViewAction({
            actionType: AppConstants.ADD_ITEM,
            item: item
        })
    },
    removeItem: function(index) {
        AppDispatcher.handleViewAction({
            actionType: AppConstants.REMOVE_ITEM,
            index: index
        })
    },
    increaseItem: function(index) {
        AppDispatcher.handleViewAction({
            actionType: AppConstants.INCREASE_ITEM,
            index: index
        })
    },
    decreaseItem: function(index) {
        AppDispatcher.handleViewAction({
            actionType: AppConstants.DECREASE_ITEM,
            index: index
        })
    }
}

module.exports = AppActions;

module.exports = {
    ADD_ITEM: "ADD_ITEM",
    REMOVE_ITEM: "REMOVE_ITEM",
    INCREASE_ITEM: "INCREASE_ITEM",
    DECREASE_ITEM: "DECREASE_ITEM",
}

var Dispatcher = require("flux").Dispatcher;
var _ = require("underscore");

var AppDispatcher = _.extend(new Dispatcher(), {
    handleViewAction: function(action) {
        this.dispatch({
            source: 'VIEW_ACTION',
            action: action
        })
    }
});

module.exports = AppDispatcher;

var AppDispatcher = require("../dispatcher/app-dispatcher");
var AppConstants = require("../constants/app-constants");
var _ = require("underscore");
var EventEmitter = require("events").EventEmitter;

var CHANGE_EVENT = "change";

var _catalog = [
    {id: 1, title: "Widget #1", cost: 1},
    {id: 2, title: "Widget #2", cost: 2},
    {id: 3, title: "Widget #3", cost: 3}
];

var _cartItems = [];

function _removeItem(index) {
    _cartItems[index].inCart = false;
    _cartItems.splice(index, 1);
}

function _increaseItem(index) {
    _cartItems[index].qty++;
}

function _decreaseItem(index) {
    if (_cartItems[index].qty > 1) {
        _cartItems[index].qty--;
    } else {
        _removeItem(index);
    }
}

function _addItem(item) {
    if (!item.inCart) {
        item['qty'] = 1;
        item['inCart'] = true;
        _cartItems.push(item);
    } else {
        _cartItems.forEach(function(cartItem, i) {
            if (cartItem.id == item.id) {
                _increaseItem(i);
            }
        });
    }
}

var AppStore = _.extend(EventEmitter.prototype, {
    emitChange: function() {
        this.emit(CHANGE_EVENT);
    },
    addChangeListener: function(callback) {
        this.on(CHANGE_EVENT, callback);
    },
    removeChangeListener: function(callback) {
        this.removeListener(CHANGE_EVENT, callback);
    },
    getCart: function() {
        return _cartItems;
    },
    getCatalog: function() {
        return _catalog;
    }
});

AppDispatcher.register(function(payload) {
    var action = payload.action; // This is action from handleViewAction

    switch (action.actionType) {
        case AppConstants.ADD_ITEM:
            _addItem(action.item);
            break;
        case AppConstants.REMOVE_ITEM:
            _removeItem(action.index);
            break;
        case AppConstants.INCREASE_ITEM:
            _increaseItem(action.index);
            break;
        case AppConstants.DECREASE_ITEM:
            _decreaseItem(action.index);
            break;
    }

    AppStore.emitChange();

    return true;
});

module.exports = AppStore;

AppDispatcher.register(function(payload) {
    var action = payload.action; // This is action from handleViewAction

    switch (action.actionType) {
        case AppConstants.ADD_ITEM:
            _addItem(action.item);
            break;
        case AppConstants.REMOVE_ITEM:
            _removeItem(action.index);
            break;
        case AppConstants.INCREASE_ITEM:
            _increaseItem(action.index);
            break;
        case AppConstants.DECREASE_ITEM:
            _decreaseItem(action.index);
            break;
    }

    AppStore.emitChange();

    return true;
});

AppStore.emitChange();

var AppStore = _.extend(EventEmitter.prototype, {
    emitChange: function() {
        this.emit(CHANGE_EVENT);
    },
    addChangeListener: function(callback) {
        this.on(CHANGE_EVENT, callback);
    },
    removeChangeListener: function(callback) {
        this.removeListener(CHANGE_EVENT, callback);
    },
    getCart: function() {
        return _cartItems;
    },
    getCatalog: function() {
        return _catalog;
    }
});

var React = require("react");
var AppStore = require("../stores/app-store");
var RemoveFromCart = require("../components/remove-from-cart");
var Increase = require("../components/increase");
var Decrease = require("../components/decrease");

function getCartItems() {
    return {
        items: AppStore.getCart()
    }
}

var Cart = React.createClass({
    getInitialState: function() {
        return getCartItems();
    },
    componentWillMount: function() {
        AppStore.addChangeListener(this._onChange);
    },
    _onChange: function() {
        this.setState(getCartItems());
    },
    render: function() {
        var total = 0;
        var items = this.state.items.map(function(item, i) {
            var subtotal = item.qty * item.cost;
            total += subtotal;
            return (
                <tr key={i}>
                    <td><RemoveFromCart index={i}/></td>
                    <td>{item.title}</td>
                    <td>{item.qty}</td>
                    <td>
                        <Increase index={i} />
                        <Decrease index={i} />
                    </td>
                    <td>${subtotal}</td>
                </tr>
            );
        });
        return (
            <table className="table table-hover">
                <thead>
                    <tr>
                        <th></th>
                        <th>Item</th>
                        <th>Quantity</th>
                        <th></th>
                        <th>Subtotal</th>
                    </tr>
                </thead>
                <tbody>
                    {items}
                </tbody>
                <tfoot>
                    <tr>
                        <td colSpan="4" className="text-right">Total</td>
                        <td>${total}</td>
                    </tr>
                </tfoot>
            </table>
        );
    }
});

module.exports = Cart;

componentWillMount: function() {
    AppStore.addChangeListener(this._onChange);
}

_onChange: function() {
    this.setState(getCartItems());
}