Es2015 classes

docs/src/app/app.jsx

@@ -3,7 +3,16 @@
   let React = require('react'),
     Router = require('react-router'),
     AppRoutes = require('./app-routes.jsx'),
-    injectTapEventPlugin = require("react-tap-event-plugin");
+    injectTapEventPlugin = require("react-tap-event-plugin"),
+    shallowEqual = require('react/lib/shallowEqual');
+
+  // Remove after upgrading to React 0.14.
+  React.addons.shallowCompare = function(instance, nextProps, nextState) {
+    return (
+      !shallowEqual(instance.props, nextProps) ||
+      !shallowEqual(instance.state, nextState)
+    );
+  }
 
   //Needed for React Developer Tools
   window.React = React;

docs/src/app/components/code-example/code-block.jsx

@@ -3,33 +3,25 @@ const { Styles } = require('material-ui');
 const { Spacing } = Styles;
 
 
-const CodeBlock = React.createClass({
+class CodeBlock extends React.Component {
+  constructor(props, context) {
+    super(props, context);
 
-  contextTypes : {
-    muiTheme: React.PropTypes.object
-  },
-
-  //for passing default theme context to children
-  childContextTypes: {
-    muiTheme: React.PropTypes.object,
-  },
-
-  getChildContext () {
-    return {
-      muiTheme: this.state.muiTheme,
+    this.state = {
+      muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme),
     };
-  },
+  }
 
-  getInitialState () {
+  getChildContext() {
     return {
-      muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme),
+      muiTheme: this.state.muiTheme,
     };
-  },
+  }
 
-  componentWillReceiveProps (nextProps, nextContext) {
+  componentWillReceiveProps(nextProps, nextContext) {
     let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
     this.setState({muiTheme: newMuiTheme});
-  },
+  }
 
   componentDidMount() {
     var code = React.findDOMNode(this.refs.code);
@@ -42,17 +34,26 @@ const CodeBlock = React.createClass({
         readOnly: true,
       });
     });
-  },
+  }
 
-  shouldComponentUpdate({children}, nextState){
+  shouldComponentUpdate({children}, nextState) {
     return this.props.children !== children;
-  },
+  }
 
   render() {
     return (
       <textarea ref="code" value={this.props.children} readOnly={true}/>
     );
-  },
-});
+  }
+}
+
+//for passing default theme context to children
+CodeBlock.childContextTypes = {
+  muiTheme: React.PropTypes.object,
+};
+
+CodeBlock.contextTypes = {
+  muiTheme: React.PropTypes.object
+};
 
 module.exports = CodeBlock;

docs/src/app/components/code-example/code-example.jsx

@@ -15,38 +15,25 @@ const CodeBlock = require('./code-block');
 const ThemeManager = Styles.ThemeManager;
 const DefaultRawTheme = Styles.LightRawTheme;
 
-const CodeExample = React.createClass({
+class CodeExample extends React.Component {
+  constructor(props, context) {
+    super(props, context);
 
-  propTypes : {
-    code: React.PropTypes.string.isRequired,
-    layoutSideBySide: React.PropTypes.bool,
-  },
-
-  contextTypes : {
-    muiTheme: React.PropTypes.object
-  },
-
-  //for passing default theme context to children
-  childContextTypes: {
-    muiTheme: React.PropTypes.object,
-  },
-
-  getChildContext () {
-    return {
-      muiTheme: this.state.muiTheme,
+    this.state = {
+      muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme),
     };
-  },
+  }
 
-  getInitialState () {
+  getChildContext() {
     return {
-      muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme),
+      muiTheme: this.state.muiTheme,
     };
-  },
+  }
 
-  componentWillReceiveProps (nextProps, nextContext) {
+  componentWillReceiveProps(nextProps, nextContext) {
     let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
     this.setState({muiTheme: newMuiTheme});
-  },
+  }
 
   render() {
 
@@ -91,7 +78,21 @@ const CodeExample = React.createClass({
         <CodeBlock style={styles.codeBlock}>{code}</CodeBlock>
       </Paper>
     );
-  },
-});
+  }
+}
+
+//for passing default theme context to children
+CodeExample.childContextTypes = {
+  muiTheme: React.PropTypes.object,
+};
+
+CodeExample.contextTypes = {
+  muiTheme: React.PropTypes.object
+};
+
+CodeExample.propTypes = {
+  code: React.PropTypes.string.isRequired,
+  layoutSideBySide: React.PropTypes.bool,
+};
 
 module.exports = CodeExample;