support react16 for v1 branch

.babelrc

@@ -0,0 +1,7 @@
+{
+    "presets": [
+        "env",
+        "react"
+    ],
+    "plugins": ["transform-class-properties", "transform-object-rest-spread"]
+}

demo/.babelrc

@@ -0,0 +1,7 @@
+{
+    "presets": [
+        "env",
+        "react"
+    ],
+    "plugins": ["transform-class-properties", "transform-object-rest-spread"]
+}

demo/package.json

@@ -12,20 +12,24 @@
   "dependencies": {
     "css-reset": "git+https://github.com/60frames/css-reset.git",
     "lodash.throttle": "^3.0.4",
-    "react": "^15.2.0",
-    "react-dom": "^15.2.0"
+    "prop-types": "^15.6.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
   },
   "devDependencies": {
-    "babel-core": "^5.8.25",
-    "babel-loader": "^5.3.2",
-    "babel-runtime": "^6.3.13",
-    "coding-standards": "git+ssh://git@github.com/60frames/coding-standards.git#1.0.5",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^6.4.1",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
     "css-loader": "^0.21.0",
     "eslint": "^1.8.0",
     "eslint-plugin-react": "^3.6.3",
     "file-loader": "^0.8.4",
     "react-hot-loader": "^1.3.0",
     "style-loader": "^0.13.0",
+    "url-loader": "^0.6.2",
     "webpack": "^1.12.2",
     "webpack-dev-server": "^1.12.1"
   }

demo/src/components/button/Button.js

@@ -1,24 +1,18 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
-var Button = React.createClass({
+class Button extends React.Component {
+    static propTypes = {
+        active: PropTypes.bool,
+        children: PropTypes.string,
+        onClick: PropTypes.func
+    };
 
-    propTypes: {
-        active: React.PropTypes.bool,
-        children: React.PropTypes.string,
-        onClick: React.PropTypes.func
-    },
-
-    getDefaultProps() {
-        return {
-            active: false,
-            onClick: this.onClick,
-            text: 'A button'
-        };
-    },
-
-    onClick(e) {
-        e.preventDefault();
-    },
+    static defaultProps = {
+        active: false,
+        onClick: (e) => { e.preventDefault(); },
+        text: 'A button'
+    };
 
     render() {
         return (
@@ -27,7 +21,6 @@ var Button = React.createClass({
             </button>
         );
     }
-
-});
+}
 
 export default Button;

demo/src/components/icon/Icon.js

@@ -2,32 +2,30 @@
 /*
  * Generated by the 'fontello-react' Grunt task.
  */
-import React from 'react';
+import PropTypes from 'prop-types';
 
-var Icon = React.createClass({
+import React from 'react';
 
-    propTypes: {
-        name: React.PropTypes.oneOf([
+class Icon extends React.Component {
+    static propTypes = {
+        name: PropTypes.oneOf([
             'github-circled-alt2'
         ])
-    },
+    };
 
     /**
      * Default the icon to the first one just to show something
      * @return {Object} The default props
      */
-    getDefaultProps() {
-        return {
-            name: 'github-circled-alt2'
-        };
-    },
+    static defaultProps = {
+        name: 'github-circled-alt2'
+    };
 
     render() {
         return (
             <span className={'icon icon--' + this.props.name}></span>
         );
     }
-
-});
+}
 
 export default Icon;

demo/src/components/index/Index.js

@@ -2,8 +2,7 @@ import React from 'react';
 import Header from './header/Header';
 import Main from './main/Main';
 
-var Index = React.createClass({
-
+class Index extends React.Component {
     render() {
         return (
             <div className="index">
@@ -12,6 +11,6 @@ var Index = React.createClass({
             </div>
         );
     }
-});
+}
 
 export default Index;

demo/src/components/index/header/Header.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import Icon from './../../icon/Icon';
 
-var Header = React.createClass({
-
+class Header extends React.Component {
     render() {
         return (
             <div className="header">
@@ -13,7 +12,6 @@ var Header = React.createClass({
             </div>
         );
     }
-
-});
+}
 
 export default Header;

demo/src/components/index/main/Main.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Button from './../../button/Button';
 import browserStackLogo from './../../../../browserstack.png';
-import {default as Video, Controls, Overlay} from './../../../../../src/components/video/Video';
+import { default as Video, Controls, Overlay } from './../../../../../src/components/video/Video';
 
 var videos = [
     // TODO: Don't hot link these. upload them somewhere.
@@ -13,76 +13,76 @@ var videos = [
     'https://github.com/mderrick/react-html5video'
 ];
 
-var Main = React.createClass({
-
-    getInitialState() {
-        return {
+class Main extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
             videoId: 0
         };
-    },
+    }
 
-    showVideo(id) {
+    showVideo = (id) => {
         this.setState({
             videoId: id
         }, this.reloadVideo);
-    },
+    };
 
-    reloadVideo() {
+    reloadVideo = () => {
         // When changing a HTML5 video, you have to reload it.
         this.refs.video.load();
         this.refs.video.play();
-    },
+    };
 
-    togglePlay() {
+    togglePlay = () => {
         this.refs.video.togglePlay();
-    },
+    };
 
-    toggleMute() {
+    toggleMute = () => {
         this.refs.video.toggleMute()
-    },
+    };
 
-    fullscreen() {
+    fullscreen = () => {
         this.refs.video.fullscreen();
-    },
+    };
 
-    load() {
+    load = () => {
         this.refs.video.load();
-    },
+    };
 
-    play() {
+    play = () => {
         this.refs.video.play();
-    },
+    };
 
-    pause() {
+    pause = () => {
         this.refs.video.pause();
-    },
+    };
 
-    unmute() {
+    unmute = () => {
         this.refs.video.unmute();
-    },
+    };
 
-    mute() {
+    mute = () => {
         this.refs.video.mute();
-    },
+    };
 
-    seek() {
+    seek = () => {
         this.refs.video.seek(this._seekInput.valueAsNumber);
-    },
+    };
 
-    setVolume() {
+    setVolume = () => {
         this.refs.video.setVolume(this._volumeInput.valueAsNumber);
-    },
+    };
 
-    setPlaybackRate() {
+    setPlaybackRate = () => {
         this.refs.video.setPlaybackRate(this._playbackRateInput.valueAsNumber);
-    },
+    };
 
-    onProgress() {
+    onProgress = () => {
         var el = ReactDOM.findDOMNode(this.refs.video).getElementsByTagName('video')[0];
         this.setState({
             percentageLoaded: el.buffered.length && el.buffered.end(el.buffered.length - 1) / el.duration * 100
         });
-    },
+    };
 
     render() {
         return (
@@ -143,11 +143,11 @@ var Main = React.createClass({
                             </li>
                             <li>
                                 <Button onClick={this.setVolume}>setVolume</Button>
-                                <input className="main__input" defaultValue="1" ref={(c) => this._volumeInput = c} type="number" min="0" max="1" step="0.1"/>
+                                <input className="main__input" defaultValue="1" ref={(c) => this._volumeInput = c} type="number" min="0" max="1" step="0.1" />
                             </li>
                             <li>
                                 <Button onClick={this.setPlaybackRate}>setPlaybackRate</Button>
-                                <input className="main__input" defaultValue="1" ref={(c) => this._playbackRateInput = c} type="number" min="0.5" max="2" step="0.25"/>
+                                <input className="main__input" defaultValue="1" ref={(c) => this._playbackRateInput = c} type="number" min="0.5" max="2" step="0.25" />
                             </li>
                             <li>
                                 <Button onClick={this.fullscreen}>fullscreen</Button>
@@ -161,6 +161,6 @@ var Main = React.createClass({
             </div>
         );
     }
-});
+}
 
 export default Main;

demo/webpack.config.js

@@ -30,7 +30,7 @@ module.exports = {
         loaders: [{
             test: /\.js$/,
             // Must be an array as server.js adds 'react-hot' loader
-            loaders: ['babel?optional=runtime'],
+            loaders: ['babel-loader'],
             exclude: /node_modules/
         }, {
             test: /\.css$/,