ReactJS v15 & Babel 6 Bootstrap Snippet

Version: v15
Libraries : Router, Route, IndexRoute, browserHistory, IndexLink, Link

/************************************************************************/
/*                       Import Libraries                               */
/************************************************************************/
/**
 * lib import
 */
var { Router, Route, IndexRoute, browserHistory, IndexLink, Link } = ReactRouter

/**
 * div destination
 *
 * @type {Element}
 */
var appDiv = document.querySelector("#app");

/**
 * axios config
 *
 * @type {boolean}
 */
axios.defaults.withCredentials = true;


/**
 * 404 Not Found Component
 */
var FourOhFour = React.createClass({
    render: function() {
        return (
            <div>
                <h1>404!</h1>
            </div>
        );
    }
});

/************************************************************************/
/*                             Application                              */
/************************************************************************/
/**
 * Main Application
 */
var App = React.createClass({
    //Init Load
    getInitalState: function () {
        return {
        };
    },
    /**
     * init loading
     */
    componentDidMount: function() {
        console.log ('init app load');
        console.log (this.props.params);
    },

    /**
     * init
     */
    componentWillReceiveProps(nextProps) {
        console.log (nextProps.params);
    },


    render: function() {
        return (
            <div>
                <ul className="header">
                    <li><IndexLink to="/mobile/" activeClassName="active">Home</IndexLink></li>
                    <li><Link to="/mobile/post" activeClassName="active">Post</Link></li>
                </ul>
                <div className="playground">
                    {this.props.children}
                </div>
            </div>
        )
    }
});

/**
 * Sub Components
 * Home
 */
var Home = React.createClass({
    //Init State Load
    getInitalState: function () {
        return {data: []};
    },
    //Mount Load, called each init loading state
    componentDidMount:function (){
        this.setState({data: [1,2,3]});
    },
    //Recall when state changed
    render: function() {
        if (this.state != null && this.state.data.length > 0) {
            return (
                <div className="data">
                    <!-- loop -->
                    {Object.keys(this.state.data).map(function (key) {
                        return (<div className="ui segment" key={key}>
                            <h2 className="ui header">{this.state.data[key]}</h2>
                            {this.renderInnerLoopComponent(key)}
                        </div>);
                    }.bind(this))}
                </div>
            );
        }
        //loading call
        return (
            <div className="ui active inverted dimmer">
                <div className="ui loader"></div>
            </div>
        );
    },
    renderInnerLoopComponent: function(subData) {
        return (
            <div>
                {subData}
            </div>
        );
    }
});

/**
 * Sub Components
 *  Page
 */
var Page = React.createClass({
    demofunctionCall: function(args, event){
        console.log (args[0]);
        console.log (args[1]);
        console.log (event.target.value);
    },
    render: function(){
        return (
            <div>
                {this.props.params.page_num}
                <button onClick={(event)=>this.demoFunctionCall([page_num,'demo_param1'],event)} value="demo value">
                </button>
            </div>

        );
    }
});

/************************************************************************/
/*                              React Routing                           */
/************************************************************************/

/**
 * React Router
 */
ReactDOM.render((
    <Router history={browserHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={Home} />
            <Route path='/page/:page_num' component={Page} />
            <Route path='/*' component={FourOhFour} />
        </Route>
    </Router>
), appDiv);

more
https://www.kirupa.com/react/creating_single_page_app_react_using_react_router.htm

package.json

{
...

  "dependencies": {
    "babel-cli": "^6.22.2"
  },
  "devDependencies": {
    "babel-cli": "^6.22.2",
    "babel-core": "^6.7.6",
    "babel-loader": "^6.2.4",
    "babel-preset-babili": "0.0.11",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "babili": "0.0.11"
  },
  "scripts": {
    "build-min": "./node_modules/.bin/babel ./jsx --out-dir ./js --presets=babili",
  },

...
}

.babel.rc

{
  "presets": ["es2015", "stage-0", "react"],
  "env": {
    "production": {
      "presets": ["babili"]
    }
  }
}