var ReactDom    =   require('react-dom'),
    Router      =   require('react-router-component'),
    NotFound    =   Router.NotFound,
    Locations   =   Router.Locations,
    Location    =   Router.Location;

/* react-proxy, use require.ensure([], (require) -> {
 *      require('some module you want to load async');
 * })
 * 
 * webpack async thunk doc: http://webpack.github.io/docs/code-splitting.html
 *  
 * react-proxy-loader: https://github.com/webpack/react-proxy-loader
 */

// custom bundle name with name params

var Home            =   require('react-proxy?name=home!./home'),
    About           =   require('react-proxy?name=about!./about'),
    NotFoundPage    =   require('react-proxy?name=404!./notfound');

// import base style
// object styles only make sense when you use css-modules
var style           =   require('scss/normolize');

// route wrapper

var App = React.createClass({
    render: function() {
        return (
            <Locations hash>
                <Location path="/" handler={Home}/>
                <Location path="/about" handler={About}/>
                <NotFound handler={NotFoundPage}/>
            </Locations>
        )
    }
})

// render the dom 
ReactDom.render(<App/>, document.getElementById('app'))