main.js

var React = require('react');     
var ReactAddons = require('react/addons');     
var DiscountTable = require('./discount/Discount.jsx');
var ShippingTable = require('./shipping/Shipping.jsx');
var ProvinceTable = require('./province/Province.jsx');

(function() {
    var discounts = document.getElementById('discount-table');
    if (discounts !== null) {
        React.render(<DiscountTable initialData={ {data : [], add: false, addRow: { Id: 0, Amount: 0, Quantity: 0 } } } 
            url="/admin/discount/list" update="/admin/discount/update" create="/admin/discount/create" delete="/admin/discount/delete" />, discounts);
    }

    var shippingTable = document.getElementById('shipping-table');
    if (shippingTable !== null) {
        React.render(<ShippingTable initialData={ {data : [], percentages : {Id: 0, Canada: 0, Us: 0, International: 0}, add: false, addRow: { Id: 0, Subtotal: 0, Canada: 0, Us: 0, International: 0 }} } 
            url="/admin/shipping/costs" update="/admin/shipping/update" create="/admin/shipping/create" delete="/admin/shipping/delete" updatePercentage="/admin/shipping/updatepercentage" />, shippingTable);
    }

    var provinces = document.getElementById('province-table');
    if (provinces !== null) {
        React.render(<ProvinceTable initialData={ {data : [], add: false, addRow: { Id: 0, Name: '', BookPst: 0, BookGst: 0, Pst: 0, Gst: 0 } } } 
            url="/admin/province/list" update="/admin/province/update" create="/admin/province/create" delete="/admin/province/delete" />, provinces);
    }
})();

Also, the above leads to 150k increase in components.js file size (compared to before just building discount, shipping, and province separately). Can think of several workarounds, but don't think they're necessarily the best solution.