Using Mobiscroll with webpack and babel

Question

I am using Mobiscroll from their github but I have also tried using their generator with react.

The problem with the github version is it comes as multiple files:

bower_components/mobiscroll/js/mobiscroll.android-holo-light.js
bower_components/mobiscroll/js/mobiscroll.core.js
bower_components/mobiscroll/js/mobiscroll.dom.js
bower_components/mobiscroll/js/mobiscroll.frame.android-holo.js
bower_components/mobiscroll/js/mobiscroll.frame.ios.js
bower_components/mobiscroll/js/mobiscroll.frame.jqm.js
bower_components/mobiscroll/js/mobiscroll.frame.js
bower_components/mobiscroll/js/mobiscroll.frame.wp.js
bower_components/mobiscroll/js/mobiscroll.mobiscroll-dark.js
bower_components/mobiscroll/js/mobiscroll.scroller.js
bower_components/mobiscroll/js/mobiscroll.scrollview.js
bower_components/mobiscroll/js/mobiscroll.wp-light.js

So how am I meant to approch this from a import point of view when clearly in the react documention it says:

var CalendarDemo = React.createClass({
    render: function() {
        return (
            <div>
                <MobiscrollCalendar 
                    ref="calendar" 
                    theme="mobiscroll" 
                    display="bottom"
                    placeholder="Please Select..."
                />
            </div>
        );
    }    
});

ReactDOM.render(
    <CalendarDemo />,
    document.getElementById('content')
);

I cannot find a clear way to get: MobiscrollCalendar out of these files.

So I think I am safe in assume that the github version is not intended for webpack.

react & weback safe version - So I am led to believe :)

I did try the bundled version which is exclusively for react and I have been told supports webpack.

Js file

import {MobiscrollCalendar} from '../../lib/mobiscroll';

class Home extends React.Component {
    render = function (){
        return (
            <app-content>
                <Header />
                <div className={loggedOut.home}>
                    <MobiscrollCalendar
                        ref="calendar"
                        theme="mobiscroll"
                        display="bottom"
                        placeholder="Please Select..."
                    />
                </div>
            </app-content>
        )
    }
}

However using this gives me the following error:

 Uncaught ReferenceError: React is not defined

So to get round this issue, which goes against me using webpack :) was to add wreact and mobiscroll into the html:

<script src="/js/react.min.js"></script>
<script src="/js/mobiscroll.js"></script>
<script src="/js/react-dom.min.js"></script>

Which then results in the following error

warning.js:44 Warning: getInitialState was defined on t, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead?
warning.js:44 Warning: Unknown DOM property readonly. Did you mean readOnly?

I believe I will give up now. :( I am unsure how others could help.