From 3c7f275f4fe89bb98947aa2398afba9359d54562 Mon Sep 17 00:00:00 2001
From: Keyan Zhang <root@keyanzhang.com>
Date: Sat, 23 Jul 2016 15:22:35 -0700
Subject: [PATCH] Merge pull request #7321 from
 keyanzhang/codemod-es6-component

Codemod tests from createClass to ES2015 classes
(cherry picked from commit 484f96bb618948443285f0314d0df34b419a45a5)
---
 package.json                                  |   2 +-
 .../renderSubtreeIntoContainer-test.js        | 142 ++--
 .../__tests__/ReactCSSTransitionGroup-test.js |  26 +-
 .../__tests__/ReactTransitionGroup-test.js    | 222 +++---
 .../children/__tests__/onlyChild-test.js      |   8 +-
 .../types/__tests__/ReactPropTypes-test.js    |  60 +-
 src/renderers/art/__tests__/ReactART-test.js  |  72 +-
 .../dom/__tests__/ReactDOMProduction-test.js  |  17 +-
 .../dom/client/__tests__/ReactDOM-test.js     |  28 +-
 .../__tests__/ReactDOMComponentTree-test.js   |  16 +-
 .../__tests__/ReactDOMTreeTraversal-test.js   |  16 +-
 .../__tests__/ReactEventListener-test.js      |  14 +-
 .../dom/client/__tests__/ReactMount-test.js   |  35 +-
 .../__tests__/ReactRenderDocument-test.js     |  56 +-
 .../dom/client/__tests__/findDOMNode-test.js  |  29 +-
 .../__tests__/SelectEventPlugin-test.js       |  16 +-
 .../wrappers/__tests__/ReactDOMInput-test.js  |   8 +-
 .../__tests__/ReactServerRendering-test.js    | 225 +++---
 .../__tests__/CSSPropertyOperations-test.js   |  60 +-
 .../__tests__/ReactDOMComponent-test.js       | 148 ++--
 .../shared/__tests__/ReactPerf-test.js        |  42 +-
 .../ReactComponentTreeDevtool-test.js         |  95 +--
 .../ReactComponentTreeDevtool-test.native.js  | 109 +--
 .../__tests__/ReactChildReconciler-test.js    |  30 +-
 .../__tests__/ReactComponent-test.js          | 154 ++--
 .../__tests__/ReactComponentLifeCycle-test.js | 183 ++---
 .../__tests__/ReactCompositeComponent-test.js | 693 +++++++++---------
 ...actCompositeComponentDOMMinimalism-test.js |  16 +-
 ...ReactCompositeComponentNestedState-test.js |  37 +-
 .../ReactCompositeComponentState-test.js      |  28 +-
 .../__tests__/ReactEmptyComponent-test.js     | 119 +--
 .../__tests__/ReactIdentity-test.js           | 102 ++-
 .../__tests__/ReactMockedComponent-test.js    |  35 +-
 .../__tests__/ReactMultiChild-test.js         |  24 +-
 .../ReactMultiChildReconcile-test.js          |  51 +-
 .../__tests__/ReactStateSetters-test.js       |  12 +-
 .../__tests__/ReactStatelessComponent-test.js |  63 +-
 .../reconciler/__tests__/ReactUpdates-test.js | 556 +++++++-------
 .../__tests__/refs-destruction-test.js        |  48 +-
 .../stack/reconciler/__tests__/refs-test.js   |  86 ++-
 .../__tests__/ReactTestRenderer-test.js       |  19 +-
 .../__tests__/traverseAllChildren-test.js     |   6 +-
 src/test/__tests__/ReactTestUtils-test.js     | 210 +++---
 .../__tests__/reactComponentExpect-test.js    |   8 +-
 44 files changed, 2045 insertions(+), 1881 deletions(-)

diff --git a/package.json b/package.json
index 74f4e04a216ce..0889569d55afc 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "babel-eslint": "^5.0.0",
     "babel-plugin-check-es2015-constants": "^6.5.0",
     "babel-plugin-syntax-trailing-function-commas": "^6.5.0",
-    "babel-plugin-transform-class-properties": "^6.10.2",
+    "babel-plugin-transform-class-properties": "^6.11.5",
     "babel-plugin-transform-es2015-arrow-functions": "^6.5.2",
     "babel-plugin-transform-es2015-block-scoped-functions": "^6.5.0",
     "babel-plugin-transform-es2015-block-scoping": "^6.5.0",
diff --git a/src/addons/__tests__/renderSubtreeIntoContainer-test.js b/src/addons/__tests__/renderSubtreeIntoContainer-test.js
index dcb70481a7fe6..f0cdd3f9f950d 100644
--- a/src/addons/__tests__/renderSubtreeIntoContainer-test.js
+++ b/src/addons/__tests__/renderSubtreeIntoContainer-test.js
@@ -21,37 +21,37 @@ describe('renderSubtreeIntoContainer', function() {
   it('should pass context when rendering subtree elsewhere', function() {
     var portal = document.createElement('div');
 
-    var Component = React.createClass({
-      contextTypes: {
+    class Component extends React.Component {
+      static contextTypes = {
         foo: React.PropTypes.string.isRequired,
-      },
+      };
 
-      render: function() {
+      render() {
         return <div>{this.context.foo}</div>;
-      },
-    });
+      }
+    }
 
-    var Parent = React.createClass({
-      childContextTypes: {
+    class Parent extends React.Component {
+      static childContextTypes = {
         foo: React.PropTypes.string.isRequired,
-      },
+      };
 
-      getChildContext: function() {
+      getChildContext() {
         return {
           foo: 'bar',
         };
-      },
+      }
 
-      render: function() {
+      render() {
         return null;
-      },
+      }
 
-      componentDidMount: function() {
+      componentDidMount() {
         expect(function() {
           renderSubtreeIntoContainer(this, <Component />, portal);
         }.bind(this)).not.toThrow();
-      },
-    });
+      }
+    }
 
     ReactTestUtils.renderIntoDocument(<Parent />);
     expect(portal.firstChild.innerHTML).toBe('bar');
@@ -60,37 +60,37 @@ describe('renderSubtreeIntoContainer', function() {
   it('should throw if parentComponent is invalid', function() {
     var portal = document.createElement('div');
 
-    var Component = React.createClass({
-      contextTypes: {
+    class Component extends React.Component {
+      static contextTypes = {
         foo: React.PropTypes.string.isRequired,
-      },
+      };
 
-      render: function() {
+      render() {
         return <div>{this.context.foo}</div>;
-      },
-    });
+      }
+    }
 
-    var Parent = React.createClass({
-      childContextTypes: {
+    class Parent extends React.Component {
+      static childContextTypes = {
         foo: React.PropTypes.string.isRequired,
-      },
+      };
 
-      getChildContext: function() {
+      getChildContext() {
         return {
           foo: 'bar',
         };
-      },
+      }
 
-      render: function() {
+      render() {
         return null;
-      },
+      }
 
-      componentDidMount: function() {
+      componentDidMount() {
         expect(function() {
           renderSubtreeIntoContainer(<Parent />, <Component />, portal);
         }).toThrowError('parentComponentmust be a valid React Component');
-      },
-    });
+      }
+    }
   });
 
   it('should update context if it changes due to setState', function() {
@@ -98,48 +98,46 @@ describe('renderSubtreeIntoContainer', function() {
     document.body.appendChild(container);
     var portal = document.createElement('div');
 
-    var Component = React.createClass({
-      contextTypes: {
+    class Component extends React.Component {
+      static contextTypes = {
         foo: React.PropTypes.string.isRequired,
         getFoo: React.PropTypes.func.isRequired,
-      },
+      };
 
-      render: function() {
+      render() {
         return <div>{this.context.foo + '-' + this.context.getFoo()}</div>;
-      },
-    });
+      }
+    }
 
-    var Parent = React.createClass({
-      childContextTypes: {
+    class Parent extends React.Component {
+      static childContextTypes = {
         foo: React.PropTypes.string.isRequired,
         getFoo: React.PropTypes.func.isRequired,
-      },
+      };
 
-      getChildContext: function() {
+      state = {
+        bar: 'initial',
+      };
+
+      getChildContext() {
         return {
           foo: this.state.bar,
           getFoo: () => this.state.bar,
         };
-      },
-
-      getInitialState: function() {
-        return {
-          bar: 'initial',
-        };
-      },
+      }
 
-      render: function() {
+      render() {
         return null;
-      },
+      }
 
-      componentDidMount: function() {
+      componentDidMount() {
         renderSubtreeIntoContainer(this, <Component />, portal);
-      },
+      }
 
       componentDidUpdate() {
         renderSubtreeIntoContainer(this, <Component />, portal);
-      },
-    });
+      }
+    }
 
     var instance = ReactDOM.render(<Parent />, container);
     expect(portal.firstChild.innerHTML).toBe('initial-initial');
@@ -152,42 +150,42 @@ describe('renderSubtreeIntoContainer', function() {
     document.body.appendChild(container);
     var portal = document.createElement('div');
 
-    var Component = React.createClass({
-      contextTypes: {
+    class Component extends React.Component {
+      static contextTypes = {
         foo: React.PropTypes.string.isRequired,
         getFoo: React.PropTypes.func.isRequired,
-      },
+      };
 
-      render: function() {
+      render() {
         return <div>{this.context.foo + '-' + this.context.getFoo()}</div>;
-      },
-    });
+      }
+    }
 
-    var Parent = React.createClass({
-      childContextTypes: {
+    class Parent extends React.Component {
+      static childContextTypes = {
         foo: React.PropTypes.string.isRequired,
         getFoo: React.PropTypes.func.isRequired,
-      },
+      };
 
-      getChildContext: function() {
+      getChildContext() {
         return {
           foo: this.props.bar,
           getFoo: () => this.props.bar,
         };
-      },
+      }
 
-      render: function() {
+      render() {
         return null;
-      },
+      }
 
-      componentDidMount: function() {
+      componentDidMount() {
         renderSubtreeIntoContainer(this, <Component />, portal);
-      },
+      }
 
       componentDidUpdate() {
         renderSubtreeIntoContainer(this, <Component />, portal);
-      },
-    });
+      }
+    }
 
     ReactDOM.render(<Parent bar="initial" />, container);
     expect(portal.firstChild.innerHTML).toBe('initial-initial');
diff --git a/src/addons/transitions/__tests__/ReactCSSTransitionGroup-test.js b/src/addons/transitions/__tests__/ReactCSSTransitionGroup-test.js
index 8fed09b6cb4d5..72721a4ed104b 100644
--- a/src/addons/transitions/__tests__/ReactCSSTransitionGroup-test.js
+++ b/src/addons/transitions/__tests__/ReactCSSTransitionGroup-test.js
@@ -271,8 +271,8 @@ describe('ReactCSSTransitionGroup', function() {
   });
 
   it('should clear transition timeouts when unmounted', function() {
-    var Component = React.createClass({
-      render: function() {
+    class Component extends React.Component {
+      render() {
         return (
           <ReactCSSTransitionGroup
             transitionName="yolo"
@@ -280,8 +280,8 @@ describe('ReactCSSTransitionGroup', function() {
             {this.props.children}
           </ReactCSSTransitionGroup>
         );
-      },
-    });
+      }
+    }
 
     ReactDOM.render(<Component/>, container);
     ReactDOM.render(<Component><span key="yolo" id="yolo"/></Component>, container);
@@ -293,23 +293,21 @@ describe('ReactCSSTransitionGroup', function() {
   });
 
   it('should handle unmounted elements properly', function() {
-    var Child = React.createClass({
+    class Child extends React.Component {
       render() {
         if (!this.props.show) {
           return null;
         }
         return <div />;
-      },
-    });
+      }
+    }
 
-    var Component = React.createClass({
-      getInitialState() {
-        return { showChild: true };
-      },
+    class Component extends React.Component {
+      state = { showChild: true };
 
       componentDidMount() {
         this.setState({ showChild: false });
-      },
+      }
 
       render() {
         return (
@@ -321,8 +319,8 @@ describe('ReactCSSTransitionGroup', function() {
             <Child show={this.state.showChild} />
           </ReactCSSTransitionGroup>
         );
-      },
-    });
+      }
+    }
 
     ReactDOM.render(<Component/>, container);
 
diff --git a/src/addons/transitions/__tests__/ReactTransitionGroup-test.js b/src/addons/transitions/__tests__/ReactTransitionGroup-test.js
index d19d4bb91dd98..c19ceeaf9927c 100644
--- a/src/addons/transitions/__tests__/ReactTransitionGroup-test.js
+++ b/src/addons/transitions/__tests__/ReactTransitionGroup-test.js
@@ -36,51 +36,58 @@ describe('ReactTransitionGroup', function() {
   it('should handle willEnter correctly', function() {
     var log = [];
 
-    var Child = React.createClass({
-      componentDidMount: function() {
+    class Child extends React.Component {
+      componentDidMount() {
         log.push('didMount');
-      },
-      componentWillAppear: function(cb) {
+      }
+
+      componentWillAppear = (cb) => {
         log.push('willAppear');
         cb();
-      },
-      componentDidAppear: function() {
+      };
+
+      componentDidAppear = () => {
         log.push('didAppear');
-      },
-      componentWillEnter: function(cb) {
+      };
+
+      componentWillEnter = (cb) => {
         log.push('willEnter');
         cb();
-      },
-      componentDidEnter: function() {
+      };
+
+      componentDidEnter = () => {
         log.push('didEnter');
-      },
-      componentWillLeave: function(cb) {
+      };
+
+      componentWillLeave = (cb) => {
         log.push('willLeave');
         cb();
-      },
-      componentDidLeave: function() {
+      };
+
+      componentDidLeave = () => {
         log.push('didLeave');
-      },
-      componentWillUnmount: function() {
+      };
+
+      componentWillUnmount() {
         log.push('willUnmount');
-      },
-      render: function() {
+      }
+
+      render() {
         return <span />;
-      },
-    });
+      }
+    }
+
+    class Component extends React.Component {
+      state = {count: 1};
 
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {count: 1};
-      },
-      render: function() {
+      render() {
         var children = [];
         for (var i = 0; i < this.state.count; i++) {
           children.push(<Child key={i} />);
         }
         return <ReactTransitionGroup>{children}</ReactTransitionGroup>;
-      },
-    });
+      }
+    }
 
     var instance = ReactDOM.render(<Component />, container);
     expect(log).toEqual(['didMount', 'willAppear', 'didAppear']);
@@ -100,44 +107,49 @@ describe('ReactTransitionGroup', function() {
     var log = [];
     var willEnterCb;
 
-    var Child = React.createClass({
-      componentDidMount: function() {
+    class Child extends React.Component {
+      componentDidMount() {
         log.push('didMount');
-      },
-      componentWillEnter: function(cb) {
+      }
+
+      componentWillEnter = (cb) => {
         log.push('willEnter');
         willEnterCb = cb;
-      },
-      componentDidEnter: function() {
+      };
+
+      componentDidEnter = () => {
         log.push('didEnter');
-      },
-      componentWillLeave: function(cb) {
+      };
+
+      componentWillLeave = (cb) => {
         log.push('willLeave');
         cb();
-      },
-      componentDidLeave: function() {
+      };
+
+      componentDidLeave = () => {
         log.push('didLeave');
-      },
-      componentWillUnmount: function() {
+      };
+
+      componentWillUnmount() {
         log.push('willUnmount');
-      },
-      render: function() {
+      }
+
+      render() {
         return <span />;
-      },
-    });
+      }
+    }
 
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {count: 1};
-      },
-      render: function() {
+    class Component extends React.Component {
+      state = {count: 1};
+
+      render() {
         var children = [];
         for (var i = 0; i < this.state.count; i++) {
           children.push(<Child key={i} />);
         }
         return <ReactTransitionGroup>{children}</ReactTransitionGroup>;
-      },
-    });
+      }
+    }
 
     var instance = ReactDOM.render(<Component />, container);
     expect(log).toEqual(['didMount']);
@@ -160,44 +172,49 @@ describe('ReactTransitionGroup', function() {
     var log = [];
     var willEnterCb;
 
-    var Child = React.createClass({
-      componentDidMount: function() {
+    class Child extends React.Component {
+      componentDidMount() {
         log.push('didMount');
-      },
-      componentWillEnter: function(cb) {
+      }
+
+      componentWillEnter = (cb) => {
         log.push('willEnter');
         willEnterCb = cb;
-      },
-      componentDidEnter: function() {
+      };
+
+      componentDidEnter = () => {
         log.push('didEnter');
-      },
-      componentWillLeave: function(cb) {
+      };
+
+      componentWillLeave = (cb) => {
         log.push('willLeave');
         cb();
-      },
-      componentDidLeave: function() {
+      };
+
+      componentDidLeave = () => {
         log.push('didLeave');
-      },
-      componentWillUnmount: function() {
+      };
+
+      componentWillUnmount() {
         log.push('willUnmount');
-      },
-      render: function() {
+      }
+
+      render() {
         return <span />;
-      },
-    });
+      }
+    }
+
+    class Component extends React.Component {
+      state = {count: 1};
 
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {count: 1};
-      },
-      render: function() {
+      render() {
         var children = [];
         for (var i = 0; i < this.state.count; i++) {
           children.push(<Child key={i} />);
         }
         return <ReactTransitionGroup>{children}</ReactTransitionGroup>;
-      },
-    });
+      }
+    }
 
     var instance = ReactDOM.render(<Component />, container);
     expect(log).toEqual(['didMount']);
@@ -217,44 +234,49 @@ describe('ReactTransitionGroup', function() {
   it('should handle entering/leaving several elements at once', function() {
     var log = [];
 
-    var Child = React.createClass({
-      componentDidMount: function() {
+    class Child extends React.Component {
+      componentDidMount() {
         log.push('didMount' + this.props.id);
-      },
-      componentWillEnter: function(cb) {
+      }
+
+      componentWillEnter = (cb) => {
         log.push('willEnter' + this.props.id);
         cb();
-      },
-      componentDidEnter: function() {
+      };
+
+      componentDidEnter = () => {
         log.push('didEnter' + this.props.id);
-      },
-      componentWillLeave: function(cb) {
+      };
+
+      componentWillLeave = (cb) => {
         log.push('willLeave' + this.props.id);
         cb();
-      },
-      componentDidLeave: function() {
+      };
+
+      componentDidLeave = () => {
         log.push('didLeave' + this.props.id);
-      },
-      componentWillUnmount: function() {
+      };
+
+      componentWillUnmount() {
         log.push('willUnmount' + this.props.id);
-      },
-      render: function() {
+      }
+
+      render() {
         return <span />;
-      },
-    });
+      }
+    }
+
+    class Component extends React.Component {
+      state = {count: 1};
 
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {count: 1};
-      },
-      render: function() {
+      render() {
         var children = [];
         for (var i = 0; i < this.state.count; i++) {
           children.push(<Child key={i} id={i} />);
         }
         return <ReactTransitionGroup>{children}</ReactTransitionGroup>;
-      },
-    });
+      }
+    }
 
     var instance = ReactDOM.render(<Component />, container);
     expect(log).toEqual(['didMount0']);
@@ -277,12 +299,12 @@ describe('ReactTransitionGroup', function() {
   it('should warn for duplicated keys with component stack info', function() {
     spyOn(console, 'error');
 
-    var Component = React.createClass({
-      render: function() {
+    class Component extends React.Component {
+      render() {
         var children = [<div key="1"/>, <div key="1" />];
         return <ReactTransitionGroup>{children}</ReactTransitionGroup>;
-      },
-    });
+      }
+    }
 
     ReactDOM.render(<Component />, container);
 
diff --git a/src/isomorphic/children/__tests__/onlyChild-test.js b/src/isomorphic/children/__tests__/onlyChild-test.js
index 9be5a597588e9..1f62f2e2326d2 100644
--- a/src/isomorphic/children/__tests__/onlyChild-test.js
+++ b/src/isomorphic/children/__tests__/onlyChild-test.js
@@ -22,15 +22,15 @@ describe('onlyChild', function() {
     React = require('React');
     ReactFragment = require('ReactFragment');
     onlyChild = require('onlyChild');
-    WrapComponent = React.createClass({
-      render: function() {
+    WrapComponent = class extends React.Component {
+      render() {
         return (
           <div>
             {onlyChild(this.props.children, this.props.mapFn, this)}
           </div>
         );
-      },
-    });
+      }
+    };
   });
 
   it('should fail when passed two children', function() {
diff --git a/src/isomorphic/classic/types/__tests__/ReactPropTypes-test.js b/src/isomorphic/classic/types/__tests__/ReactPropTypes-test.js
index bee48f5407868..6f36dc542084c 100644
--- a/src/isomorphic/classic/types/__tests__/ReactPropTypes-test.js
+++ b/src/isomorphic/classic/types/__tests__/ReactPropTypes-test.js
@@ -340,15 +340,15 @@ describe('ReactPropTypes', function() {
 
   describe('Component Type', function() {
     beforeEach(function() {
-      Component = React.createClass({
-        propTypes: {
+      Component = class extends React.Component {
+        static propTypes = {
           label: PropTypes.element.isRequired,
-        },
+        };
 
-        render: function() {
+        render() {
           return <div>{this.props.label}</div>;
-        },
-      });
+        }
+      };
     });
 
     it('should support components', () => {
@@ -513,11 +513,11 @@ describe('ReactPropTypes', function() {
 
   describe('React Component Types', function() {
     beforeEach(function() {
-      MyComponent = React.createClass({
-        render: function() {
+      MyComponent = class extends React.Component {
+        render() {
           return <div />;
-        },
-      });
+        }
+      };
     });
 
     it('should warn for invalid values', function() {
@@ -1048,13 +1048,13 @@ describe('ReactPropTypes', function() {
 
     it('should have been called with the right params', function() {
       var spy = jasmine.createSpy();
-      Component = React.createClass({
-        propTypes: {num: spy},
+      Component = class extends React.Component {
+        static propTypes = {num: spy};
 
-        render: function() {
+        render() {
           return <div />;
-        },
-      });
+        }
+      };
 
       var instance = <Component num={5} />;
       instance = ReactTestUtils.renderIntoDocument(instance);
@@ -1065,13 +1065,13 @@ describe('ReactPropTypes', function() {
 
     it('should have been called even if the prop is not present', function() {
       var spy = jasmine.createSpy();
-      Component = React.createClass({
-        propTypes: {num: spy},
+      Component = class extends React.Component {
+        static propTypes = {num: spy};
 
-        render: function() {
+        render() {
           return <div />;
-        },
-      });
+        }
+      };
 
       var instance = <Component bla={5} />;
       instance = ReactTestUtils.renderIntoDocument(instance);
@@ -1089,13 +1089,13 @@ describe('ReactPropTypes', function() {
           }
         }
       );
-      Component = React.createClass({
-        propTypes: {num: spy},
+      Component = class extends React.Component {
+        static propTypes = {num: spy};
 
-        render: function() {
+        render() {
           return <div />;
-        },
-      });
+        }
+      };
 
       var instance = <Component num={6} />;
       instance = ReactTestUtils.renderIntoDocument(instance);
@@ -1116,13 +1116,13 @@ describe('ReactPropTypes', function() {
             return null;
           }
         );
-        Component = React.createClass({
-          propTypes: {num: spy},
+        Component = class extends React.Component {
+          static propTypes = {num: spy};
 
-          render: function() {
+          render() {
             return <div />;
-          },
-        });
+          }
+        };
 
         var instance = <Component num={5} />;
         instance = ReactTestUtils.renderIntoDocument(instance);
diff --git a/src/renderers/art/__tests__/ReactART-test.js b/src/renderers/art/__tests__/ReactART-test.js
index 546a3cf296038..173bd3453fafa 100644
--- a/src/renderers/art/__tests__/ReactART-test.js
+++ b/src/renderers/art/__tests__/ReactART-test.js
@@ -60,8 +60,8 @@ describe('ReactART', function() {
     Shape = ReactART.Shape;
     Surface = ReactART.Surface;
 
-    TestComponent = React.createClass({
-      render: function() {
+    TestComponent = class extends React.Component {
+      render() {
 
         var a =
           <Shape
@@ -96,7 +96,7 @@ describe('ReactART', function() {
           </Surface>
         );
       }
-    });
+    };
   });
 
   it('should have the correct lifecycle state', function() {
@@ -185,16 +185,16 @@ describe('ReactART', function() {
   it('should be able to reorder many components', function() {
     var container = document.createElement('div');
 
-    var Component = React.createClass({
-      render: function() {
+    class Component extends React.Component {
+      render() {
         var chars = this.props.chars.split('');
         return (
           <Surface>
             {chars.map((text) => <Shape key={text} title={text} />)}
           </Surface>
         );
-      },
-    });
+      }
+    }
 
     // Mini multi-child stress test: lots of reorders, some adds, some removes.
     var before = 'abcdefghijklmnopqrst';
@@ -212,14 +212,17 @@ describe('ReactART', function() {
 
   it('renders composite with lifecycle inside group', function() {
     var mounted = false;
-    var CustomShape = React.createClass({
-      render: function() {
+
+    class CustomShape extends React.Component {
+      render() {
         return <Shape />;
-      },
-      componentDidMount: function() {
+      }
+
+      componentDidMount() {
         mounted = true;
       }
-    });
+    }
+
     ReactTestUtils.renderIntoDocument(
       <Surface>
         <Group>
@@ -231,17 +234,20 @@ describe('ReactART', function() {
   });
 
   it('resolves refs before componentDidMount', function() {
-    var CustomShape = React.createClass({
-      render: function() {
+    class CustomShape extends React.Component {
+      render() {
         return <Shape />;
       }
-    });
+    }
+
     var ref = null;
-    var Outer = React.createClass({
-      componentDidMount: function() {
+
+    class Outer extends React.Component {
+      componentDidMount() {
         ref = this.refs.test;
-      },
-      render: function() {
+      }
+
+      render() {
         return (
           <Surface>
             <Group>
@@ -250,26 +256,31 @@ describe('ReactART', function() {
           </Surface>
         );
       }
-    });
+    }
+
     ReactTestUtils.renderIntoDocument(<Outer />);
     expect(ref.constructor).toBe(CustomShape);
   });
 
   it('resolves refs before componentDidUpdate', function() {
-    var CustomShape = React.createClass({
-      render: function() {
+    class CustomShape extends React.Component {
+      render() {
         return <Shape />;
       }
-    });
+    }
+
     var ref = {};
-    var Outer = React.createClass({
-      componentDidMount: function() {
+
+    class Outer extends React.Component {
+      componentDidMount() {
         ref = this.refs.test;
-      },
-      componentDidUpdate: function() {
+      }
+
+      componentDidUpdate() {
         ref = this.refs.test;
-      },
-      render: function() {
+      }
+
+      render() {
         return (
           <Surface>
             <Group>
@@ -278,7 +289,8 @@ describe('ReactART', function() {
           </Surface>
         );
       }
-    });
+    }
+
     var container = document.createElement('div');
     ReactDOM.render(<Outer />, container);
     expect(ref).not.toBeDefined();
diff --git a/src/renderers/dom/__tests__/ReactDOMProduction-test.js b/src/renderers/dom/__tests__/ReactDOMProduction-test.js
index 2704f15767631..a50e7eedc01af 100644
--- a/src/renderers/dom/__tests__/ReactDOMProduction-test.js
+++ b/src/renderers/dom/__tests__/ReactDOMProduction-test.js
@@ -49,11 +49,11 @@ describe('ReactDOMProduction', function() {
   });
 
   it('should handle a simple flow', function() {
-    var Component = React.createClass({
-      render: function() {
+    class Component extends React.Component {
+      render() {
         return <span>{this.props.children}</span>;
-      },
-    });
+      }
+    }
 
     var container = document.createElement('div');
     var inst = ReactDOM.render(
@@ -88,11 +88,12 @@ describe('ReactDOMProduction', function() {
 
   it('should throw with an error code in production', function() {
     expect(function() {
-      var Component = React.createClass({
-        render: function() {
+      class Component extends React.Component {
+        render() {
           return ['this is wrong'];
-        },
-      });
+        }
+      }
+
       var container = document.createElement('div');
       ReactDOM.render(<Component />, container);
     }).toThrowError(
diff --git a/src/renderers/dom/client/__tests__/ReactDOM-test.js b/src/renderers/dom/client/__tests__/ReactDOM-test.js
index 4576cf9c8a7f1..86d85f8dbe043 100644
--- a/src/renderers/dom/client/__tests__/ReactDOM-test.js
+++ b/src/renderers/dom/client/__tests__/ReactDOM-test.js
@@ -123,14 +123,14 @@ describe('ReactDOM', function() {
       this.a = 1;
       this.b = 2;
     }
-    var A = React.createClass({
-      getInitialState: function() {
-        return {};
-      },
-      render: function() {
+
+    class A extends React.Component {
+      state = {};
+
+      render() {
         return <div />;
-      },
-    });
+      }
+    }
 
     var myDiv = document.createElement('div');
     expect(() => ReactDOM.render(<A />, myDiv, 'no')).toThrowError(
@@ -152,14 +152,14 @@ describe('ReactDOM', function() {
       this.a = 1;
       this.b = 2;
     }
-    var A = React.createClass({
-      getInitialState: function() {
-        return {};
-      },
-      render: function() {
+
+    class A extends React.Component {
+      state = {};
+
+      render() {
         return <div />;
-      },
-    });
+      }
+    }
 
     var myDiv = document.createElement('div');
     ReactDOM.render(<A />, myDiv);
diff --git a/src/renderers/dom/client/__tests__/ReactDOMComponentTree-test.js b/src/renderers/dom/client/__tests__/ReactDOMComponentTree-test.js
index 89ec35d58e75f..77d822c795a4d 100644
--- a/src/renderers/dom/client/__tests__/ReactDOMComponentTree-test.js
+++ b/src/renderers/dom/client/__tests__/ReactDOMComponentTree-test.js
@@ -35,8 +35,8 @@ describe('ReactDOMComponentTree', function() {
     // This is a little hard to test directly. But refs rely on it -- so we
     // check that we can find a ref at arbitrary points in the tree, even if
     // other nodes don't have a ref.
-    var Component = React.createClass({
-      render: function() {
+    class Component extends React.Component {
+      render() {
         var toRef = this.props.toRef;
         return (
           <div ref={toRef === 'div' ? 'target' : null}>
@@ -47,8 +47,8 @@ describe('ReactDOMComponentTree', function() {
             goodbye.
           </div>
         );
-      },
-    });
+      }
+    }
 
     function renderAndGetRef(toRef) {
       var inst = renderMarkupIntoDocument(<Component toRef={toRef} />);
@@ -62,8 +62,8 @@ describe('ReactDOMComponentTree', function() {
   });
 
   it('finds instances for nodes', function() {
-    var Component = React.createClass({
-      render: function() {
+    class Component extends React.Component {
+      render() {
         return (
           <div>
             <h1>hello</h1>
@@ -74,8 +74,8 @@ describe('ReactDOMComponentTree', function() {
             <main dangerouslySetInnerHTML={{__html: '<b><img></b>'}} />
           </div>
         );
-      },
-    });
+      }
+    }
 
     function renderAndQuery(sel) {
       var root = renderMarkupIntoDocument(<section><Component /></section>);
diff --git a/src/renderers/dom/client/__tests__/ReactDOMTreeTraversal-test.js b/src/renderers/dom/client/__tests__/ReactDOMTreeTraversal-test.js
index 888e17d1596c9..a3c88d48d5809 100644
--- a/src/renderers/dom/client/__tests__/ReactDOMTreeTraversal-test.js
+++ b/src/renderers/dom/client/__tests__/ReactDOMTreeTraversal-test.js
@@ -21,19 +21,19 @@ var ReactTestUtils = require('ReactTestUtils');
 var ARG = {arg: true};
 var ARG2 = {arg2: true};
 
-var ChildComponent = React.createClass({
-  render: function() {
+class ChildComponent extends React.Component {
+  render() {
     return (
       <div ref="DIV">
         <div ref="DIV_1" />
         <div ref="DIV_2" />
       </div>
     );
-  },
-});
+  }
+}
 
-var ParentComponent = React.createClass({
-  render: function() {
+class ParentComponent extends React.Component {
+  render() {
     return (
       <div ref="P">
         <div ref="P_P1">
@@ -43,8 +43,8 @@ var ParentComponent = React.createClass({
         <div ref="P_OneOff" />
       </div>
     );
-  },
-});
+  }
+}
 
 function renderParentIntoDocument() {
   return ReactTestUtils.renderIntoDocument(<ParentComponent />);
diff --git a/src/renderers/dom/client/__tests__/ReactEventListener-test.js b/src/renderers/dom/client/__tests__/ReactEventListener-test.js
index 049284f8f7054..b29d07b1900fd 100644
--- a/src/renderers/dom/client/__tests__/ReactEventListener-test.js
+++ b/src/renderers/dom/client/__tests__/ReactEventListener-test.js
@@ -184,18 +184,16 @@ describe('ReactEventListener', function() {
   });
 
   it('should not fire duplicate events for a React DOM tree', function() {
-    var Wrapper = React.createClass({
-
-      getInner: function() {
+    class Wrapper extends React.Component {
+      getInner = () => {
         return this.refs.inner;
-      },
+      };
 
-      render: function() {
+      render() {
         var inner = <div ref="inner">Inner</div>;
         return <div><div id="outer">{inner}</div></div>;
-      },
-
-    });
+      }
+    }
 
     var instance = ReactTestUtils.renderIntoDocument(<Wrapper />);
 
diff --git a/src/renderers/dom/client/__tests__/ReactMount-test.js b/src/renderers/dom/client/__tests__/ReactMount-test.js
index b72a26dec551f..3b79e8cc71ed2 100644
--- a/src/renderers/dom/client/__tests__/ReactMount-test.js
+++ b/src/renderers/dom/client/__tests__/ReactMount-test.js
@@ -60,11 +60,12 @@ describe('ReactMount', function() {
   });
 
   it('throws when given a factory', function() {
-    var Component = React.createClass({
-      render: function() {
+    class Component extends React.Component {
+      render() {
         return <div />;
-      },
-    });
+      }
+    }
+
     expect(function() {
       ReactTestUtils.renderIntoDocument(Component);
     }).toThrowError(
@@ -206,11 +207,13 @@ describe('ReactMount', function() {
 
   it('should warn if render removes React-rendered children', function() {
     var container = document.createElement('container');
-    var Component = React.createClass({
-      render: function() {
+
+    class Component extends React.Component {
+      render() {
         return <div><div /></div>;
-      },
-    });
+      }
+    }
+
     ReactDOM.render(<Component />, container);
 
     // Test that blasting away children throws a warning
@@ -281,17 +284,17 @@ describe('ReactMount', function() {
   it('marks top-level mounts', function() {
     var ReactFeatureFlags = require('ReactFeatureFlags');
 
-    var Foo = React.createClass({
-      render: function() {
+    class Foo extends React.Component {
+      render() {
         return <Bar />;
-      },
-    });
+      }
+    }
 
-    var Bar = React.createClass({
-      render: function() {
+    class Bar extends React.Component {
+      render() {
         return <div />;
-      },
-    });
+      }
+    }
 
     try {
       ReactFeatureFlags.logTopLevelRenders = true;
diff --git a/src/renderers/dom/client/__tests__/ReactRenderDocument-test.js b/src/renderers/dom/client/__tests__/ReactRenderDocument-test.js
index 6f2b5d3c2d763..496f0ce4e21ce 100644
--- a/src/renderers/dom/client/__tests__/ReactRenderDocument-test.js
+++ b/src/renderers/dom/client/__tests__/ReactRenderDocument-test.js
@@ -41,8 +41,8 @@ describe('rendering React components at document', function() {
   it('should be able to adopt server markup', function() {
     expect(testDocument).not.toBeUndefined();
 
-    var Root = React.createClass({
-      render: function() {
+    class Root extends React.Component {
+      render() {
         return (
           <html>
             <head>
@@ -53,8 +53,8 @@ describe('rendering React components at document', function() {
             </body>
           </html>
         );
-      },
-    });
+      }
+    }
 
     var markup = ReactDOMServer.renderToString(<Root hello="world" />);
     testDocument = getTestDocument(markup);
@@ -72,8 +72,8 @@ describe('rendering React components at document', function() {
   it('should not be able to unmount component from document node', function() {
     expect(testDocument).not.toBeUndefined();
 
-    var Root = React.createClass({
-      render: function() {
+    class Root extends React.Component {
+      render() {
         return (
           <html>
             <head>
@@ -84,8 +84,8 @@ describe('rendering React components at document', function() {
             </body>
           </html>
         );
-      },
-    });
+      }
+    }
 
     var markup = ReactDOMServer.renderToString(<Root />);
     testDocument = getTestDocument(markup);
@@ -102,8 +102,8 @@ describe('rendering React components at document', function() {
   it('should not be able to switch root constructors', function() {
     expect(testDocument).not.toBeUndefined();
 
-    var Component = React.createClass({
-      render: function() {
+    class Component extends React.Component {
+      render() {
         return (
           <html>
             <head>
@@ -114,11 +114,11 @@ describe('rendering React components at document', function() {
             </body>
           </html>
         );
-      },
-    });
+      }
+    }
 
-    var Component2 = React.createClass({
-      render: function() {
+    class Component2 extends React.Component {
+      render() {
         return (
           <html>
             <head>
@@ -129,8 +129,8 @@ describe('rendering React components at document', function() {
             </body>
           </html>
         );
-      },
-    });
+      }
+    }
 
     var markup = ReactDOMServer.renderToString(<Component />);
     testDocument = getTestDocument(markup);
@@ -150,8 +150,8 @@ describe('rendering React components at document', function() {
   it('should be able to mount into document', function() {
     expect(testDocument).not.toBeUndefined();
 
-    var Component = React.createClass({
-      render: function() {
+    class Component extends React.Component {
+      render() {
         return (
           <html>
             <head>
@@ -162,8 +162,8 @@ describe('rendering React components at document', function() {
             </body>
           </html>
         );
-      },
-    });
+      }
+    }
 
     var markup = ReactDOMServer.renderToString(
       <Component text="Hello world" />
@@ -178,8 +178,8 @@ describe('rendering React components at document', function() {
   it('should give helpful errors on state desync', function() {
     expect(testDocument).not.toBeUndefined();
 
-    var Component = React.createClass({
-      render: function() {
+    class Component extends React.Component {
+      render() {
         return (
           <html>
             <head>
@@ -190,8 +190,8 @@ describe('rendering React components at document', function() {
             </body>
           </html>
         );
-      },
-    });
+      }
+    }
 
     var markup = ReactDOMServer.renderToString(
       <Component text="Goodbye world" />
@@ -220,8 +220,8 @@ describe('rendering React components at document', function() {
 
     var container = testDocument;
 
-    var Component = React.createClass({
-      render: function() {
+    class Component extends React.Component {
+      render() {
         return (
           <html>
             <head>
@@ -232,8 +232,8 @@ describe('rendering React components at document', function() {
             </body>
           </html>
         );
-      },
-    });
+      }
+    }
 
     expect(function() {
       ReactDOM.render(<Component />, container);
diff --git a/src/renderers/dom/client/__tests__/findDOMNode-test.js b/src/renderers/dom/client/__tests__/findDOMNode-test.js
index 185e67c516fd7..6c3b35da0664f 100644
--- a/src/renderers/dom/client/__tests__/findDOMNode-test.js
+++ b/src/renderers/dom/client/__tests__/findDOMNode-test.js
@@ -21,11 +21,11 @@ describe('findDOMNode', function() {
   });
 
   it('findDOMNode should find dom element', function() {
-    var MyNode = React.createClass({
-      render: function() {
+    class MyNode extends React.Component {
+      render() {
         return <div><span>Noise</span></div>;
-      },
-    });
+      }
+    }
 
     var myNode = ReactTestUtils.renderIntoDocument(<MyNode />);
     var myDiv = ReactDOM.findDOMNode(myNode);
@@ -43,11 +43,11 @@ describe('findDOMNode', function() {
   });
 
   it('findDOMNode should reject unmounted objects with render func', function() {
-    var Foo = React.createClass({
-      render: function() {
+    class Foo extends React.Component {
+      render() {
         return <div />;
-      },
-    });
+      }
+    }
 
     var container = document.createElement('div');
     var inst = ReactDOM.render(<Foo />, container);
@@ -59,14 +59,15 @@ describe('findDOMNode', function() {
   });
 
   it('findDOMNode should not throw an error when called within a component that is not mounted', function() {
-    var Bar = React.createClass({
-      componentWillMount: function() {
+    class Bar extends React.Component {
+      componentWillMount() {
         expect(ReactDOM.findDOMNode(this)).toBeNull();
-      },
-      render: function() {
+      }
+
+      render() {
         return <div/>;
-      },
-    });
+      }
+    }
 
     expect(() => ReactTestUtils.renderIntoDocument(<Bar/>)).not.toThrow();
   });
diff --git a/src/renderers/dom/client/eventPlugins/__tests__/SelectEventPlugin-test.js b/src/renderers/dom/client/eventPlugins/__tests__/SelectEventPlugin-test.js
index 46e21b96ce164..facf2f7a3076f 100644
--- a/src/renderers/dom/client/eventPlugins/__tests__/SelectEventPlugin-test.js
+++ b/src/renderers/dom/client/eventPlugins/__tests__/SelectEventPlugin-test.js
@@ -42,11 +42,11 @@ describe('SelectEventPlugin', function() {
   });
 
   it('should skip extraction if no listeners are present', function() {
-    var WithoutSelect = React.createClass({
-      render: function() {
+    class WithoutSelect extends React.Component {
+      render() {
         return <input type="text" />;
-      },
-    });
+      }
+    }
 
     var rendered = ReactTestUtils.renderIntoDocument(<WithoutSelect />);
     var node = ReactDOM.findDOMNode(rendered);
@@ -60,11 +60,11 @@ describe('SelectEventPlugin', function() {
   });
 
   it('should extract if an `onSelect` listener is present', function() {
-    var WithSelect = React.createClass({
-      render: function() {
+    class WithSelect extends React.Component {
+      render() {
         return <input type="text" onSelect={this.props.onSelect} />;
-      },
-    });
+      }
+    }
 
     var cb = jest.fn();
 
diff --git a/src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js b/src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js
index 9d179ac35cee0..d9960a8895929 100644
--- a/src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js
+++ b/src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js
@@ -272,8 +272,8 @@ describe('ReactDOMInput', function() {
   });
 
   it('should control radio buttons', function() {
-    var RadioGroup = React.createClass({
-      render: function() {
+    class RadioGroup extends React.Component {
+      render() {
         return (
           <div>
             <input
@@ -301,8 +301,8 @@ describe('ReactDOMInput', function() {
             </form>
           </div>
         );
-      },
-    });
+      }
+    }
 
     var stub = ReactTestUtils.renderIntoDocument(<RadioGroup />);
     var aNode = ReactDOM.findDOMNode(stub.refs.a);
diff --git a/src/renderers/dom/server/__tests__/ReactServerRendering-test.js b/src/renderers/dom/server/__tests__/ReactServerRendering-test.js
index cd5d30f7f686d..e552678c8a6c4 100644
--- a/src/renderers/dom/server/__tests__/ReactServerRendering-test.js
+++ b/src/renderers/dom/server/__tests__/ReactServerRendering-test.js
@@ -75,11 +75,12 @@ describe('ReactServerRendering', function() {
     });
 
     it('should generate comment markup for component returns null', function() {
-      var NullComponent = React.createClass({
-        render: function() {
+      class NullComponent extends React.Component {
+        render() {
           return null;
-        },
-      });
+        }
+      }
+
       var response = ReactServerRendering.renderToString(<NullComponent />);
       expect(response).toBe('<!-- react-empty: 1 -->');
     });
@@ -95,16 +96,18 @@ describe('ReactServerRendering', function() {
     });
 
     it('should render composite components', function() {
-      var Parent = React.createClass({
-        render: function() {
+      class Parent extends React.Component {
+        render() {
           return <div><Child name="child" /></div>;
-        },
-      });
-      var Child = React.createClass({
-        render: function() {
+        }
+      }
+
+      class Child extends React.Component {
+        render() {
           return <span>My name is {this.props.name}</span>;
-        },
-      });
+        }
+      }
+
       var response = ReactServerRendering.renderToString(
         <Parent />
       );
@@ -123,37 +126,47 @@ describe('ReactServerRendering', function() {
     it('should only execute certain lifecycle methods', function() {
       function runTest() {
         var lifecycle = [];
-        var TestComponent = React.createClass({
-          componentWillMount: function() {
+
+        class TestComponent extends React.Component {
+          constructor(props) {
+            super(props);
+            lifecycle.push('getInitialState');
+            this.state = {name: 'TestComponent'};
+          }
+
+          componentWillMount() {
             lifecycle.push('componentWillMount');
-          },
-          componentDidMount: function() {
+          }
+
+          componentDidMount() {
             lifecycle.push('componentDidMount');
-          },
-          getInitialState: function() {
-            lifecycle.push('getInitialState');
-            return {name: 'TestComponent'};
-          },
-          render: function() {
+          }
+
+          render() {
             lifecycle.push('render');
             return <span>Component name: {this.state.name}</span>;
-          },
-          componentWillUpdate: function() {
+          }
+
+          componentWillUpdate() {
             lifecycle.push('componentWillUpdate');
-          },
-          componentDidUpdate: function() {
+          }
+
+          componentDidUpdate() {
             lifecycle.push('componentDidUpdate');
-          },
-          shouldComponentUpdate: function() {
+          }
+
+          shouldComponentUpdate() {
             lifecycle.push('shouldComponentUpdate');
-          },
-          componentWillReceiveProps: function() {
+          }
+
+          componentWillReceiveProps() {
             lifecycle.push('componentWillReceiveProps');
-          },
-          componentWillUnmount: function() {
+          }
+
+          componentWillUnmount() {
             lifecycle.push('componentWillUnmount');
-          },
-        });
+          }
+        }
 
         var response = ReactServerRendering.renderToString(
           <TestComponent />
@@ -186,19 +199,21 @@ describe('ReactServerRendering', function() {
       var mountCount = 0;
       var numClicks = 0;
 
-      var TestComponent = React.createClass({
-        componentDidMount: function() {
+      class TestComponent extends React.Component {
+        componentDidMount() {
           mountCount++;
-        },
-        click: function() {
+        }
+
+        click = () => {
           numClicks++;
-        },
-        render: function() {
+        };
+
+        render() {
           return (
             <span ref="span" onClick={this.click}>Name: {this.props.name}</span>
           );
-        },
-      });
+        }
+      }
 
       var element = document.createElement('div');
       ReactDOM.render(<TestComponent />, element);
@@ -274,17 +289,17 @@ describe('ReactServerRendering', function() {
 
   describe('renderToStaticMarkup', function() {
     it('should not put checksum and React ID on components', function() {
-      var NestedComponent = React.createClass({
-        render: function() {
+      class NestedComponent extends React.Component {
+        render() {
           return <div>inner text</div>;
-        },
-      });
+        }
+      }
 
-      var TestComponent = React.createClass({
-        render: function() {
+      class TestComponent extends React.Component {
+        render() {
           return <span><NestedComponent /></span>;
-        },
-      });
+        }
+      }
 
       var response = ReactServerRendering.renderToStaticMarkup(
         <TestComponent />
@@ -294,11 +309,11 @@ describe('ReactServerRendering', function() {
     });
 
     it('should not put checksum and React ID on text components', function() {
-      var TestComponent = React.createClass({
-        render: function() {
+      class TestComponent extends React.Component {
+        render() {
           return <span>{'hello'} {'world'}</span>;
-        },
-      });
+        }
+      }
 
       var response = ReactServerRendering.renderToStaticMarkup(
         <TestComponent />
@@ -320,37 +335,47 @@ describe('ReactServerRendering', function() {
     it('should only execute certain lifecycle methods', function() {
       function runTest() {
         var lifecycle = [];
-        var TestComponent = React.createClass({
-          componentWillMount: function() {
+
+        class TestComponent extends React.Component {
+          constructor(props) {
+            super(props);
+            lifecycle.push('getInitialState');
+            this.state = {name: 'TestComponent'};
+          }
+
+          componentWillMount() {
             lifecycle.push('componentWillMount');
-          },
-          componentDidMount: function() {
+          }
+
+          componentDidMount() {
             lifecycle.push('componentDidMount');
-          },
-          getInitialState: function() {
-            lifecycle.push('getInitialState');
-            return {name: 'TestComponent'};
-          },
-          render: function() {
+          }
+
+          render() {
             lifecycle.push('render');
             return <span>Component name: {this.state.name}</span>;
-          },
-          componentWillUpdate: function() {
+          }
+
+          componentWillUpdate() {
             lifecycle.push('componentWillUpdate');
-          },
-          componentDidUpdate: function() {
+          }
+
+          componentDidUpdate() {
             lifecycle.push('componentDidUpdate');
-          },
-          shouldComponentUpdate: function() {
+          }
+
+          shouldComponentUpdate() {
             lifecycle.push('shouldComponentUpdate');
-          },
-          componentWillReceiveProps: function() {
+          }
+
+          componentWillReceiveProps() {
             lifecycle.push('componentWillReceiveProps');
-          },
-          componentWillUnmount: function() {
+          }
+
+          componentWillUnmount() {
             lifecycle.push('componentWillUnmount');
-          },
-        });
+          }
+        }
 
         var response = ReactServerRendering.renderToStaticMarkup(
           <TestComponent />
@@ -381,14 +406,15 @@ describe('ReactServerRendering', function() {
     });
 
     it('allows setState in componentWillMount without using DOM', function() {
-      var Component = React.createClass({
-        componentWillMount: function() {
+      class Component extends React.Component {
+        componentWillMount() {
           this.setState({text: 'hello, world'});
-        },
-        render: function() {
+        }
+
+        render() {
           return <div>{this.state.text}</div>;
-        },
-      });
+        }
+      }
 
       ReactReconcileTransaction.prototype.perform = function() {
         // We shouldn't ever be calling this on the server
@@ -401,25 +427,27 @@ describe('ReactServerRendering', function() {
     });
 
     it('renders components with different batching strategies', function() {
-      var StaticComponent = React.createClass({
-        render: function() {
+      class StaticComponent extends React.Component {
+        render() {
           const staticContent = ReactServerRendering.renderToStaticMarkup(
             <div>
               <img src="foo-bar.jpg" />
             </div>
           );
           return <div dangerouslySetInnerHTML={{__html: staticContent}} />;
-        },
-      });
+        }
+      }
 
-      var Component = React.createClass({
-        componentWillMount: function() {
+      class Component extends React.Component {
+        componentWillMount() {
           this.setState({text: 'hello, world'});
-        },
-        render: function() {
+        }
+
+        render() {
           return <div>{this.state.text}</div>;
-        },
-      });
+        }
+      }
+
       expect(
         ReactServerRendering.renderToString.bind(
           ReactServerRendering,
@@ -485,17 +513,18 @@ describe('ReactServerRendering', function() {
   });
 
   it('warns with a no-op when an async forceUpdate is triggered', function() {
-    var Baz = React.createClass({
-      componentWillMount: function() {
+    class Baz extends React.Component {
+      componentWillMount() {
         this.forceUpdate();
         setTimeout(() => {
           this.forceUpdate();
         });
-      },
-      render: function() {
+      }
+
+      render() {
         return <div onClick={() => {}}></div>;
-      },
-    });
+      }
+    }
 
     spyOn(console, 'error');
     ReactServerRendering.renderToString(<Baz />);
diff --git a/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js b/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js
index e7ba52c84366d..4284cea209765 100644
--- a/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js
+++ b/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js
@@ -108,12 +108,14 @@ describe('CSSPropertyOperations', function() {
   });
 
   it('should warn when using hyphenated style names', function() {
-    var Comp = React.createClass({
-      displayName: 'Comp',
-      render: function() {
+    class Comp extends React.Component {
+      static displayName = 'Comp';
+
+      render() {
         return <div style={{ 'background-color': 'crimson' }}/>;
-      },
-    });
+      }
+    }
+
     spyOn(console, 'error');
     var root = document.createElement('div');
     ReactDOM.render(<Comp />, root);
@@ -125,12 +127,14 @@ describe('CSSPropertyOperations', function() {
   });
 
   it('should warn when updating hyphenated style names', function() {
-    var Comp = React.createClass({
-      displayName: 'Comp',
-      render: function() {
+    class Comp extends React.Component {
+      static displayName = 'Comp';
+
+      render() {
         return <div style={this.props.style} />;
-      },
-    });
+      }
+    }
+
     spyOn(console, 'error');
     var styles = {
       '-ms-transform': 'translate3d(0, 0, 0)',
@@ -152,16 +156,18 @@ describe('CSSPropertyOperations', function() {
   });
 
   it('warns when miscapitalizing vendored style names', function() {
-    var Comp = React.createClass({
-      displayName: 'Comp',
-      render: function() {
+    class Comp extends React.Component {
+      static displayName = 'Comp';
+
+      render() {
         return (<div style={{
           msTransform: 'translate3d(0, 0, 0)',
           oTransform: 'translate3d(0, 0, 0)',
           webkitTransform: 'translate3d(0, 0, 0)',
         }} />);
-      },
-    });
+      }
+    }
+
     spyOn(console, 'error');
     var root = document.createElement('div');
     ReactDOM.render(<Comp />, root);
@@ -178,17 +184,19 @@ describe('CSSPropertyOperations', function() {
   });
 
   it('should warn about style having a trailing semicolon', function() {
-    var Comp = React.createClass({
-      displayName: 'Comp',
-      render: function() {
+    class Comp extends React.Component {
+      static displayName = 'Comp';
+
+      render() {
         return (<div style={{
           fontFamily: 'Helvetica, arial',
           backgroundImage: 'url(foo;bar)',
           backgroundColor: 'blue;',
           color: 'red;   ',
         }} />);
-      },
-    });
+      }
+    }
+
     spyOn(console, 'error');
     var root = document.createElement('div');
     ReactDOM.render(<Comp />, root);
@@ -204,12 +212,14 @@ describe('CSSPropertyOperations', function() {
   });
 
   it('should warn about style containing a NaN value', function() {
-    var Comp = React.createClass({
-      displayName: 'Comp',
-      render: function() {
+    class Comp extends React.Component {
+      static displayName = 'Comp';
+
+      render() {
         return <div style={{ fontSize: NaN }}/>;
-      },
-    });
+      }
+    }
+
     spyOn(console, 'error');
     var root = document.createElement('div');
     ReactDOM.render(<Comp />, root);
diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
index 41700fb0f6939..c2ccb39c2cec4 100644
--- a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+++ b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
@@ -114,14 +114,14 @@ describe('ReactDOMComponent', function() {
       spyOn(console, 'error');
 
       var style = {border: '1px solid black'};
-      var App = React.createClass({
-        getInitialState: function() {
-          return {style: style};
-        },
-        render: function() {
+
+      class App extends React.Component {
+        state = {style: style};
+
+        render() {
           return <div style={this.state.style}>asd</div>;
-        },
-      });
+        }
+      }
 
       var stub = ReactTestUtils.renderIntoDocument(<App />);
       style.position = 'absolute';
@@ -227,11 +227,12 @@ describe('ReactDOMComponent', function() {
 
     it('should not warn for "0" as a unitless style value', function() {
       spyOn(console, 'error');
-      var Component = React.createClass({
-        render: function() {
+
+      class Component extends React.Component {
+        render() {
           return <div style={{margin: '0'}} />;
-        },
-      });
+        }
+      }
 
       ReactTestUtils.renderIntoDocument(<Component />);
       expect(console.error.calls.count()).toBe(0);
@@ -796,11 +797,12 @@ describe('ReactDOMComponent', function() {
     });
 
     it('should not duplicate uppercased selfclosing tags', function() {
-      var Container = React.createClass({
-        render: function() {
+      class Container extends React.Component {
+        render() {
           return React.createElement('BR', null);
-        },
-      });
+        }
+      }
+
       var returnedValue = ReactDOMServer.renderToString(<Container/>);
       expect(returnedValue).not.toContain('</BR>');
     });
@@ -967,11 +969,11 @@ describe('ReactDOMComponent', function() {
     });
 
     it('should warn for children on void elements', function() {
-      var X = React.createClass({
-        render: function() {
+      class X extends React.Component {
+        render() {
           return <input>moo</input>;
-        },
-      });
+        }
+      }
 
       var container = document.createElement('div');
       expect(function() {
@@ -1062,11 +1064,11 @@ describe('ReactDOMComponent', function() {
     });
 
     it('should report component containing invalid styles', function() {
-      var Animal = React.createClass({
-        render: function() {
+      class Animal extends React.Component {
+        render() {
           return <div style={1}></div>;
-        },
-      });
+        }
+      }
 
       expect(function() {
         ReactDOM.render(<Animal/>, container);
@@ -1122,15 +1124,16 @@ describe('ReactDOMComponent', function() {
     });
 
     it('unmounts children before unsetting DOM node info', function() {
-      var Inner = React.createClass({
-        render: function() {
+      class Inner extends React.Component {
+        render() {
           return <span />;
-        },
-        componentWillUnmount: function() {
+        }
+
+        componentWillUnmount() {
           // Should not throw
           expect(ReactDOM.findDOMNode(this).nodeName).toBe('SPAN');
-        },
-      });
+        }
+      }
 
       var container = document.createElement('div');
       ReactDOM.render(<div><Inner /></div>, container);
@@ -1218,16 +1221,19 @@ describe('ReactDOMComponent', function() {
 
     it('warns nicely for table rows', () => {
       spyOn(console, 'error');
-      var Row = React.createClass({
-        render: function() {
+
+      class Row extends React.Component {
+        render() {
           return <tr />;
-        },
-      });
-      var Foo = React.createClass({
-        render: function() {
+        }
+      }
+
+      class Foo extends React.Component {
+        render() {
           return <table><Row /> </table>;
-        },
-      });
+        }
+      }
+
       ReactTestUtils.renderIntoDocument(<Foo />);
 
       expect(console.error.calls.count()).toBe(2);
@@ -1250,16 +1256,18 @@ describe('ReactDOMComponent', function() {
       var FancyRow = React.createClass({
         render: () => <Row />,
       });
-      var Table = React.createClass({
-        render: function() {
+
+      class Table extends React.Component {
+        render() {
           return <table>{this.props.children}</table>;
-        },
-      });
-      var FancyTable = React.createClass({
-        render: function() {
+        }
+      }
+
+      class FancyTable extends React.Component {
+        render() {
           return <Table>{this.props.children}</Table>;
-        },
-      });
+        }
+      }
 
       var Viz1 = React.createClass({
         render: () => <table><FancyRow /></table>,
@@ -1303,11 +1311,12 @@ describe('ReactDOMComponent', function() {
         'See FancyTable > Table > table > tr.'
       );
 
-      var Link = React.createClass({
-        render: function() {
+      class Link extends React.Component {
+        render() {
           return <a>{this.props.children}</a>;
-        },
-      });
+        }
+      }
+
       ReactTestUtils.renderIntoDocument(<Link><div><Link /></div></Link>);
       expect(console.error.calls.count()).toBe(6);
       expect(console.error.calls.argsFor(5)[0]).toContain(
@@ -1433,35 +1442,35 @@ describe('ReactDOMComponent', function() {
       spyOn(console, 'error');
       var container = document.createElement('div');
 
-      var Parent = React.createClass({
-        render: function() {
+      class Parent extends React.Component {
+        render() {
           return <div><Child1 /><Child2 /><Child3 /><Child4 /></div>;
-        },
-      });
+        }
+      }
 
-      var Child1 = React.createClass({
-        render: function() {
+      class Child1 extends React.Component {
+        render() {
           return <div class="paladin">Child1</div>;
-        },
-      });
+        }
+      }
 
-      var Child2 = React.createClass({
-        render: function() {
+      class Child2 extends React.Component {
+        render() {
           return <div>Child2</div>;
-        },
-      });
+        }
+      }
 
-      var Child3 = React.createClass({
-        render: function() {
+      class Child3 extends React.Component {
+        render() {
           return <div onclick="1">Child3</div>;
-        },
-      });
+        }
+      }
 
-      var Child4 = React.createClass({
-        render: function() {
+      class Child4 extends React.Component {
+        render() {
           return <div>Child4</div>;
-        },
-      });
+        }
+      }
 
       ReactDOMServer.renderToString(<Parent />, container);
 
@@ -1478,7 +1487,6 @@ describe('ReactDOMComponent', function() {
       //verify line number has a proper relative difference,
       //since hard coding the line number would make test too brittle
       expect(parseInt(previousLine, 10) + 12).toBe(parseInt(currentLine, 10));
-
     });
   });
 });
diff --git a/src/renderers/shared/__tests__/ReactPerf-test.js b/src/renderers/shared/__tests__/ReactPerf-test.js
index d99b0691bc120..99e5c9494312e 100644
--- a/src/renderers/shared/__tests__/ReactPerf-test.js
+++ b/src/renderers/shared/__tests__/ReactPerf-test.js
@@ -40,24 +40,24 @@ describe('ReactPerf', function() {
     ReactTestUtils = require('ReactTestUtils');
     emptyFunction = require('emptyFunction');
 
-    App = React.createClass({
-      render: function() {
+    App = class extends React.Component {
+      render() {
         return <div><Box /><Box flip={this.props.flipSecond} /></div>;
-      },
-    });
+      }
+    };
 
-    Box = React.createClass({
-      render: function() {
+    Box = class extends React.Component {
+      render() {
         return <div key={!!this.props.flip}><input /></div>;
-      },
-    });
+      }
+    };
 
     // ReactPerf only measures composites, so we put everything in one.
-    Div = React.createClass({
-      render: function() {
+    Div = class extends React.Component {
+      render() {
         return <div {...this.props} />;
-      },
-    });
+      }
+    };
 
     LifeCycle = React.createClass({
       shouldComponentUpdate: emptyFunction.thatReturnsTrue,
@@ -471,24 +471,28 @@ describe('ReactPerf', function() {
 
   it('should work when measurement starts during reconciliation', () => {
     // https://github.com/facebook/react/issues/6949#issuecomment-230371009
-    var Measurer = React.createClass({
+    class Measurer extends React.Component {
       componentWillMount() {
         ReactPerf.start();
-      },
+      }
+
       componentDidMount() {
         ReactPerf.stop();
-      },
+      }
+
       componentWillUpdate() {
         ReactPerf.start();
-      },
+      }
+
       componentDidUpdate() {
         ReactPerf.stop();
-      },
+      }
+
       render() {
         // Force reconciliation despite constant element
         return React.cloneElement(this.props.children);
-      },
-    });
+      }
+    }
 
     var container = document.createElement('div');
     ReactDOM.render(<Measurer><App /></Measurer>, container);
diff --git a/src/renderers/shared/devtools/__tests__/ReactComponentTreeDevtool-test.js b/src/renderers/shared/devtools/__tests__/ReactComponentTreeDevtool-test.js
index 72570809abea8..9df5410652d46 100644
--- a/src/renderers/shared/devtools/__tests__/ReactComponentTreeDevtool-test.js
+++ b/src/renderers/shared/devtools/__tests__/ReactComponentTreeDevtool-test.js
@@ -103,22 +103,26 @@ describe('ReactComponentTreeDevtool', () => {
 
   describe('mount', () => {
     it('uses displayName or Unknown for classic components', () => {
-      var Foo = React.createClass({
+      class Foo extends React.Component {
         render() {
           return null;
-        },
-      });
+        }
+      }
+
       Foo.displayName = 'Bar';
-      var Baz = React.createClass({
+
+      class Baz extends React.Component {
         render() {
           return null;
-        },
-      });
-      var Qux = React.createClass({
+        }
+      }
+
+      class Qux extends React.Component {
         render() {
           return null;
-        },
-      });
+        }
+      }
+
       delete Qux.displayName;
 
       var element = <div><Foo /><Baz /><Qux /></div>;
@@ -306,11 +310,12 @@ describe('ReactComponentTreeDevtool', () => {
     });
 
     it('reports a tree with composites correctly', () => {
-      var Qux = React.createClass({
+      class Qux extends React.Component {
         render() {
           return null;
-        },
-      });
+        }
+      }
+
       function Foo() {
         return {
           render() {
@@ -1361,11 +1366,11 @@ describe('ReactComponentTreeDevtool', () => {
 
     describe('class component', () => {
       it('updates with a host child', () => {
-        var Foo = React.createClass({
+        class Foo extends React.Component {
           render() {
             return this.props.children;
-          },
-        });
+          }
+        }
 
         var elementBefore = <Foo><div /></Foo>;
         var treeBefore = {
@@ -1392,11 +1397,11 @@ describe('ReactComponentTreeDevtool', () => {
       });
 
       it('updates from null to a host child', () => {
-        var Foo = React.createClass({
+        class Foo extends React.Component {
           render() {
             return this.props.children;
-          },
-        });
+          }
+        }
 
         var elementBefore = <Foo>{null}</Foo>;
         var treeBefore = {
@@ -1420,11 +1425,11 @@ describe('ReactComponentTreeDevtool', () => {
       });
 
       it('updates from a host child to null', () => {
-        var Foo = React.createClass({
+        class Foo extends React.Component {
           render() {
             return this.props.children;
-          },
-        });
+          }
+        }
 
         var elementBefore = <Foo><div /></Foo>;
         var treeBefore = {
@@ -1448,17 +1453,17 @@ describe('ReactComponentTreeDevtool', () => {
       });
 
       it('updates from a host child to a composite child', () => {
-        var Bar = React.createClass({
+        class Bar extends React.Component {
           render() {
             return null;
-          },
-        });
+          }
+        }
 
-        var Foo = React.createClass({
+        class Foo extends React.Component {
           render() {
             return this.props.children;
-          },
-        });
+          }
+        }
 
         var elementBefore = <Foo><div /></Foo>;
         var treeBefore = {
@@ -1485,17 +1490,17 @@ describe('ReactComponentTreeDevtool', () => {
       });
 
       it('updates from a composite child to a host child', () => {
-        var Bar = React.createClass({
+        class Bar extends React.Component {
           render() {
             return null;
-          },
-        });
+          }
+        }
 
-        var Foo = React.createClass({
+        class Foo extends React.Component {
           render() {
             return this.props.children;
-          },
-        });
+          }
+        }
 
         var elementBefore = <Foo><Bar /></Foo>;
         var treeBefore = {
@@ -1522,17 +1527,17 @@ describe('ReactComponentTreeDevtool', () => {
       });
 
       it('updates from null to a composite child', () => {
-        var Bar = React.createClass({
+        class Bar extends React.Component {
           render() {
             return null;
-          },
-        });
+          }
+        }
 
-        var Foo = React.createClass({
+        class Foo extends React.Component {
           render() {
             return this.props.children;
-          },
-        });
+          }
+        }
 
         var elementBefore = <Foo>{null}</Foo>;
         var treeBefore = {
@@ -1556,17 +1561,17 @@ describe('ReactComponentTreeDevtool', () => {
       });
 
       it('updates from a composite child to null', () => {
-        var Bar = React.createClass({
+        class Bar extends React.Component {
           render() {
             return null;
-          },
-        });
+          }
+        }
 
-        var Foo = React.createClass({
+        class Foo extends React.Component {
           render() {
             return this.props.children;
-          },
-        });
+          }
+        }
 
         var elementBefore = <Foo><Bar /></Foo>;
         var treeBefore = {
diff --git a/src/renderers/shared/devtools/__tests__/ReactComponentTreeDevtool-test.native.js b/src/renderers/shared/devtools/__tests__/ReactComponentTreeDevtool-test.native.js
index 4ba5cdc9d9fc2..9beef3089fee5 100644
--- a/src/renderers/shared/devtools/__tests__/ReactComponentTreeDevtool-test.native.js
+++ b/src/renderers/shared/devtools/__tests__/ReactComponentTreeDevtool-test.native.js
@@ -40,17 +40,19 @@ describe('ReactComponentTreeDevtool', () => {
       validAttributes: {},
       uiViewClassName: 'RCText',
     });
-    Text = React.createClass({
-      childContextTypes: {
+    Text = class extends React.Component {
+      static childContextTypes = {
         isInAParentText: React.PropTypes.bool,
-      },
+      };
+
       getChildContext() {
         return {isInAParentText: true};
-      },
+      }
+
       render() {
         return <RCText {...this.props} />;
-      },
-    });
+      }
+    };
   });
 
   function assertTreeMatches(pairs, options) {
@@ -116,22 +118,26 @@ describe('ReactComponentTreeDevtool', () => {
 
   describe('mount', () => {
     it('uses displayName or Unknown for classic components', () => {
-      var Foo = React.createClass({
+      class Foo extends React.Component {
         render() {
           return null;
-        },
-      });
+        }
+      }
+
       Foo.displayName = 'Bar';
-      var Baz = React.createClass({
+
+      class Baz extends React.Component {
         render() {
           return null;
-        },
-      });
-      var Qux = React.createClass({
+        }
+      }
+
+      class Qux extends React.Component {
         render() {
           return null;
-        },
-      });
+        }
+      }
+
       delete Qux.displayName;
 
       var element = <View><Foo /><Baz /><Qux /></View>;
@@ -318,11 +324,12 @@ describe('ReactComponentTreeDevtool', () => {
     });
 
     it('reports a tree with composites correctly', () => {
-      var Qux = React.createClass({
+      class Qux extends React.Component {
         render() {
           return null;
-        },
-      });
+        }
+      }
+
       function Foo() {
         return {
           render() {
@@ -1323,11 +1330,11 @@ describe('ReactComponentTreeDevtool', () => {
 
     describe('class component', () => {
       it('updates with a host child', () => {
-        var Foo = React.createClass({
+        class Foo extends React.Component {
           render() {
             return this.props.children;
-          },
-        });
+          }
+        }
 
         var elementBefore = <Foo><View /></Foo>;
         var treeBefore = {
@@ -1354,11 +1361,11 @@ describe('ReactComponentTreeDevtool', () => {
       });
 
       it('updates from null to a host child', () => {
-        var Foo = React.createClass({
+        class Foo extends React.Component {
           render() {
             return this.props.children;
-          },
-        });
+          }
+        }
 
         var elementBefore = <Foo>{null}</Foo>;
         var treeBefore = {
@@ -1382,11 +1389,11 @@ describe('ReactComponentTreeDevtool', () => {
       });
 
       it('updates from a host child to null', () => {
-        var Foo = React.createClass({
+        class Foo extends React.Component {
           render() {
             return this.props.children;
-          },
-        });
+          }
+        }
 
         var elementBefore = <Foo><View /></Foo>;
         var treeBefore = {
@@ -1410,17 +1417,17 @@ describe('ReactComponentTreeDevtool', () => {
       });
 
       it('updates from a host child to a composite child', () => {
-        var Bar = React.createClass({
+        class Bar extends React.Component {
           render() {
             return null;
-          },
-        });
+          }
+        }
 
-        var Foo = React.createClass({
+        class Foo extends React.Component {
           render() {
             return this.props.children;
-          },
-        });
+          }
+        }
 
         var elementBefore = <Foo><View /></Foo>;
         var treeBefore = {
@@ -1447,17 +1454,17 @@ describe('ReactComponentTreeDevtool', () => {
       });
 
       it('updates from a composite child to a host child', () => {
-        var Bar = React.createClass({
+        class Bar extends React.Component {
           render() {
             return null;
-          },
-        });
+          }
+        }
 
-        var Foo = React.createClass({
+        class Foo extends React.Component {
           render() {
             return this.props.children;
-          },
-        });
+          }
+        }
 
         var elementBefore = <Foo><Bar /></Foo>;
         var treeBefore = {
@@ -1484,17 +1491,17 @@ describe('ReactComponentTreeDevtool', () => {
       });
 
       it('updates from null to a composite child', () => {
-        var Bar = React.createClass({
+        class Bar extends React.Component {
           render() {
             return null;
-          },
-        });
+          }
+        }
 
-        var Foo = React.createClass({
+        class Foo extends React.Component {
           render() {
             return this.props.children;
-          },
-        });
+          }
+        }
 
         var elementBefore = <Foo>{null}</Foo>;
         var treeBefore = {
@@ -1518,17 +1525,17 @@ describe('ReactComponentTreeDevtool', () => {
       });
 
       it('updates from a composite child to null', () => {
-        var Bar = React.createClass({
+        class Bar extends React.Component {
           render() {
             return null;
-          },
-        });
+          }
+        }
 
-        var Foo = React.createClass({
+        class Foo extends React.Component {
           render() {
             return this.props.children;
-          },
-        });
+          }
+        }
 
         var elementBefore = <Foo><Bar /></Foo>;
         var treeBefore = {
diff --git a/src/renderers/shared/stack/reconciler/__tests__/ReactChildReconciler-test.js b/src/renderers/shared/stack/reconciler/__tests__/ReactChildReconciler-test.js
index 11eaa10d5cf36..3343b79b825e9 100644
--- a/src/renderers/shared/stack/reconciler/__tests__/ReactChildReconciler-test.js
+++ b/src/renderers/shared/stack/reconciler/__tests__/ReactChildReconciler-test.js
@@ -32,11 +32,11 @@ describe('ReactChildReconciler', function() {
   it('warns for duplicated keys', function() {
     spyOn(console, 'error');
 
-    var Component = React.createClass({
+    class Component extends React.Component {
       render() {
         return <div>{[<div key="1" />, <div key="1" />]}</div>;
-      },
-    });
+      }
+    }
 
     ReactTestUtils.renderIntoDocument(<Component />);
 
@@ -49,23 +49,23 @@ describe('ReactChildReconciler', function() {
   it('warns for duplicated keys with component stack info', function() {
     spyOn(console, 'error');
 
-    var Component = React.createClass({
-      render: function() {
+    class Component extends React.Component {
+      render() {
         return <div>{[<div key="1" />, <div key="1" />]}</div>;
-      },
-    });
+      }
+    }
 
-    var Parent = React.createClass({
-      render: function() {
+    class Parent extends React.Component {
+      render() {
         return React.cloneElement(this.props.child);
-      },
-    });
+      }
+    }
 
-    var GrandParent = React.createClass({
-      render: function() {
+    class GrandParent extends React.Component {
+      render() {
         return <Parent child={<Component />} />;
-      },
-    });
+      }
+    }
 
     ReactTestUtils.renderIntoDocument(<GrandParent />);
 
diff --git a/src/renderers/shared/stack/reconciler/__tests__/ReactComponent-test.js b/src/renderers/shared/stack/reconciler/__tests__/ReactComponent-test.js
index 8039e88e98fd0..b5ae5c58291fa 100644
--- a/src/renderers/shared/stack/reconciler/__tests__/ReactComponent-test.js
+++ b/src/renderers/shared/stack/reconciler/__tests__/ReactComponent-test.js
@@ -79,48 +79,49 @@ describe('ReactComponent', function() {
     var innerObj = {};
     var outerObj = {};
 
-    var Wrapper = React.createClass({
-
-      getObject: function() {
+    class Wrapper extends React.Component {
+      getObject = () => {
         return this.props.object;
-      },
+      };
 
-      render: function() {
+      render() {
         return <div>{this.props.children}</div>;
-      },
-
-    });
+      }
+    }
 
-    var Component = React.createClass({
-      render: function() {
+    class Component extends React.Component {
+      render() {
         var inner = <Wrapper object={innerObj} ref="inner" />;
         var outer = <Wrapper object={outerObj} ref="outer">{inner}</Wrapper>;
         return outer;
-      },
-      componentDidMount: function() {
+      }
+
+      componentDidMount() {
         expect(this.refs.inner.getObject()).toEqual(innerObj);
         expect(this.refs.outer.getObject()).toEqual(outerObj);
-      },
-    });
+      }
+    }
 
     var instance = <Component />;
     instance = ReactTestUtils.renderIntoDocument(instance);
   });
 
   it('should not have refs on unmounted components', function() {
-    var Parent = React.createClass({
-      render: function() {
+    class Parent extends React.Component {
+      render() {
         return <Child><div ref="test" /></Child>;
-      },
-      componentDidMount: function() {
+      }
+
+      componentDidMount() {
         expect(this.refs && this.refs.test).toEqual(undefined);
-      },
-    });
-    var Child = React.createClass({
-      render: function() {
+      }
+    }
+
+    class Child extends React.Component {
+      render() {
         return <div />;
-      },
-    });
+      }
+    }
 
     var instance = <Parent child={<span />} />;
     instance = ReactTestUtils.renderIntoDocument(instance);
@@ -130,18 +131,20 @@ describe('ReactComponent', function() {
     var innerObj = {};
     var outerObj = {};
 
-    var Wrapper = React.createClass({
-      getObject: function() {
+    class Wrapper extends React.Component {
+      getObject = () => {
         return this.props.object;
-      },
-      render: function() {
+      };
+
+      render() {
         return <div>{this.props.children}</div>;
-      },
-    });
+      }
+    }
 
     var mounted = false;
-    var Component = React.createClass({
-      render: function() {
+
+    class Component extends React.Component {
+      render() {
         var inner = <Wrapper object={innerObj} ref={(c) => this.innerRef = c} />;
         var outer = (
           <Wrapper object={outerObj} ref={(c) => this.outerRef = c}>
@@ -149,13 +152,14 @@ describe('ReactComponent', function() {
           </Wrapper>
         );
         return outer;
-      },
-      componentDidMount: function() {
+      }
+
+      componentDidMount() {
         expect(this.innerRef.getObject()).toEqual(innerObj);
         expect(this.outerRef.getObject()).toEqual(outerObj);
         mounted = true;
-      },
-    });
+      }
+    }
 
     var instance = <Component />;
     instance = ReactTestUtils.renderIntoDocument(instance);
@@ -163,23 +167,26 @@ describe('ReactComponent', function() {
   });
 
   it('should support new-style refs with mixed-up owners', function() {
-    var Wrapper = React.createClass({
-      getTitle: function() {
+    class Wrapper extends React.Component {
+      getTitle = () => {
         return this.props.title;
-      },
-      render: function() {
+      };
+
+      render() {
         return this.props.getContent();
-      },
-    });
+      }
+    }
 
     var mounted = false;
-    var Component = React.createClass({
-      getInner: function() {
+
+    class Component extends React.Component {
+      getInner = () => {
         // (With old-style refs, it's impossible to get a ref to this div
         // because Wrapper is the current owner when this function is called.)
         return <div title="inner" ref={(c) => this.innerRef = c} />;
-      },
-      render: function() {
+      };
+
+      render() {
         return (
           <Wrapper
             title="wrapper"
@@ -187,14 +194,15 @@ describe('ReactComponent', function() {
             getContent={this.getInner}
             />
         );
-      },
-      componentDidMount: function() {
+      }
+
+      componentDidMount() {
         // Check .props.title to make sure we got the right elements back
         expect(this.wrapperRef.getTitle()).toBe('wrapper');
         expect(ReactDOM.findDOMNode(this.innerRef).title).toBe('inner');
         mounted = true;
-      },
-    });
+      }
+    }
 
     var instance = <Component />;
     instance = ReactTestUtils.renderIntoDocument(instance);
@@ -204,24 +212,27 @@ describe('ReactComponent', function() {
   it('should call refs at the correct time', function() {
     var log = [];
 
-    var Inner = React.createClass({
-      render: function() {
+    class Inner extends React.Component {
+      render() {
         log.push(`inner ${this.props.id} render`);
         return <div />;
-      },
-      componentDidMount: function() {
+      }
+
+      componentDidMount() {
         log.push(`inner ${this.props.id} componentDidMount`);
-      },
-      componentDidUpdate: function() {
+      }
+
+      componentDidUpdate() {
         log.push(`inner ${this.props.id} componentDidUpdate`);
-      },
-      componentWillUnmount: function() {
+      }
+
+      componentWillUnmount() {
         log.push(`inner ${this.props.id} componentWillUnmount`);
-      },
-    });
+      }
+    }
 
-    var Outer = React.createClass({
-      render: function() {
+    class Outer extends React.Component {
+      render() {
         return (
           <div>
             <Inner id={1} ref={(c) => {
@@ -232,17 +243,20 @@ describe('ReactComponent', function() {
             }}/>
           </div>
         );
-      },
-      componentDidMount: function() {
+      }
+
+      componentDidMount() {
         log.push('outer componentDidMount');
-      },
-      componentDidUpdate: function() {
+      }
+
+      componentDidUpdate() {
         log.push('outer componentDidUpdate');
-      },
-      componentWillUnmount: function() {
+      }
+
+      componentWillUnmount() {
         log.push('outer componentWillUnmount');
-      },
-    });
+      }
+    }
 
     // mount, update, unmount
     var el = document.createElement('div');
diff --git a/src/renderers/shared/stack/reconciler/__tests__/ReactComponentLifeCycle-test.js b/src/renderers/shared/stack/reconciler/__tests__/ReactComponentLifeCycle-test.js
index 37c7c7cf43682..0b195ef20a2a9 100644
--- a/src/renderers/shared/stack/reconciler/__tests__/ReactComponentLifeCycle-test.js
+++ b/src/renderers/shared/stack/reconciler/__tests__/ReactComponentLifeCycle-test.js
@@ -107,16 +107,17 @@ describe('ReactComponentLifeCycle', function() {
 
   it('should not reuse an instance when it has been unmounted', function() {
     var container = document.createElement('div');
-    var StatefulComponent = React.createClass({
-      getInitialState: function() {
-        return {};
-      },
-      render: function() {
+
+    class StatefulComponent extends React.Component {
+      state = {};
+
+      render() {
         return (
           <div></div>
         );
-      },
-    });
+      }
+    }
+
     var element = <StatefulComponent />;
     var firstInstance = ReactDOM.render(element, container);
     ReactDOM.unmountComponentAtNode(container);
@@ -129,31 +130,35 @@ describe('ReactComponentLifeCycle', function() {
    * that second onDOMReady should not fail.
    */
   it('it should fire onDOMReady when already in onDOMReady', function() {
-
     var _testJournal = [];
 
-    var Child = React.createClass({
-      componentDidMount: function() {
+    class Child extends React.Component {
+      componentDidMount() {
         _testJournal.push('Child:onDOMReady');
-      },
-      render: function() {
+      }
+
+      render() {
         return <div></div>;
-      },
-    });
+      }
+    }
 
-    var SwitcherParent = React.createClass({
-      getInitialState: function() {
+    class SwitcherParent extends React.Component {
+      constructor(props) {
+        super(props);
         _testJournal.push('SwitcherParent:getInitialState');
-        return {showHasOnDOMReadyComponent: false};
-      },
-      componentDidMount: function() {
+        this.state = {showHasOnDOMReadyComponent: false};
+      }
+
+      componentDidMount() {
         _testJournal.push('SwitcherParent:onDOMReady');
         this.switchIt();
-      },
-      switchIt: function() {
+      }
+
+      switchIt = () => {
         this.setState({showHasOnDOMReadyComponent: true});
-      },
-      render: function() {
+      };
+
+      render() {
         return (
           <div>{
             this.state.showHasOnDOMReadyComponent ?
@@ -161,8 +166,8 @@ describe('ReactComponentLifeCycle', function() {
             <div> </div>
           }</div>
         );
-      },
-    });
+      }
+    }
 
     var instance = <SwitcherParent />;
     instance = ReactTestUtils.renderIntoDocument(instance);
@@ -176,16 +181,18 @@ describe('ReactComponentLifeCycle', function() {
   // You could assign state here, but not access members of it, unless you
   // had provided a getInitialState method.
   it('throws when accessing state in componentWillMount', function() {
-    var StatefulComponent = React.createClass({
-      componentWillMount: function() {
+    class StatefulComponent extends React.Component {
+      componentWillMount() {
         void this.state.yada;
-      },
-      render: function() {
+      }
+
+      render() {
         return (
           <div></div>
         );
-      },
-    });
+      }
+    }
+
     var instance = <StatefulComponent />;
     expect(function() {
       instance = ReactTestUtils.renderIntoDocument(instance);
@@ -193,16 +200,18 @@ describe('ReactComponentLifeCycle', function() {
   });
 
   it('should allow update state inside of componentWillMount', function() {
-    var StatefulComponent = React.createClass({
-      componentWillMount: function() {
+    class StatefulComponent extends React.Component {
+      componentWillMount() {
         this.setState({stateField: 'something'});
-      },
-      render: function() {
+      }
+
+      render() {
         return (
           <div></div>
         );
-      },
-    });
+      }
+    }
+
     var instance = <StatefulComponent />;
     expect(function() {
       instance = ReactTestUtils.renderIntoDocument(instance);
@@ -211,18 +220,22 @@ describe('ReactComponentLifeCycle', function() {
 
   it('should not allow update state inside of getInitialState', function() {
     spyOn(console, 'error');
-    var StatefulComponent = React.createClass({
-      getInitialState: function() {
+
+    class StatefulComponent extends React.Component {
+      constructor(props, context) {
+        super(props, context);
         this.setState({stateField: 'something'});
 
-        return {stateField: 'somethingelse'};
-      },
-      render: function() {
+        this.state = {stateField: 'somethingelse'};
+      }
+
+      render() {
         return (
           <div></div>
         );
-      },
-    });
+      }
+    }
+
     ReactTestUtils.renderIntoDocument(<StatefulComponent />);
     expect(console.error.calls.count()).toBe(1);
     expect(console.error.calls.argsFor(0)[0]).toBe(
@@ -327,8 +340,9 @@ describe('ReactComponentLifeCycle', function() {
   });
 
   it('should carry through each of the phases of setup', function() {
-    var LifeCycleComponent = React.createClass({
-      getInitialState: function() {
+    class LifeCycleComponent extends React.Component {
+      constructor(props, context) {
+        super(props, context);
         this._testJournal = {};
         var initState = {
           hasWillMountCompleted: false,
@@ -339,24 +353,24 @@ describe('ReactComponentLifeCycle', function() {
         this._testJournal.returnedFromGetInitialState = clone(initState);
         this._testJournal.lifeCycleAtStartOfGetInitialState =
           getLifeCycleState(this);
-        return initState;
-      },
+        this.state = initState;
+      }
 
-      componentWillMount: function() {
+      componentWillMount() {
         this._testJournal.stateAtStartOfWillMount = clone(this.state);
         this._testJournal.lifeCycleAtStartOfWillMount =
           getLifeCycleState(this);
         this.state.hasWillMountCompleted = true;
-      },
+      }
 
-      componentDidMount: function() {
+      componentDidMount() {
         this._testJournal.stateAtStartOfDidMount = clone(this.state);
         this._testJournal.lifeCycleAtStartOfDidMount =
           getLifeCycleState(this);
         this.setState({hasDidMountCompleted: true});
-      },
+      }
 
-      render: function() {
+      render() {
         var isInitialRender = !this.state.hasRenderCompleted;
         if (isInitialRender) {
           this._testJournal.stateInInitialRender = clone(this.state);
@@ -372,15 +386,15 @@ describe('ReactComponentLifeCycle', function() {
             I am the inner DIV
           </div>
         );
-      },
+      }
 
-      componentWillUnmount: function() {
+      componentWillUnmount() {
         this._testJournal.stateAtStartOfWillUnmount = clone(this.state);
         this._testJournal.lifeCycleAtStartOfWillUnmount =
           getLifeCycleState(this);
         this.state.hasWillUnmountCompleted = true;
-      },
-    });
+      }
+    }
 
     // A component that is merely "constructed" (as in "constructor") but not
     // yet initialized, or rendered.
@@ -445,25 +459,29 @@ describe('ReactComponentLifeCycle', function() {
   });
 
   it('should not throw when updating an auxiliary component', function() {
-    var Tooltip = React.createClass({
-      render: function() {
+    class Tooltip extends React.Component {
+      render() {
         return <div>{this.props.children}</div>;
-      },
-      componentDidMount: function() {
+      }
+
+      componentDidMount() {
         this.container = document.createElement('div');
         this.updateTooltip();
-      },
-      componentDidUpdate: function() {
+      }
+
+      componentDidUpdate() {
         this.updateTooltip();
-      },
-      updateTooltip: function() {
+      }
+
+      updateTooltip = () => {
         // Even though this.props.tooltip has an owner, updating it shouldn't
         // throw here because it's mounted as a root component
         ReactDOM.render(this.props.tooltip, this.container);
-      },
-    });
-    var Component = React.createClass({
-      render: function() {
+      };
+    }
+
+    class Component extends React.Component {
+      render() {
         return (
           <Tooltip
               ref="tooltip"
@@ -471,8 +489,8 @@ describe('ReactComponentLifeCycle', function() {
             {this.props.text}
           </Tooltip>
         );
-      },
-    });
+      }
+    }
 
     var container = document.createElement('div');
     ReactDOM.render(
@@ -492,19 +510,20 @@ describe('ReactComponentLifeCycle', function() {
     /**
      * calls setState in an componentDidMount.
      */
-    var SetStateInComponentDidMount = React.createClass({
-      getInitialState: function() {
-        return {
-          stateField: this.props.valueToUseInitially,
-        };
-      },
-      componentDidMount: function() {
+    class SetStateInComponentDidMount extends React.Component {
+      state = {
+        stateField: this.props.valueToUseInitially,
+      };
+
+      componentDidMount() {
         this.setState({stateField: this.props.valueToUseInOnDOMReady});
-      },
-      render: function() {
+      }
+
+      render() {
         return (<div></div>);
-      },
-    });
+      }
+    }
+
     var instance =
       <SetStateInComponentDidMount
         valueToUseInitially="hello"
diff --git a/src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponent-test.js b/src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponent-test.js
index 14d41cbbea4e6..e0bdb1957ab05 100644
--- a/src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponent-test.js
+++ b/src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponent-test.js
@@ -36,38 +36,37 @@ describe('ReactCompositeComponent', function() {
     ReactServerRendering = require('ReactServerRendering');
     ReactUpdates = require('ReactUpdates');
 
-    MorphingComponent = React.createClass({
-      getInitialState: function() {
-        return {activated: false};
-      },
+    MorphingComponent = class extends React.Component {
+      state = {activated: false};
 
-      _toggleActivatedState: function() {
+      _toggleActivatedState = () => {
         this.setState({activated: !this.state.activated});
-      },
+      };
 
-      render: function() {
+      render() {
         var toggleActivatedState = this._toggleActivatedState;
         return !this.state.activated ?
           <a ref="x" onClick={toggleActivatedState} /> :
           <b ref="x" onClick={toggleActivatedState} />;
-      },
-    });
+      }
+    };
 
     /**
      * We'll use this to ensure that an old version is not cached when it is
      * reallocated again.
      */
-    ChildUpdates = React.createClass({
-      getAnchor: function() {
+    ChildUpdates = class extends React.Component {
+      getAnchor = () => {
         return this.refs.anch;
-      },
-      render: function() {
+      };
+
+      render() {
         var className = this.props.anchorClassOn ? 'anchorClass' : '';
         return this.props.renderAnchor ?
           <a ref="anch" className={className}></a> :
           <b></b>;
-      },
-    });
+      }
+    };
   });
 
   it('should support module pattern components', function() {
@@ -105,16 +104,17 @@ describe('ReactCompositeComponent', function() {
   });
 
   it('should not thrash a server rendered layout with client side one', () => {
-    var Child = React.createClass({
-      render: function() {
+    class Child extends React.Component {
+      render() {
         return null;
-      },
-    });
-    var Parent = React.createClass({
-      render: function() {
+      }
+    }
+
+    class Parent extends React.Component {
+      render() {
         return <div><Child /></div>;
-      },
-    });
+      }
+    }
 
     var markup = ReactServerRendering.renderToString(<Parent />);
     var container = document.createElement('div');
@@ -229,14 +229,13 @@ describe('ReactCompositeComponent', function() {
   });
 
   it('should use default values for undefined props', function() {
-    var Component = React.createClass({
-      getDefaultProps: function() {
-        return {prop: 'testKey'};
-      },
-      render: function() {
+    class Component extends React.Component {
+      static defaultProps = {prop: 'testKey'};
+
+      render() {
         return <span />;
-      },
-    });
+      }
+    }
 
     var instance1 = <Component />;
     instance1 = ReactTestUtils.renderIntoDocument(instance1);
@@ -252,14 +251,13 @@ describe('ReactCompositeComponent', function() {
   });
 
   it('should not mutate passed-in props object', function() {
-    var Component = React.createClass({
-      getDefaultProps: function() {
-        return {prop: 'testKey'};
-      },
-      render: function() {
+    class Component extends React.Component {
+      static defaultProps = {prop: 'testKey'};
+
+      render() {
         return <span />;
-      },
-    });
+      }
+    }
 
     var inputProps = {};
     var instance1 = <Component {...inputProps} />;
@@ -277,11 +275,11 @@ describe('ReactCompositeComponent', function() {
     var container = document.createElement('div');
     document.body.appendChild(container);
 
-    var Component = React.createClass({
-      render: function() {
+    class Component extends React.Component {
+      render() {
         return <div />;
-      },
-    });
+      }
+    }
 
     var instance = <Component />;
     expect(instance.forceUpdate).not.toBeDefined();
@@ -311,15 +309,14 @@ describe('ReactCompositeComponent', function() {
 
     var renders = 0;
 
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {value: 0};
-      },
-      render: function() {
+    class Component extends React.Component {
+      state = {value: 0};
+
+      render() {
         renders++;
         return <div />;
-      },
-    });
+      }
+    }
 
     var instance = <Component />;
     expect(instance.setState).not.toBeDefined();
@@ -353,21 +350,21 @@ describe('ReactCompositeComponent', function() {
     var container = document.createElement('div');
     document.body.appendChild(container);
 
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {value: 0};
-      },
-      componentWillUnmount: function() {
+    class Component extends React.Component {
+      state = {value: 0};
+
+      componentWillUnmount() {
         expect(() => {
           this.setState({value: 2}, function() {
             cbCalled = true;
           });
         }).not.toThrow();
-      },
-      render: function() {
+      }
+
+      render() {
         return <div />;
-      },
-    });
+      }
+    }
 
     var instance = ReactDOM.render(<Component />, container);
     instance.setState({value: 1});
@@ -385,19 +382,18 @@ describe('ReactCompositeComponent', function() {
     var renderedState = -1;
     var renderPasses = 0;
 
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {value: 0};
-      },
-      render: function() {
+    class Component extends React.Component {
+      state = {value: 0};
+
+      render() {
         renderPasses++;
         renderedState = this.state.value;
         if (this.state.value === 0) {
           this.setState({ value: 1 });
         }
         return <div />;
-      },
-    });
+      }
+    }
 
     expect(console.error.calls.count()).toBe(0);
 
@@ -433,20 +429,21 @@ describe('ReactCompositeComponent', function() {
 
     var renderPasses = 0;
 
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {value: 0};
-      },
-      getChildContext: function() {
+    class Component extends React.Component {
+      state = {value: 0};
+
+      getChildContext() {
         if (this.state.value === 0) {
           this.setState({ value: 1 });
         }
-      },
-      render: function() {
+      }
+
+      render() {
         renderPasses++;
         return <div />;
-      },
-    });
+      }
+    }
+
     expect(console.error.calls.count()).toBe(0);
     var instance = ReactDOM.render(<Component />, container);
     expect(renderPasses).toBe(2);
@@ -458,11 +455,12 @@ describe('ReactCompositeComponent', function() {
   });
 
   it('should cleanup even if render() fatals', function() {
-    var BadComponent = React.createClass({
-      render: function() {
+    class BadComponent extends React.Component {
+      render() {
         throw new Error();
-      },
-    });
+      }
+    }
+
     var instance = <BadComponent />;
 
     expect(ReactCurrentOwner.current).toBe(null);
@@ -478,24 +476,26 @@ describe('ReactCompositeComponent', function() {
     var container = document.createElement('div');
     var innerUnmounted = false;
 
-    var Component = React.createClass({
-      render: function() {
+    class Component extends React.Component {
+      render() {
         return (
           <div>
             <Inner />
             Text
           </div>
         );
-      },
-    });
-    var Inner = React.createClass({
-      componentWillUnmount: function() {
+      }
+    }
+
+    class Inner extends React.Component {
+      componentWillUnmount() {
         innerUnmounted = true;
-      },
-      render: function() {
+      }
+
+      render() {
         return <div />;
-      },
-    });
+      }
+    }
 
     ReactDOM.render(<Component />, container);
     ReactDOM.unmountComponentAtNode(container);
@@ -505,19 +505,17 @@ describe('ReactCompositeComponent', function() {
   it('should warn when shouldComponentUpdate() returns undefined', function() {
     spyOn(console, 'error');
 
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {bogus: false};
-      },
+    class Component extends React.Component {
+      state = {bogus: false};
 
-      shouldComponentUpdate: function() {
+      shouldComponentUpdate() {
         return undefined;
-      },
+      }
 
-      render: function() {
+      render() {
         return <div />;
-      },
-    });
+      }
+    }
 
     var instance = ReactTestUtils.renderIntoDocument(<Component />);
     instance.setState({bogus: true});
@@ -532,14 +530,14 @@ describe('ReactCompositeComponent', function() {
   it('should warn when componentDidUnmount method is defined', function() {
     spyOn(console, 'error');
 
-    var Component = React.createClass({
-      componentDidUnmount: function() {
-      },
+    class Component extends React.Component {
+      componentDidUnmount = () => {
+      };
 
-      render: function() {
+      render() {
         return <div />;
-      },
-    });
+      }
+    }
 
     ReactTestUtils.renderIntoDocument(<Component />);
 
@@ -552,56 +550,57 @@ describe('ReactCompositeComponent', function() {
   });
 
   it('should pass context to children when not owner', function() {
-    var Parent = React.createClass({
-      render: function() {
+    class Parent extends React.Component {
+      render() {
         return <Child><Grandchild /></Child>;
-      },
-    });
+      }
+    }
 
-    var Child = React.createClass({
-      childContextTypes: {
+    class Child extends React.Component {
+      static childContextTypes = {
         foo: ReactPropTypes.string,
-      },
+      };
 
-      getChildContext: function() {
+      getChildContext() {
         return {
           foo: 'bar',
         };
-      },
+      }
 
-      render: function() {
+      render() {
         return React.Children.only(this.props.children);
-      },
-    });
+      }
+    }
 
-    var Grandchild = React.createClass({
-      contextTypes: {
+    class Grandchild extends React.Component {
+      static contextTypes = {
         foo: ReactPropTypes.string,
-      },
+      };
 
-      render: function() {
+      render() {
         return <div>{this.context.foo}</div>;
-      },
-    });
+      }
+    }
 
     var component = ReactTestUtils.renderIntoDocument(<Parent />);
     expect(ReactDOM.findDOMNode(component).innerHTML).toBe('bar');
   });
 
   it('should skip update when rerendering element in container', function() {
-    var Parent = React.createClass({
-      render: function() {
+    class Parent extends React.Component {
+      render() {
         return <div>{this.props.children}</div>;
-      },
-    });
+      }
+    }
 
     var childRenders = 0;
-    var Child = React.createClass({
-      render: function() {
+
+    class Child extends React.Component {
+      render() {
         childRenders++;
         return <div />;
-      },
-    });
+      }
+    }
 
     var container = document.createElement('div');
     var child = <Child />;
@@ -615,47 +614,45 @@ describe('ReactCompositeComponent', function() {
     var parentInstance = null;
     var childInstance = null;
 
-    var Parent = React.createClass({
-      childContextTypes: {
+    class Parent extends React.Component {
+      static childContextTypes = {
         foo: ReactPropTypes.string,
         flag: ReactPropTypes.bool,
-      },
+      };
 
-      getChildContext: function() {
+      state = {
+        flag: false,
+      };
+
+      getChildContext() {
         return {
           foo: 'bar',
           flag: this.state.flag,
         };
-      },
-
-      getInitialState: function() {
-        return {
-          flag: false,
-        };
-      },
+      }
 
-      render: function() {
+      render() {
         return React.Children.only(this.props.children);
-      },
-    });
+      }
+    }
 
-    var Middle = React.createClass({
-      render: function() {
+    class Middle extends React.Component {
+      render() {
         return this.props.children;
-      },
-    });
+      }
+    }
 
-    var Child = React.createClass({
-      contextTypes: {
+    class Child extends React.Component {
+      static contextTypes = {
         foo: ReactPropTypes.string,
         flag: ReactPropTypes.bool,
-      },
+      };
 
-      render: function() {
+      render() {
         childInstance = this;
         return <span>Child</span>;
-      },
-    });
+      }
+    }
 
     parentInstance = ReactTestUtils.renderIntoDocument(
       <Parent><Middle><Child /></Middle></Parent>
@@ -671,48 +668,45 @@ describe('ReactCompositeComponent', function() {
   });
 
   it('should pass context when re-rendered for static child within a composite component', function() {
-    var Parent = React.createClass({
-      childContextTypes: {
+    class Parent extends React.Component {
+      static childContextTypes = {
         flag: ReactPropTypes.bool,
-      },
+      };
+
+      state = {
+        flag: true,
+      };
 
       getChildContext() {
         return {
           flag: this.state.flag,
         };
-      },
-
-      getInitialState: function() {
-        return {
-          flag: true,
-        };
-      },
+      }
 
       render() {
         return <div>{this.props.children}</div>;
-      },
-
-    });
+      }
+    }
 
-    var Child = React.createClass({
-      contextTypes: {
+    class Child extends React.Component {
+      static contextTypes = {
         flag: ReactPropTypes.bool,
-      },
+      };
 
-      render: function() {
+      render() {
         return <div />;
-      },
-    });
+      }
+    }
 
-    var Wrapper = React.createClass({
+    class Wrapper extends React.Component {
       render() {
         return (
           <Parent ref="parent">
             <Child ref="child" />
           </Parent>
         );
-      },
-    });
+      }
+    }
 
 
     var wrapper = ReactTestUtils.renderIntoDocument(
@@ -727,64 +721,63 @@ describe('ReactCompositeComponent', function() {
 
     expect(wrapper.refs.parent.state.flag).toEqual(false);
     reactComponentExpect(wrapper.refs.child).scalarContextEqual({flag: false});
-
   });
 
   it('should pass context transitively', function() {
     var childInstance = null;
     var grandchildInstance = null;
 
-    var Parent = React.createClass({
-      childContextTypes: {
+    class Parent extends React.Component {
+      static childContextTypes = {
         foo: ReactPropTypes.string,
         depth: ReactPropTypes.number,
-      },
+      };
 
-      getChildContext: function() {
+      getChildContext() {
         return {
           foo: 'bar',
           depth: 0,
         };
-      },
+      }
 
-      render: function() {
+      render() {
         return <Child />;
-      },
-    });
+      }
+    }
 
-    var Child = React.createClass({
-      contextTypes: {
+    class Child extends React.Component {
+      static contextTypes = {
         foo: ReactPropTypes.string,
         depth: ReactPropTypes.number,
-      },
+      };
 
-      childContextTypes: {
+      static childContextTypes = {
         depth: ReactPropTypes.number,
-      },
+      };
 
-      getChildContext: function() {
+      getChildContext() {
         return {
           depth: this.context.depth + 1,
         };
-      },
+      }
 
-      render: function() {
+      render() {
         childInstance = this;
         return <Grandchild />;
-      },
-    });
+      }
+    }
 
-    var Grandchild = React.createClass({
-      contextTypes: {
+    class Grandchild extends React.Component {
+      static contextTypes = {
         foo: ReactPropTypes.string,
         depth: ReactPropTypes.number,
-      },
+      };
 
-      render: function() {
+      render() {
         grandchildInstance = this;
         return <div />;
-      },
-    });
+      }
+    }
 
     ReactTestUtils.renderIntoDocument(<Parent />);
     reactComponentExpect(childInstance).scalarContextEqual({foo: 'bar', depth: 0});
@@ -795,45 +788,43 @@ describe('ReactCompositeComponent', function() {
     var parentInstance = null;
     var childInstance = null;
 
-    var Parent = React.createClass({
-      childContextTypes: {
+    class Parent extends React.Component {
+      static childContextTypes = {
         foo: ReactPropTypes.string,
         depth: ReactPropTypes.number,
-      },
+      };
+
+      state = {
+        flag: false,
+      };
 
-      getChildContext: function() {
+      getChildContext() {
         return {
           foo: 'bar',
           depth: 0,
         };
-      },
-
-      getInitialState: function() {
-        return {
-          flag: false,
-        };
-      },
+      }
 
-      render: function() {
+      render() {
         var output = <Child />;
         if (!this.state.flag) {
           output = <span>Child</span>;
         }
         return output;
-      },
-    });
+      }
+    }
 
-    var Child = React.createClass({
-      contextTypes: {
+    class Child extends React.Component {
+      static contextTypes = {
         foo: ReactPropTypes.string,
         depth: ReactPropTypes.number,
-      },
+      };
 
-      render: function() {
+      render() {
         childInstance = this;
         return <span>Child</span>;
-      },
-    });
+      }
+    }
 
     parentInstance = ReactTestUtils.renderIntoDocument(<Parent />);
     expect(childInstance).toBeNull();
@@ -848,65 +839,63 @@ describe('ReactCompositeComponent', function() {
   });
 
   it('unmasked context propagates through updates', function() {
-
-    var Leaf = React.createClass({
-      contextTypes: {
+    class Leaf extends React.Component {
+      static contextTypes = {
         foo: ReactPropTypes.string.isRequired,
-      },
+      };
 
-      componentWillReceiveProps: function(nextProps, nextContext) {
+      componentWillReceiveProps(nextProps, nextContext) {
         expect('foo' in nextContext).toBe(true);
-      },
+      }
 
-      componentDidUpdate: function(prevProps, prevState, prevContext) {
+      componentDidUpdate(prevProps, prevState, prevContext) {
         expect('foo' in prevContext).toBe(true);
-      },
+      }
 
-      shouldComponentUpdate: function(nextProps, nextState, nextContext) {
+      shouldComponentUpdate(nextProps, nextState, nextContext) {
         expect('foo' in nextContext).toBe(true);
         return true;
-      },
+      }
 
-      render: function() {
+      render() {
         return <span>{this.context.foo}</span>;
-      },
-    });
-
-    var Intermediary = React.createClass({
+      }
+    }
 
-      componentWillReceiveProps: function(nextProps, nextContext) {
+    class Intermediary extends React.Component {
+      componentWillReceiveProps(nextProps, nextContext) {
         expect('foo' in nextContext).toBe(false);
-      },
+      }
 
-      componentDidUpdate: function(prevProps, prevState, prevContext) {
+      componentDidUpdate(prevProps, prevState, prevContext) {
         expect('foo' in prevContext).toBe(false);
-      },
+      }
 
-      shouldComponentUpdate: function(nextProps, nextState, nextContext) {
+      shouldComponentUpdate(nextProps, nextState, nextContext) {
         expect('foo' in nextContext).toBe(false);
         return true;
-      },
+      }
 
-      render: function() {
+      render() {
         return <Leaf />;
-      },
-    });
+      }
+    }
 
-    var Parent = React.createClass({
-      childContextTypes: {
+    class Parent extends React.Component {
+      static childContextTypes = {
         foo: ReactPropTypes.string,
-      },
+      };
 
-      getChildContext: function() {
+      getChildContext() {
         return {
           foo: this.props.cntxt,
         };
-      },
+      }
 
-      render: function() {
+      render() {
         return <Intermediary />;
-      },
-    });
+      }
+    }
 
     var div = document.createElement('div');
     ReactDOM.render(<Parent cntxt="noise" />, div);
@@ -924,12 +913,12 @@ describe('ReactCompositeComponent', function() {
     var contextChanges = 0;
     var propChanges = 0;
 
-    var GrandChild = React.createClass({
-      contextTypes: {
+    class GrandChild extends React.Component {
+      static contextTypes = {
         foo: ReactPropTypes.string.isRequired,
-      },
+      };
 
-      componentWillReceiveProps: function(nextProps, nextContext) {
+      componentWillReceiveProps(nextProps, nextContext) {
         expect('foo' in nextContext).toBe(true);
 
         if (nextProps !== this.props) {
@@ -939,19 +928,19 @@ describe('ReactCompositeComponent', function() {
         if (nextContext !== this.context) {
           contextChanges++;
         }
-      },
+      }
 
-      render: function() {
+      render() {
         return <span className="grand-child">{this.props.children}</span>;
-      },
-    });
+      }
+    }
 
-    var ChildWithContext = React.createClass({
-      contextTypes: {
+    class ChildWithContext extends React.Component {
+      static contextTypes = {
         foo: ReactPropTypes.string.isRequired,
-      },
+      };
 
-      componentWillReceiveProps: function(nextProps, nextContext) {
+      componentWillReceiveProps(nextProps, nextContext) {
         expect('foo' in nextContext).toBe(true);
 
         if (nextProps !== this.props) {
@@ -961,15 +950,15 @@ describe('ReactCompositeComponent', function() {
         if (nextContext !== this.context) {
           contextChanges++;
         }
-      },
+      }
 
-      render: function() {
+      render() {
         return <div className="child-with">{this.props.children}</div>;
-      },
-    });
+      }
+    }
 
-    var ChildWithoutContext = React.createClass({
-      componentWillReceiveProps: function(nextProps, nextContext) {
+    class ChildWithoutContext extends React.Component {
+      componentWillReceiveProps(nextProps, nextContext) {
         expect('foo' in nextContext).toBe(false);
 
         if (nextProps !== this.props) {
@@ -979,40 +968,38 @@ describe('ReactCompositeComponent', function() {
         if (nextContext !== this.context) {
           contextChanges++;
         }
-      },
+      }
 
-      render: function() {
+      render() {
         return <div className="child-without">{this.props.children}</div>;
-      },
-    });
+      }
+    }
 
-    var Parent = React.createClass({
-      childContextTypes: {
+    class Parent extends React.Component {
+      static childContextTypes = {
         foo: ReactPropTypes.string,
-      },
+      };
 
-      getInitialState() {
-        return {
-          foo: 'abc',
-        };
-      },
+      state = {
+        foo: 'abc',
+      };
 
-      getChildContext: function() {
+      getChildContext() {
         return {
           foo: this.state.foo,
         };
-      },
+      }
 
-      onClick() {
+      onClick = () => {
         this.setState({
           foo: 'def',
         });
-      },
+      };
 
-      render: function() {
+      render() {
         return <div className="parent" onClick={this.onClick}>{this.props.children}</div>;
-      },
-    });
+      }
+    }
 
     var div = document.createElement('div');
 
@@ -1040,17 +1027,18 @@ describe('ReactCompositeComponent', function() {
   it('should disallow nested render calls', function() {
     spyOn(console, 'error');
 
-    var Inner = React.createClass({
-      render: function() {
+    class Inner extends React.Component {
+      render() {
         return <div />;
-      },
-    });
-    var Outer = React.createClass({
-      render: function() {
+      }
+    }
+
+    class Outer extends React.Component {
+      render() {
         ReactTestUtils.renderIntoDocument(<Inner />);
         return <div />;
-      },
-    });
+      }
+    }
 
     ReactTestUtils.renderIntoDocument(<Outer />);
     expect(console.error.calls.count()).toBe(1);
@@ -1064,19 +1052,20 @@ describe('ReactCompositeComponent', function() {
 
   it('only renders once if updated in componentWillReceiveProps', function() {
     var renders = 0;
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {updated: false};
-      },
-      componentWillReceiveProps: function(props) {
+
+    class Component extends React.Component {
+      state = {updated: false};
+
+      componentWillReceiveProps(props) {
         expect(props.update).toBe(1);
         this.setState({updated: true});
-      },
-      render: function() {
+      }
+
+      render() {
         renders++;
         return <div />;
-      },
-    });
+      }
+    }
 
     var container = document.createElement('div');
     var instance = ReactDOM.render(<Component update={0} />, container);
@@ -1088,16 +1077,18 @@ describe('ReactCompositeComponent', function() {
   });
 
   it('should update refs if shouldComponentUpdate gives false', function() {
-    var Static = React.createClass({
-      shouldComponentUpdate: function() {
+    class Static extends React.Component {
+      shouldComponentUpdate() {
         return false;
-      },
-      render: function() {
+      }
+
+      render() {
         return <div>{this.props.children}</div>;
-      },
-    });
-    var Component = React.createClass({
-      render: function() {
+      }
+    }
+
+    class Component extends React.Component {
+      render() {
         if (this.props.flipped) {
           return (
             <div>
@@ -1113,8 +1104,8 @@ describe('ReactCompositeComponent', function() {
             </div>
           );
         }
-      },
-    });
+      }
+    }
 
     var container = document.createElement('div');
     var comp = ReactDOM.render(<Component flipped={false} />, container);
@@ -1131,19 +1122,23 @@ describe('ReactCompositeComponent', function() {
   it('should allow access to findDOMNode in componentWillUnmount', function() {
     var a = null;
     var b = null;
-    var Component = React.createClass({
-      componentDidMount: function() {
+
+    class Component extends React.Component {
+      componentDidMount() {
         a = ReactDOM.findDOMNode(this);
         expect(a).not.toBe(null);
-      },
-      componentWillUnmount: function() {
+      }
+
+      componentWillUnmount() {
         b = ReactDOM.findDOMNode(this);
         expect(b).not.toBe(null);
-      },
-      render: function() {
+      }
+
+      render() {
         return <div />;
-      },
-    });
+      }
+    }
+
     var container = document.createElement('div');
     expect(a).toBe(container.firstChild);
     ReactDOM.render(<Component />, container);
@@ -1152,31 +1147,31 @@ describe('ReactCompositeComponent', function() {
   });
 
   it('context should be passed down from the parent', function() {
-    var Parent = React.createClass({
-      childContextTypes: {
+    class Parent extends React.Component {
+      static childContextTypes = {
         foo: ReactPropTypes.string,
-      },
+      };
 
-      getChildContext: function() {
+      getChildContext() {
         return {
           foo: 'bar',
         };
-      },
+      }
 
-      render: function() {
+      render() {
         return <div>{this.props.children}</div>;
-      },
-    });
+      }
+    }
 
-    var Component = React.createClass({
-      contextTypes: {
+    class Component extends React.Component {
+      static contextTypes = {
         foo: ReactPropTypes.string.isRequired,
-      },
+      };
 
-      render: function() {
+      render() {
         return <div />;
-      },
-    });
+      }
+    }
 
     var div = document.createElement('div');
     ReactDOM.render(<Parent><Component /></Parent>, div);
@@ -1251,25 +1246,25 @@ describe('ReactCompositeComponent', function() {
     var container = document.createElement('div');
     var layer = document.createElement('div');
 
-    var Component = React.createClass({
-      componentWillMount: function() {
+    class Component extends React.Component {
+      componentWillMount() {
         ReactDOM.render(<div />, layer);
-      },
+      }
 
-      componentWillUnmount: function() {
+      componentWillUnmount() {
         ReactDOM.unmountComponentAtNode(layer);
-      },
+      }
 
-      render: function() {
+      render() {
         return <div />;
-      },
-    });
+      }
+    }
 
-    var Outer = React.createClass({
-      render: function() {
+    class Outer extends React.Component {
+      render() {
         return <div>{this.props.children}</div>;
-      },
-    });
+      }
+    }
 
     ReactDOM.render(<Outer><Component /></Outer>, container);
     ReactDOM.render(<Outer />, container);
diff --git a/src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponentDOMMinimalism-test.js b/src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponentDOMMinimalism-test.js
index 2c5f0a71a226f..90726f808d921 100644
--- a/src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponentDOMMinimalism-test.js
+++ b/src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponentDOMMinimalism-test.js
@@ -34,25 +34,25 @@ describe('ReactCompositeComponentDOMMinimalism', function() {
     React = require('React');
     ReactTestUtils = require('ReactTestUtils');
 
-    LowerLevelComposite = React.createClass({
-      render: function() {
+    LowerLevelComposite = class extends React.Component {
+      render() {
         return (
           <div>
             {this.props.children}
           </div>
         );
-      },
-    });
+      }
+    };
 
-    MyCompositeComponent = React.createClass({
-      render: function() {
+    MyCompositeComponent = class extends React.Component {
+      render() {
         return (
           <LowerLevelComposite>
             {this.props.children}
           </LowerLevelComposite>
         );
-      },
-    });
+      }
+    };
 
     expectSingleChildlessDiv = function(instance) {
       reactComponentExpect(instance)
diff --git a/src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponentNestedState-test.js b/src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponentNestedState-test.js
index 353892ee98da5..b4795e7ee4fcf 100644
--- a/src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponentNestedState-test.js
+++ b/src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponentNestedState-test.js
@@ -24,19 +24,17 @@ describe('ReactCompositeComponentNestedState-state', function() {
   });
 
   it('should provide up to date values for props', function() {
-    var ParentComponent = React.createClass({
-      getInitialState: function() {
-        return {color: 'blue'};
-      },
+    class ParentComponent extends React.Component {
+      state = {color: 'blue'};
 
-      handleColor: function(color) {
+      handleColor = (color) => {
         this.props.logger('parent-handleColor', this.state.color);
         this.setState({color: color}, function() {
           this.props.logger('parent-after-setState', this.state.color);
         });
-      },
+      };
 
-      render: function() {
+      render() {
         this.props.logger('parent-render', this.state.color);
         return (
           <ChildComponent
@@ -45,16 +43,17 @@ describe('ReactCompositeComponentNestedState-state', function() {
             onSelectColor={this.handleColor}
           />
         );
-      },
-    });
+      }
+    }
 
-    var ChildComponent = React.createClass({
-      getInitialState: function() {
-        this.props.logger('getInitialState', this.props.color);
-        return {hue: 'dark ' + this.props.color};
-      },
+    class ChildComponent extends React.Component {
+      constructor(props) {
+        super(props);
+        props.logger('getInitialState', props.color);
+        this.state = {hue: 'dark ' + props.color};
+      }
 
-      handleHue: function(shade, color) {
+      handleHue = (shade, color) => {
         this.props.logger('handleHue', this.state.hue, this.props.color);
         this.props.onSelectColor(color);
         this.setState(function(state, props) {
@@ -64,9 +63,9 @@ describe('ReactCompositeComponentNestedState-state', function() {
         }, function() {
           this.props.logger('after-setState', this.state.hue, this.props.color);
         });
-      },
+      };
 
-      render: function() {
+      render() {
         this.props.logger('render', this.state.hue, this.props.color);
         return (
           <div>
@@ -84,8 +83,8 @@ describe('ReactCompositeComponentNestedState-state', function() {
             </button>
           </div>
         );
-      },
-    });
+      }
+    }
 
     var container = document.createElement('div');
     document.body.appendChild(container);
diff --git a/src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponentState-test.js b/src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponentState-test.js
index f043381a5cf26..ef8c9225003ac 100644
--- a/src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponentState-test.js
+++ b/src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponentState-test.js
@@ -218,24 +218,26 @@ describe('ReactCompositeComponent-state', function() {
 
   it('should batch unmounts', function() {
     var outer;
-    var Inner = React.createClass({
-      render: function() {
+
+    class Inner extends React.Component {
+      render() {
         return <div />;
-      },
-      componentWillUnmount: function() {
+      }
+
+      componentWillUnmount() {
         // This should get silently ignored (maybe with a warning), but it
         // shouldn't break React.
         outer.setState({showInner: false});
-      },
-    });
-    var Outer = React.createClass({
-      getInitialState: function() {
-        return {showInner: true};
-      },
-      render: function() {
+      }
+    }
+
+    class Outer extends React.Component {
+      state = {showInner: true};
+
+      render() {
         return <div>{this.state.showInner && <Inner />}</div>;
-      },
-    });
+      }
+    }
 
     var container = document.createElement('div');
     outer = ReactDOM.render(<Outer />, container);
diff --git a/src/renderers/shared/stack/reconciler/__tests__/ReactEmptyComponent-test.js b/src/renderers/shared/stack/reconciler/__tests__/ReactEmptyComponent-test.js
index a499fb98206cd..be855eee23977 100644
--- a/src/renderers/shared/stack/reconciler/__tests__/ReactEmptyComponent-test.js
+++ b/src/renderers/shared/stack/reconciler/__tests__/ReactEmptyComponent-test.js
@@ -32,35 +32,37 @@ describe('ReactEmptyComponent', function() {
 
     log = jasmine.createSpy();
 
-    TogglingComponent = React.createClass({
-      getInitialState: function() {
-        return {component: this.props.firstComponent};
-      },
-      componentDidMount: function() {
+    TogglingComponent = class extends React.Component {
+      state = {component: this.props.firstComponent};
+
+      componentDidMount() {
         log(ReactDOM.findDOMNode(this));
         this.setState({component: this.props.secondComponent});
-      },
-      componentDidUpdate: function() {
+      }
+
+      componentDidUpdate() {
         log(ReactDOM.findDOMNode(this));
-      },
-      render: function() {
+      }
+
+      render() {
         var Component = this.state.component;
         return Component ? <Component /> : null;
-      },
-    });
+      }
+    };
   });
 
   it('should render null and false as a noscript tag under the hood', () => {
-    var Component1 = React.createClass({
-      render: function() {
+    class Component1 extends React.Component {
+      render() {
         return null;
-      },
-    });
-    var Component2 = React.createClass({
-      render: function() {
+      }
+    }
+
+    class Component2 extends React.Component {
+      render() {
         return false;
-      },
-    });
+      }
+    }
 
     var instance1 = ReactTestUtils.renderIntoDocument(<Component1 />);
     var instance2 = ReactTestUtils.renderIntoDocument(<Component2 />);
@@ -73,9 +75,10 @@ describe('ReactEmptyComponent', function() {
   });
 
   it('should still throw when rendering to undefined', () => {
-    var Component = React.createClass({
-      render: function() {},
-    });
+    class Component extends React.Component {
+      render() {}
+    }
+
     expect(function() {
       ReactTestUtils.renderIntoDocument(<Component />);
     }).toThrowError(
@@ -161,17 +164,17 @@ describe('ReactEmptyComponent', function() {
   it('should have findDOMNode return null when multiple layers of composite ' +
     'components render to the same null placeholder',
     () => {
-      var GrandChild = React.createClass({
-        render: function() {
+      class GrandChild extends React.Component {
+        render() {
           return null;
-        },
-      });
+        }
+      }
 
-      var Child = React.createClass({
-        render: function() {
+      class Child extends React.Component {
+        render() {
           return <GrandChild />;
-        },
-      });
+        }
+      }
 
       var instance1 =
         <TogglingComponent
@@ -201,28 +204,32 @@ describe('ReactEmptyComponent', function() {
 
   it('works when switching components', function() {
     var assertions = 0;
-    var Inner = React.createClass({
-      render: function() {
+
+    class Inner extends React.Component {
+      render() {
         return <span />;
-      },
-      componentDidMount: function() {
+      }
+
+      componentDidMount() {
         // Make sure the DOM node resolves properly even if we're replacing a
         // `null` component
         expect(ReactDOM.findDOMNode(this)).not.toBe(null);
         assertions++;
-      },
-      componentWillUnmount: function() {
+      }
+
+      componentWillUnmount() {
         // Even though we're getting replaced by `null`, we haven't been
         // replaced yet!
         expect(ReactDOM.findDOMNode(this)).not.toBe(null);
         assertions++;
-      },
-    });
-    var Wrapper = React.createClass({
-      render: function() {
+      }
+    }
+
+    class Wrapper extends React.Component {
+      render() {
         return this.props.showInner ? <Inner /> : null;
-      },
-    });
+      }
+    }
 
     var el = document.createElement('div');
     var component;
@@ -253,25 +260,27 @@ describe('ReactEmptyComponent', function() {
   });
 
   it('does not break when updating during mount', function() {
-    var Child = React.createClass({
+    class Child extends React.Component {
       componentDidMount() {
         if (this.props.onMount) {
           this.props.onMount();
         }
-      },
+      }
+
       render() {
         if (!this.props.visible) {
           return null;
         }
 
         return <div>hello world</div>;
-      },
-    });
+      }
+    }
 
-    var Parent = React.createClass({
-      update() {
+    class Parent extends React.Component {
+      update = () => {
         this.forceUpdate();
-      },
+      };
+
       render() {
         return (
           <div>
@@ -280,8 +289,8 @@ describe('ReactEmptyComponent', function() {
             <Child key="2" visible={false} />
           </div>
         );
-      },
-    });
+      }
+    }
 
     expect(function() {
       ReactTestUtils.renderIntoDocument(<Parent />);
@@ -289,11 +298,11 @@ describe('ReactEmptyComponent', function() {
   });
 
   it('preserves the dom node during updates', function() {
-    var Empty = React.createClass({
-      render: function() {
+    class Empty extends React.Component {
+      render() {
         return null;
-      },
-    });
+      }
+    }
 
     var container = document.createElement('div');
 
diff --git a/src/renderers/shared/stack/reconciler/__tests__/ReactIdentity-test.js b/src/renderers/shared/stack/reconciler/__tests__/ReactIdentity-test.js
index 02ec4361d0874..68681001f48f4 100644
--- a/src/renderers/shared/stack/reconciler/__tests__/ReactIdentity-test.js
+++ b/src/renderers/shared/stack/reconciler/__tests__/ReactIdentity-test.js
@@ -48,12 +48,11 @@ describe('ReactIdentity', function() {
   });
 
   it('should use composite identity', function() {
-
-    var Wrapper = React.createClass({
-      render: function() {
+    class Wrapper extends React.Component {
+      render() {
         return <a>{this.props.children}</a>;
-      },
-    });
+      }
+    }
 
     var container = document.createElement('div');
     var node1;
@@ -71,19 +70,16 @@ describe('ReactIdentity', function() {
   });
 
   function renderAComponentWithKeyIntoContainer(key, container) {
-
-    var Wrapper = React.createClass({
-
-      render: function() {
+    class Wrapper extends React.Component {
+      render() {
         var s1 = <span ref="span1" key={key} />;
         var s2 = <span ref="span2" />;
 
         var map = {};
         map[key] = s2;
         return <div>{[s1, frag(map)]}</div>;
-      },
-
-    });
+      }
+    }
 
     var instance = ReactDOM.render(<Wrapper />, container);
     var span1 = instance.refs.span1;
@@ -135,8 +131,8 @@ describe('ReactIdentity', function() {
     var instance1 = <span />;
     var instance2 = <span />;
 
-    var TestComponent = React.createClass({
-      render: function() {
+    class TestComponent extends React.Component {
+      render() {
         return (
           <div>
             {instance2}
@@ -144,16 +140,14 @@ describe('ReactIdentity', function() {
             {this.props.children[1]}
           </div>
         );
-      },
-    });
+      }
+    }
 
-    var TestContainer = React.createClass({
-
-      render: function() {
+    class TestContainer extends React.Component {
+      render() {
         return <TestComponent>{instance0}{instance1}</TestComponent>;
-      },
-
-    });
+      }
+    }
 
     expect(function() {
 
@@ -167,8 +161,8 @@ describe('ReactIdentity', function() {
     var instance1 = <span />;
     var instance2 = <span />;
 
-    var TestComponent = React.createClass({
-      render: function() {
+    class TestComponent extends React.Component {
+      render() {
         return (
           <div>
             {instance2}
@@ -176,20 +170,18 @@ describe('ReactIdentity', function() {
             {this.props.children[1]}
           </div>
         );
-      },
-    });
-
-    var TestContainer = React.createClass({
+      }
+    }
 
-      render: function() {
+    class TestContainer extends React.Component {
+      render() {
         return (
           <div>
             <TestComponent>{instance0}{instance1}</TestComponent>
           </div>
         );
-      },
-
-    });
+      }
+    }
 
     expect(function() {
 
@@ -199,24 +191,22 @@ describe('ReactIdentity', function() {
   });
 
   it('should let text nodes retain their uniqueness', function() {
-    var TestComponent = React.createClass({
-      render: function() {
+    class TestComponent extends React.Component {
+      render() {
         return <div>{this.props.children}<span /></div>;
-      },
-    });
-
-    var TestContainer = React.createClass({
+      }
+    }
 
-      render: function() {
+    class TestContainer extends React.Component {
+      render() {
         return (
           <TestComponent>
             <div />
             {'second'}
           </TestComponent>
         );
-      },
-
-    });
+      }
+    }
 
     expect(function() {
 
@@ -226,33 +216,28 @@ describe('ReactIdentity', function() {
   });
 
   it('should retain key during updates in composite components', function() {
-
-    var TestComponent = React.createClass({
-      render: function() {
+    class TestComponent extends React.Component {
+      render() {
         return <div>{this.props.children}</div>;
-      },
-    });
+      }
+    }
 
-    var TestContainer = React.createClass({
+    class TestContainer extends React.Component {
+      state = {swapped: false};
 
-      getInitialState: function() {
-        return {swapped: false};
-      },
-
-      swap: function() {
+      swap = () => {
         this.setState({swapped: true});
-      },
+      };
 
-      render: function() {
+      render() {
         return (
           <TestComponent>
             {this.state.swapped ? this.props.second : this.props.first}
             {this.state.swapped ? this.props.first : this.props.second}
           </TestComponent>
         );
-      },
-
-    });
+      }
+    }
 
     var instance0 = <span key="A" />;
     var instance1 = <span key="B" />;
@@ -270,7 +255,6 @@ describe('ReactIdentity', function() {
 
     expect(beforeA).toBe(afterA);
     expect(beforeB).toBe(afterB);
-
   });
 
   it('should not allow implicit and explicit keys to collide', function() {
diff --git a/src/renderers/shared/stack/reconciler/__tests__/ReactMockedComponent-test.js b/src/renderers/shared/stack/reconciler/__tests__/ReactMockedComponent-test.js
index 69a7f8dc5277b..8ab4cbec6c8b3 100644
--- a/src/renderers/shared/stack/reconciler/__tests__/ReactMockedComponent-test.js
+++ b/src/renderers/shared/stack/reconciler/__tests__/ReactMockedComponent-test.js
@@ -36,21 +36,17 @@ describe('ReactMockedComponent', function() {
   });
 
   it('should allow an implicitly mocked component to be updated', () => {
-    var Wrapper = React.createClass({
+    class Wrapper extends React.Component {
+      state = {foo: 1};
 
-      getInitialState: function() {
-        return {foo: 1};
-      },
-
-      update: function() {
+      update = () => {
         this.setState({foo: 2});
-      },
+      };
 
-      render: function() {
+      render() {
         return <div><AutoMockedComponent prop={this.state.foo} /></div>;
-      },
-
-    });
+      }
+    }
 
     var instance = ReactTestUtils.renderIntoDocument(<Wrapper />);
 
@@ -73,21 +69,18 @@ describe('ReactMockedComponent', function() {
   });
 
   it('should allow an explicitly mocked component to be updated', () => {
-    var Wrapper = React.createClass({
-
-      getInitialState: function() {
-        return {foo: 1};
-      },
+    class Wrapper extends React.Component {
+      state = {foo: 1};
 
-      update: function() {
+      update = () => {
         this.setState({foo: 2});
-      },
+      };
 
-      render: function() {
+      render() {
         return <div><MockedComponent prop={this.state.foo} /></div>;
-      },
+      }
+    }
 
-    });
     var instance = ReactTestUtils.renderIntoDocument(<Wrapper />);
 
     var found = ReactTestUtils.findRenderedComponentWithType(
diff --git a/src/renderers/shared/stack/reconciler/__tests__/ReactMultiChild-test.js b/src/renderers/shared/stack/reconciler/__tests__/ReactMultiChild-test.js
index 4e2d503a67769..af5cc7da7a9a1 100644
--- a/src/renderers/shared/stack/reconciler/__tests__/ReactMultiChild-test.js
+++ b/src/renderers/shared/stack/reconciler/__tests__/ReactMultiChild-test.js
@@ -101,11 +101,11 @@ describe('ReactMultiChild', function() {
         },
       });
 
-      var WrapperComponent = React.createClass({
-        render: function() {
+      class WrapperComponent extends React.Component {
+        render() {
           return this.props.children || <MockComponent />;
-        },
-      });
+        }
+      }
 
       expect(mockMount.mock.calls.length).toBe(0);
       expect(mockUnmount.mock.calls.length).toBe(0);
@@ -157,14 +157,14 @@ describe('ReactMultiChild', function() {
 
       var container = document.createElement('div');
 
-      var WrapperComponent = React.createClass({
-        render: function() {
+      class WrapperComponent extends React.Component {
+        render() {
           return <div>{this.props.children}</div>;
-        },
-      });
+        }
+      }
 
-      var Parent = React.createClass({
-        render: function() {
+      class Parent extends React.Component {
+        render() {
           return (
             <div>
               <WrapperComponent>
@@ -172,8 +172,8 @@ describe('ReactMultiChild', function() {
               </WrapperComponent>
             </div>
           );
-        },
-      });
+        }
+      }
 
       ReactDOM.render(
         <Parent>{[<div key="1"/>]}</Parent>,
diff --git a/src/renderers/shared/stack/reconciler/__tests__/ReactMultiChildReconcile-test.js b/src/renderers/shared/stack/reconciler/__tests__/ReactMultiChildReconcile-test.js
index 034d839b0fc0c..c176d69b6d4d2 100644
--- a/src/renderers/shared/stack/reconciler/__tests__/ReactMultiChildReconcile-test.js
+++ b/src/renderers/shared/stack/reconciler/__tests__/ReactMultiChildReconcile-test.js
@@ -47,46 +47,44 @@ var getOriginalKey = function(childName) {
  * existing children won't reinitialize components, when moving children -
  * reusing existing DOM/memory resources.
  */
-var StatusDisplay = React.createClass({
-  getInitialState: function() {
-    return {internalState: Math.random()};
-  },
+class StatusDisplay extends React.Component {
+  state = {internalState: Math.random()};
 
-  getStatus: function() {
+  getStatus = () => {
     return this.props.status;
-  },
+  };
 
-  getInternalState: function() {
+  getInternalState = () => {
     return this.state.internalState;
-  },
+  };
 
-  componentDidMount: function() {
+  componentDidMount() {
     this.props.onFlush();
-  },
+  }
 
-  componentDidUpdate: function() {
+  componentDidUpdate() {
     this.props.onFlush();
-  },
+  }
 
-  render: function() {
+  render() {
     return (
       <div>
         {this.state.internalState}
       </div>
     );
-  },
-});
+  }
+}
 
 /**
  * Displays friends statuses.
  */
-var FriendsStatusDisplay = React.createClass({
+class FriendsStatusDisplay extends React.Component {
   /**
   * Gets the order directly from each rendered child's `index` field.
   * Refs are not maintained in the rendered order, and neither is
   * `this._renderedChildren` (surprisingly).
   */
-  getOriginalKeys: function() {
+  getOriginalKeys = () => {
     var originalKeys = [];
     // TODO: Update this to a better test that doesn't rely so much on internal
     // implementation details.
@@ -103,12 +101,13 @@ var FriendsStatusDisplay = React.createClass({
       }
     }
     return originalKeys;
-  },
+  };
+
   /**
    * Retrieves the rendered children in a nice format for comparing to the input
    * `this.props.usernameToStatus`.
    */
-  getStatusDisplays: function() {
+  getStatusDisplays = () => {
     var res = {};
     var i;
     var originalKeys = this.getOriginalKeys();
@@ -117,7 +116,8 @@ var FriendsStatusDisplay = React.createClass({
       res[key] = this.refs[key];
     }
     return res;
-  },
+  };
+
   /**
    * Verifies that by the time a child is flushed, the refs that appeared
    * earlier have already been resolved.
@@ -125,7 +125,7 @@ var FriendsStatusDisplay = React.createClass({
    * but our internal layer API depends on this assumption. We need to change
    * it to be more declarative before making ref resolution indeterministic.
    */
-  verifyPreviousRefsResolved: function(flushedKey) {
+  verifyPreviousRefsResolved = (flushedKey) => {
     var i;
     var originalKeys = this.getOriginalKeys();
     for (i = 0; i < originalKeys.length; i++) {
@@ -136,8 +136,9 @@ var FriendsStatusDisplay = React.createClass({
       }
       expect(this.refs[key]).toBeTruthy();
     }
-  },
-  render: function() {
+  };
+
+  render() {
     var children = [];
     var key;
     for (key in this.props.usernameToStatus) {
@@ -157,8 +158,8 @@ var FriendsStatusDisplay = React.createClass({
         {children}
       </div>
     );
-  },
-});
+  }
+}
 
 
 function getInternalStateByUserName(statusDisplays) {
diff --git a/src/renderers/shared/stack/reconciler/__tests__/ReactStateSetters-test.js b/src/renderers/shared/stack/reconciler/__tests__/ReactStateSetters-test.js
index 23b0e5d86f327..c9eecc536bef8 100644
--- a/src/renderers/shared/stack/reconciler/__tests__/ReactStateSetters-test.js
+++ b/src/renderers/shared/stack/reconciler/__tests__/ReactStateSetters-test.js
@@ -22,15 +22,13 @@ describe('ReactStateSetters', function() {
   beforeEach(function() {
     jest.resetModuleRegistry();
 
-    TestComponent = React.createClass({
-      getInitialState: function() {
-        return {foo: 'foo'};
-      },
+    TestComponent = class extends React.Component {
+      state = {foo: 'foo'};
 
-      render: function() {
+      render() {
         return <div />;
-      },
-    });
+      }
+    };
 
     TestComponentWithMixin = React.createClass({
       mixins: [ReactStateSetters.Mixin],
diff --git a/src/renderers/shared/stack/reconciler/__tests__/ReactStatelessComponent-test.js b/src/renderers/shared/stack/reconciler/__tests__/ReactStatelessComponent-test.js
index 47d2e6f073f88..5c0bdb9a348fc 100644
--- a/src/renderers/shared/stack/reconciler/__tests__/ReactStatelessComponent-test.js
+++ b/src/renderers/shared/stack/reconciler/__tests__/ReactStatelessComponent-test.js
@@ -35,11 +35,11 @@ describe('ReactStatelessComponent', function() {
   });
 
   it('should update stateless component', function() {
-    var Parent = React.createClass({
+    class Parent extends React.Component {
       render() {
         return <StatelessComponent {...this.props} />;
-      },
-    });
+      }
+    }
 
     var el = document.createElement('div');
     ReactDOM.render(<Parent name="A" />, el);
@@ -60,33 +60,33 @@ describe('ReactStatelessComponent', function() {
   });
 
   it('should pass context thru stateless component', function() {
-    var Child = React.createClass({
-      contextTypes: {
+    class Child extends React.Component {
+      static contextTypes = {
         test: React.PropTypes.string.isRequired,
-      },
+      };
 
-      render: function() {
+      render() {
         return <div>{this.context.test}</div>;
-      },
-    });
+      }
+    }
 
     function Parent() {
       return <Child />;
     }
 
-    var GrandParent = React.createClass({
-      childContextTypes: {
+    class GrandParent extends React.Component {
+      static childContextTypes = {
         test: React.PropTypes.string.isRequired,
-      },
+      };
 
       getChildContext() {
         return {test: this.props.test};
-      },
+      }
 
-      render: function() {
+      render() {
         return <Parent />;
-      },
-    });
+      }
+    }
 
     var el = document.createElement('div');
     ReactDOM.render(<GrandParent test="test" />, el);
@@ -149,12 +149,14 @@ describe('ReactStatelessComponent', function() {
   it('should warn when given a ref', function() {
     spyOn(console, 'error');
 
-    var Parent = React.createClass({
-      displayName: 'Parent',
-      render: function() {
+    class Parent extends React.Component {
+      static displayName = 'Parent';
+
+      render() {
         return <StatelessComponent name="A" ref="stateless"/>;
-      },
-    });
+      }
+    }
+
     ReactTestUtils.renderIntoDocument(<Parent/>);
 
     expect(console.error.calls.count()).toBe(1);
@@ -206,17 +208,20 @@ describe('ReactStatelessComponent', function() {
   });
 
   it('should receive context', function() {
-    var Parent = React.createClass({
-      childContextTypes: {
+    class Parent extends React.Component {
+      static childContextTypes = {
         lang: React.PropTypes.string,
-      },
-      getChildContext: function() {
+      };
+
+      getChildContext() {
         return {lang: 'en'};
-      },
-      render: function() {
+      }
+
+      render() {
         return <Child />;
-      },
-    });
+      }
+    }
+
     function Child(props, context) {
       return <div>{context.lang}</div>;
     }
diff --git a/src/renderers/shared/stack/reconciler/__tests__/ReactUpdates-test.js b/src/renderers/shared/stack/reconciler/__tests__/ReactUpdates-test.js
index d0035d7284fdc..b94066f97ee6b 100644
--- a/src/renderers/shared/stack/reconciler/__tests__/ReactUpdates-test.js
+++ b/src/renderers/shared/stack/reconciler/__tests__/ReactUpdates-test.js
@@ -26,17 +26,18 @@ describe('ReactUpdates', function() {
 
   it('should batch state when updating state twice', function() {
     var updateCount = 0;
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {x: 0};
-      },
-      componentDidUpdate: function() {
+
+    class Component extends React.Component {
+      state = {x: 0};
+
+      componentDidUpdate() {
         updateCount++;
-      },
-      render: function() {
+      }
+
+      render() {
         return <div>{this.state.x}</div>;
-      },
-    });
+      }
+    }
 
     var instance = ReactTestUtils.renderIntoDocument(<Component />);
     expect(instance.state.x).toBe(0);
@@ -54,17 +55,18 @@ describe('ReactUpdates', function() {
 
   it('should batch state when updating two different state keys', function() {
     var updateCount = 0;
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {x: 0, y: 0};
-      },
-      componentDidUpdate: function() {
+
+    class Component extends React.Component {
+      state = {x: 0, y: 0};
+
+      componentDidUpdate() {
         updateCount++;
-      },
-      render: function() {
+      }
+
+      render() {
         return <div>({this.state.x}, {this.state.y})</div>;
-      },
-    });
+      }
+    }
 
     var instance = ReactTestUtils.renderIntoDocument(<Component />);
     expect(instance.state.x).toBe(0);
@@ -85,17 +87,18 @@ describe('ReactUpdates', function() {
 
   it('should batch state and props together', function() {
     var updateCount = 0;
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {y: 0};
-      },
-      componentDidUpdate: function() {
+
+    class Component extends React.Component {
+      state = {y: 0};
+
+      componentDidUpdate() {
         updateCount++;
-      },
-      render: function() {
+      }
+
+      render() {
         return <div>({this.props.x}, {this.state.y})</div>;
-      },
-    });
+      }
+    }
 
     var container = document.createElement('div');
     var instance = ReactDOM.render(<Component x={0} />, container);
@@ -117,29 +120,32 @@ describe('ReactUpdates', function() {
 
   it('should batch parent/child state updates together', function() {
     var parentUpdateCount = 0;
-    var Parent = React.createClass({
-      getInitialState: function() {
-        return {x: 0};
-      },
-      componentDidUpdate: function() {
+
+    class Parent extends React.Component {
+      state = {x: 0};
+
+      componentDidUpdate() {
         parentUpdateCount++;
-      },
-      render: function() {
+      }
+
+      render() {
         return <div><Child ref="child" x={this.state.x} /></div>;
-      },
-    });
+      }
+    }
+
     var childUpdateCount = 0;
-    var Child = React.createClass({
-      getInitialState: function() {
-        return {y: 0};
-      },
-      componentDidUpdate: function() {
+
+    class Child extends React.Component {
+      state = {y: 0};
+
+      componentDidUpdate() {
         childUpdateCount++;
-      },
-      render: function() {
+      }
+
+      render() {
         return <div>{this.props.x + this.state.y}</div>;
-      },
-    });
+      }
+    }
 
     var instance = ReactTestUtils.renderIntoDocument(<Parent />);
     var child = instance.refs.child;
@@ -163,29 +169,32 @@ describe('ReactUpdates', function() {
 
   it('should batch child/parent state updates together', function() {
     var parentUpdateCount = 0;
-    var Parent = React.createClass({
-      getInitialState: function() {
-        return {x: 0};
-      },
-      componentDidUpdate: function() {
+
+    class Parent extends React.Component {
+      state = {x: 0};
+
+      componentDidUpdate() {
         parentUpdateCount++;
-      },
-      render: function() {
+      }
+
+      render() {
         return <div><Child ref="child" x={this.state.x} /></div>;
-      },
-    });
+      }
+    }
+
     var childUpdateCount = 0;
-    var Child = React.createClass({
-      getInitialState: function() {
-        return {y: 0};
-      },
-      componentDidUpdate: function() {
+
+    class Child extends React.Component {
+      state = {y: 0};
+
+      componentDidUpdate() {
         childUpdateCount++;
-      },
-      render: function() {
+      }
+
+      render() {
         return <div>{this.props.x + this.state.y}</div>;
-      },
-    });
+      }
+    }
 
     var instance = ReactTestUtils.renderIntoDocument(<Parent />);
     var child = instance.refs.child;
@@ -211,17 +220,18 @@ describe('ReactUpdates', function() {
 
   it('should support chained state updates', function() {
     var updateCount = 0;
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {x: 0};
-      },
-      componentDidUpdate: function() {
+
+    class Component extends React.Component {
+      state = {x: 0};
+
+      componentDidUpdate() {
         updateCount++;
-      },
-      render: function() {
+      }
+
+      render() {
         return <div>{this.state.x}</div>;
-      },
-    });
+      }
+    }
 
     var instance = ReactTestUtils.renderIntoDocument(<Component />);
     expect(instance.state.x).toBe(0);
@@ -250,20 +260,22 @@ describe('ReactUpdates', function() {
   it('should batch forceUpdate together', function() {
     var shouldUpdateCount = 0;
     var updateCount = 0;
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {x: 0};
-      },
-      shouldComponentUpdate: function() {
+
+    class Component extends React.Component {
+      state = {x: 0};
+
+      shouldComponentUpdate() {
         shouldUpdateCount++;
-      },
-      componentDidUpdate: function() {
+      }
+
+      componentDidUpdate() {
         updateCount++;
-      },
-      render: function() {
+      }
+
+      render() {
         return <div>{this.state.x}</div>;
-      },
-    });
+      }
+    }
 
     var instance = ReactTestUtils.renderIntoDocument(<Component />);
     expect(instance.state.x).toBe(0);
@@ -291,23 +303,23 @@ describe('ReactUpdates', function() {
     var parentRenderCount = 0;
     var childRenderCount = 0;
 
-    var Parent = React.createClass({
-      shouldComponentUpdate: function() {
+    class Parent extends React.Component {
+      shouldComponentUpdate() {
         return false;
-      },
+      }
 
-      render: function() {
+      render() {
         parentRenderCount++;
         return <Child ref="child" />;
-      },
-    });
+      }
+    }
 
-    var Child = React.createClass({
-      render: function() {
+    class Child extends React.Component {
+      render() {
         childRenderCount++;
         return <div />;
-      },
-    });
+      }
+    }
 
     expect(parentRenderCount).toBe(0);
     expect(childRenderCount).toBe(0);
@@ -337,29 +349,29 @@ describe('ReactUpdates', function() {
     var numMiddleRenders = 0;
     var numBottomRenders = 0;
 
-    var Top = React.createClass({
-      render: function() {
+    class Top extends React.Component {
+      render() {
         return <Middle><Bottom /></Middle>;
-      },
-    });
+      }
+    }
 
-    var Middle = React.createClass({
-      componentDidMount: function() {
+    class Middle extends React.Component {
+      componentDidMount() {
         this.forceUpdate();
-      },
+      }
 
-      render: function() {
+      render() {
         numMiddleRenders++;
         return React.Children.only(this.props.children);
-      },
-    });
+      }
+    }
 
-    var Bottom = React.createClass({
-      render: function() {
+    class Bottom extends React.Component {
+      render() {
         numBottomRenders++;
         return null;
-      },
-    });
+      }
+    }
 
     ReactTestUtils.renderIntoDocument(<Top />);
     expect(numMiddleRenders).toBe(2);
@@ -497,11 +509,11 @@ describe('ReactUpdates', function() {
     var ReconcileTransaction = ReactUpdates.ReactReconcileTransaction;
     spyOn(ReconcileTransaction, 'getPooled').and.callThrough();
 
-    var Component = React.createClass({
-      render: function() {
+    class Component extends React.Component {
+      render() {
         return <div>{this.props.text}</div>;
-      },
-    });
+      }
+    }
 
     var containerA = document.createElement('div');
     var containerB = document.createElement('div');
@@ -532,27 +544,26 @@ describe('ReactUpdates', function() {
 
     var aUpdated = false;
 
-    var A = React.createClass({
-      getInitialState: function() {
-        return {x: 0};
-      },
-      componentDidUpdate: function() {
+    class A extends React.Component {
+      state = {x: 0};
+
+      componentDidUpdate() {
         expect(ReactDOM.findDOMNode(b).textContent).toBe('B1');
         aUpdated = true;
-      },
-      render: function() {
+      }
+
+      render() {
         return <div>A{this.state.x}</div>;
-      },
-    });
+      }
+    }
 
-    var B = React.createClass({
-      getInitialState: function() {
-        return {x: 0};
-      },
-      render: function() {
+    class B extends React.Component {
+      state = {x: 0};
+
+      render() {
         return <div>B{this.state.x}</div>;
-      },
-    });
+      }
+    }
 
     a = ReactTestUtils.renderIntoDocument(<A />);
     b = ReactTestUtils.renderIntoDocument(<B />);
@@ -567,35 +578,37 @@ describe('ReactUpdates', function() {
 
   it('should flush updates in the correct order', function() {
     var updates = [];
-    var Outer = React.createClass({
-      getInitialState: function() {
-        return {x: 0};
-      },
-      render: function() {
+
+    class Outer extends React.Component {
+      state = {x: 0};
+
+      render() {
         updates.push('Outer-render-' + this.state.x);
         return <div><Inner x={this.state.x} ref="inner" /></div>;
-      },
-      componentDidUpdate: function() {
+      }
+
+      componentDidUpdate() {
         var x = this.state.x;
         updates.push('Outer-didUpdate-' + x);
         updates.push('Inner-setState-' + x);
         this.refs.inner.setState({x: x}, function() {
           updates.push('Inner-callback-' + x);
         });
-      },
-    });
-    var Inner = React.createClass({
-      getInitialState: function() {
-        return {x: 0};
-      },
-      render: function() {
+      }
+    }
+
+    class Inner extends React.Component {
+      state = {x: 0};
+
+      render() {
         updates.push('Inner-render-' + this.props.x + '-' + this.state.x);
         return <div />;
-      },
-      componentDidUpdate: function() {
+      }
+
+      componentDidUpdate() {
         updates.push('Inner-didUpdate-' + this.props.x + '-' + this.state.x);
-      },
-    });
+      }
+    }
 
     var instance = ReactTestUtils.renderIntoDocument(<Outer />);
 
@@ -642,12 +655,13 @@ describe('ReactUpdates', function() {
     var instances = [];
     var updates = [];
 
-    var MockComponent = React.createClass({
-      render: function() {
+    class MockComponent extends React.Component {
+      render() {
         updates.push(this.props.depth);
         return <div />;
-      },
-      componentDidMount: function() {
+      }
+
+      componentDidMount() {
         instances.push(this);
         if (this.props.depth < this.props.count) {
           ReactDOM.render(
@@ -658,8 +672,8 @@ describe('ReactUpdates', function() {
             ReactDOM.findDOMNode(this)
           );
         }
-      },
-    });
+      }
+    }
 
     ReactTestUtils.renderIntoDocument(<MockComponent depth={0} count={2} />);
 
@@ -678,11 +692,10 @@ describe('ReactUpdates', function() {
   it('should queue nested updates', function() {
     // See https://github.com/facebook/react/issues/1147
 
-    var X = React.createClass({
-      getInitialState: function() {
-        return {s: 0};
-      },
-      render: function() {
+    class X extends React.Component {
+      state = {s: 0};
+
+      render() {
         if (this.state.s === 0) {
           return (
             <div>
@@ -692,32 +705,34 @@ describe('ReactUpdates', function() {
         } else {
           return <div>1</div>;
         }
-      },
-      go: function() {
+      }
+
+      go = () => {
         this.setState({s: 1});
         this.setState({s: 0});
         this.setState({s: 1});
-      },
-    });
+      };
+    }
 
-    var Y = React.createClass({
-      render: function() {
+    class Y extends React.Component {
+      render() {
         return (
           <div>
             <Z />
           </div>
         );
-      },
-    });
+      }
+    }
 
-    var Z = React.createClass({
-      render: function() {
+    class Z extends React.Component {
+      render() {
         return <div />;
-      },
-      componentWillUpdate: function() {
+      }
+
+      componentWillUpdate() {
         x.go();
-      },
-    });
+      }
+    }
 
     var x;
     var y;
@@ -734,26 +749,27 @@ describe('ReactUpdates', function() {
     // See https://github.com/facebook/react/issues/1353
     var a;
 
-    var A = React.createClass({
-      getInitialState: function() {
-        return {x: 0};
-      },
-      componentWillMount: function() {
+    class A extends React.Component {
+      state = {x: 0};
+
+      componentWillMount() {
         a = this;
-      },
-      render: function() {
+      }
+
+      render() {
         return <div>A{this.state.x}</div>;
-      },
-    });
+      }
+    }
 
-    var B = React.createClass({
-      componentWillMount: function() {
+    class B extends React.Component {
+      componentWillMount() {
         a.setState({x: 1});
-      },
-      render: function() {
+      }
+
+      render() {
         return <div />;
-      },
-    });
+      }
+    }
 
     ReactUpdates.batchedUpdates(function() {
       ReactTestUtils.renderIntoDocument(
@@ -770,22 +786,23 @@ describe('ReactUpdates', function() {
 
   it('calls componentWillReceiveProps setState callback properly', function() {
     var callbackCount = 0;
-    var A = React.createClass({
-      getInitialState: function() {
-        return {x: this.props.x};
-      },
-      componentWillReceiveProps: function(nextProps) {
+
+    class A extends React.Component {
+      state = {x: this.props.x};
+
+      componentWillReceiveProps(nextProps) {
         var newX = nextProps.x;
         this.setState({x: newX}, function() {
           // State should have updated by the time this callback gets called
           expect(this.state.x).toBe(newX);
           callbackCount++;
         });
-      },
-      render: function() {
+      }
+
+      render() {
         return <div>{this.state.x}</div>;
-      },
-    });
+      }
+    }
 
     var container = document.createElement('div');
     ReactDOM.render(<A x={1} />, container);
@@ -795,11 +812,13 @@ describe('ReactUpdates', function() {
 
   it('calls asap callbacks properly', function() {
     var callbackCount = 0;
-    var A = React.createClass({
-      render: function() {
+
+    class A extends React.Component {
+      render() {
         return <div />;
-      },
-      componentDidUpdate: function() {
+      }
+
+      componentDidUpdate() {
         ReactUpdates.asap(function() {
           expect(this).toBe(component);
           callbackCount++;
@@ -809,8 +828,8 @@ describe('ReactUpdates', function() {
           expect(callbackCount).toBe(1);
         }, component);
         expect(callbackCount).toBe(0);
-      },
-    });
+      }
+    }
 
     var component = ReactTestUtils.renderIntoDocument(<A />);
     component.forceUpdate();
@@ -819,13 +838,16 @@ describe('ReactUpdates', function() {
 
   it('calls asap callbacks with queued updates', function() {
     var log = [];
-    var A = React.createClass({
-      getInitialState: () => ({updates: 0}),
-      render: function() {
+
+    class A extends React.Component {
+      state = {updates: 0};
+
+      render() {
         log.push('render-' + this.state.updates);
         return <div />;
-      },
-      componentDidUpdate: function() {
+      }
+
+      componentDidUpdate() {
         if (this.state.updates === 1) {
           ReactUpdates.asap(function() {
             this.setState({updates: 2}, function() {
@@ -842,8 +864,8 @@ describe('ReactUpdates', function() {
           });
         }
         log.push('didUpdate-' + this.state.updates);
-      },
-    });
+      }
+    }
 
     var component = ReactTestUtils.renderIntoDocument(<A />);
     component.setState({updates: 1});
@@ -866,31 +888,29 @@ describe('ReactUpdates', function() {
   });
 
   it('does not call render after a component as been deleted', function() {
-
     var renderCount = 0;
     var componentB = null;
 
-    var B = React.createClass({
-      getInitialState: function() {
-        return {updates: 0};
-      },
-      componentDidMount: function() {
+    class B extends React.Component {
+      state = {updates: 0};
+
+      componentDidMount() {
         componentB = this;
-      },
-      render: function() {
+      }
+
+      render() {
         renderCount++;
         return <div />;
-      },
-    });
+      }
+    }
 
-    var A = React.createClass({
-      getInitialState: function() {
-        return {showB: true};
-      },
-      render: function() {
+    class A extends React.Component {
+      state = {showB: true};
+
+      render() {
         return this.state.showB ? <B /> : <div />;
-      },
-    });
+      }
+    }
 
     var component = ReactTestUtils.renderIntoDocument(<A />);
 
@@ -907,17 +927,17 @@ describe('ReactUpdates', function() {
   it('marks top-level updates', function() {
     var ReactFeatureFlags = require('ReactFeatureFlags');
 
-    var Foo = React.createClass({
-      render: function() {
+    class Foo extends React.Component {
+      render() {
         return <Bar />;
-      },
-    });
+      }
+    }
 
-    var Bar = React.createClass({
-      render: function() {
+    class Bar extends React.Component {
+      render() {
         return <div />;
-      },
-    });
+      }
+    }
 
     var container = document.createElement('div');
     ReactDOM.render(<Foo />, container);
@@ -943,14 +963,15 @@ describe('ReactUpdates', function() {
       this.a = 1;
       this.b = 2;
     }
-    var A = React.createClass({
-      getInitialState: function() {
-        return {};
-      },
-      render: function() {
+
+    class A extends React.Component {
+      state = {};
+
+      render() {
         return <div />;
-      },
-    });
+      }
+    }
+
     var component = ReactTestUtils.renderIntoDocument(<A />);
 
     expect(() => component.setState({}, 'no')).toThrowError(
@@ -1001,14 +1022,15 @@ describe('ReactUpdates', function() {
       this.a = 1;
       this.b = 2;
     }
-    var A = React.createClass({
-      getInitialState: function() {
-        return {};
-      },
-      render: function() {
+
+    class A extends React.Component {
+      state = {};
+
+      render() {
         return <div />;
-      },
-    });
+      }
+    }
+
     var component = ReactTestUtils.renderIntoDocument(<A />);
 
     expect(() => component.forceUpdate('no')).toThrowError(
@@ -1026,42 +1048,46 @@ describe('ReactUpdates', function() {
   });
 
   it('does not update one component twice in a batch (#2410)', function() {
-    var Parent = React.createClass({
-      getChild: function() {
+    class Parent extends React.Component {
+      getChild = () => {
         return this.refs.child;
-      },
-      render: function() {
+      };
+
+      render() {
         return <Child ref="child" />;
-      },
-    });
+      }
+    }
 
     var renderCount = 0;
     var postRenderCount = 0;
     var once = false;
-    var Child = React.createClass({
-      getInitialState: function() {
-        return {updated: false};
-      },
-      componentWillUpdate: function() {
+
+    class Child extends React.Component {
+      state = {updated: false};
+
+      componentWillUpdate() {
         if (!once) {
           once = true;
           this.setState({updated: true});
         }
-      },
-      componentDidMount: function() {
+      }
+
+      componentDidMount() {
         expect(renderCount).toBe(postRenderCount + 1);
         postRenderCount++;
-      },
-      componentDidUpdate: function() {
+      }
+
+      componentDidUpdate() {
         expect(renderCount).toBe(postRenderCount + 1);
         postRenderCount++;
-      },
-      render: function() {
+      }
+
+      render() {
         expect(renderCount).toBe(postRenderCount);
         renderCount++;
         return <div />;
-      },
-    });
+      }
+    }
 
     var parent = ReactTestUtils.renderIntoDocument(<Parent />);
     var child = parent.getChild();
diff --git a/src/renderers/shared/stack/reconciler/__tests__/refs-destruction-test.js b/src/renderers/shared/stack/reconciler/__tests__/refs-destruction-test.js
index 0d001c22540bd..d516c538787df 100644
--- a/src/renderers/shared/stack/reconciler/__tests__/refs-destruction-test.js
+++ b/src/renderers/shared/stack/reconciler/__tests__/refs-destruction-test.js
@@ -25,8 +25,8 @@ describe('refs-destruction', function() {
     ReactDOM = require('ReactDOM');
     ReactTestUtils = require('ReactTestUtils');
 
-    TestComponent = React.createClass({
-      render: function() {
+    TestComponent = class extends React.Component {
+      render() {
         return (
           <div>
             {this.props.destroy ? null :
@@ -36,8 +36,8 @@ describe('refs-destruction', function() {
             }
           </div>
         );
-      },
-    });
+      }
+    };
   });
 
   it('should remove refs when destroying the parent', function() {
@@ -61,16 +61,18 @@ describe('refs-destruction', function() {
   });
 
   it('should not error when destroying child with ref asynchronously', function() {
-    var Modal = React.createClass({
-      componentDidMount: function() {
+    class Modal extends React.Component {
+      componentDidMount() {
         this.div = document.createElement('div');
         document.body.appendChild(this.div);
         this.componentDidUpdate();
-      },
-      componentDidUpdate: function() {
+      }
+
+      componentDidUpdate() {
         ReactDOM.render(<div>{this.props.children}</div>, this.div);
-      },
-      componentWillUnmount: function() {
+      }
+
+      componentWillUnmount() {
         var self = this;
         // some async animation
         setTimeout(function() {
@@ -79,23 +81,27 @@ describe('refs-destruction', function() {
           }).not.toThrow();
           document.body.removeChild(self.div);
         }, 0);
-      },
+      }
+
       render() {
         return null;
-      },
-    });
-    var AppModal = React.createClass({
-      render: function() {
+      }
+    }
+
+    class AppModal extends React.Component {
+      render() {
         return (<Modal>
           <a ref="ref"/>
         </Modal>);
-      },
-    });
-    var App = React.createClass({
-      render: function() {
+      }
+    }
+
+    class App extends React.Component {
+      render() {
         return this.props.hidden ? null : <AppModal onClose={this.close}/>;
-      },
-    });
+      }
+    }
+
     var container = document.createElement('div');
     ReactDOM.render(<App />, container);
     ReactDOM.render(<App hidden={true}/>, container);
diff --git a/src/renderers/shared/stack/reconciler/__tests__/refs-test.js b/src/renderers/shared/stack/reconciler/__tests__/refs-test.js
index 86010932b2c19..642d6af1d4f9c 100644
--- a/src/renderers/shared/stack/reconciler/__tests__/refs-test.js
+++ b/src/renderers/shared/stack/reconciler/__tests__/refs-test.js
@@ -21,17 +21,18 @@ var reactComponentExpect = require('reactComponentExpect');
  * Counts clicks and has a renders an item for each click. Each item rendered
  * has a ref of the form "clickLogN".
  */
-var ClickCounter = React.createClass({
-  getInitialState: function() {
-    return {count: this.props.initialCount};
-  },
-  triggerReset: function() {
+class ClickCounter extends React.Component {
+  state = {count: this.props.initialCount};
+
+  triggerReset = () => {
     this.setState({count: this.props.initialCount});
-  },
-  handleClick: function() {
+  };
+
+  handleClick = () => {
     this.setState({count: this.state.count + 1});
-  },
-  render: function() {
+  };
+
+  render() {
     var children = [];
     var i;
     for (i = 0; i < this.state.count; i++) {
@@ -48,29 +49,30 @@ var ClickCounter = React.createClass({
         {children}
       </span>
     );
-  },
-});
+  }
+}
 
 /**
  * Only purpose is to test that refs are tracked even when applied to a
  * component that is injected down several layers. Ref systems are difficult to
  * build in such a way that ownership is maintained in an airtight manner.
  */
-var GeneralContainerComponent = React.createClass({
-  render: function() {
+class GeneralContainerComponent extends React.Component {
+  render() {
     return <div>{this.props.children}</div>;
-  },
-});
+  }
+}
 
 /**
  * Notice how refs ownership is maintained even when injecting a component
  * into a different parent.
  */
-var TestRefsComponent = React.createClass({
-  doReset: function() {
+class TestRefsComponent extends React.Component {
+  doReset = () => {
     this.refs.myCounter.triggerReset();
-  },
-  render: function() {
+  };
+
+  render() {
     return (
       <div>
         <div ref="resetDiv" onClick={this.doReset}>
@@ -81,8 +83,8 @@ var TestRefsComponent = React.createClass({
         </GeneralContainerComponent>
       </div>
     );
-  },
-});
+  }
+}
 
 /**
  * Render a TestRefsComponent and ensure that the main refs are wired up.
@@ -161,14 +163,14 @@ describe('ref swapping', function() {
     jest.resetModuleRegistry();
   });
 
-  var RefHopsAround = React.createClass({
-    getInitialState: function() {
-      return {count: 0};
-    },
-    moveRef: function() {
+  class RefHopsAround extends React.Component {
+    state = {count: 0};
+
+    moveRef = () => {
       this.setState({count: this.state.count + 1});
-    },
-    render: function() {
+    };
+
+    render() {
       var count = this.state.count;
       /**
        * What we have here, is three divs with refs (div1/2/3), but a single
@@ -192,8 +194,8 @@ describe('ref swapping', function() {
           />
         </div>
       );
-    },
-  });
+    }
+  }
 
   it('Allow refs to hop around children correctly', function() {
     var refHopsAround = ReactTestUtils.renderIntoDocument(<RefHopsAround />);
@@ -231,11 +233,11 @@ describe('ref swapping', function() {
 
 
   it('always has a value for this.refs', function() {
-    var Component = React.createClass({
-      render: function() {
+    class Component extends React.Component {
+      render() {
         return <div />;
-      },
-    });
+      }
+    }
 
     var instance = ReactTestUtils.renderIntoDocument(<Component />);
     expect(!!instance.refs).toBe(true);
@@ -246,17 +248,21 @@ describe('ref swapping', function() {
     function Inner(props) {
       return <a ref={props.saveA} />;
     }
-    var Outer = React.createClass({
-      saveA() {
+
+    class Outer extends React.Component {
+      saveA = () => {
         refCalled++;
-      },
+      };
+
       componentDidMount() {
         this.setState({});
-      },
+      }
+
       render() {
         return <Inner saveA={this.saveA} />;
-      },
-    });
+      }
+    }
+
     ReactTestUtils.renderIntoDocument(<Outer />);
     expect(refCalled).toBe(1);
   }
diff --git a/src/renderers/testing/__tests__/ReactTestRenderer-test.js b/src/renderers/testing/__tests__/ReactTestRenderer-test.js
index e35e20d6d3d90..a20d442686d3b 100644
--- a/src/renderers/testing/__tests__/ReactTestRenderer-test.js
+++ b/src/renderers/testing/__tests__/ReactTestRenderer-test.js
@@ -46,11 +46,11 @@ describe('ReactTestRenderer', function() {
 
   it('renders some basics with an update', function() {
     var renders = 0;
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {x: 3};
-      },
-      render: function() {
+
+    class Component extends React.Component {
+      state = {x: 3};
+
+      render() {
         renders++;
         return (
           <div className="purple">
@@ -59,11 +59,12 @@ describe('ReactTestRenderer', function() {
             <Null />
           </div>
         );
-      },
-      componentDidMount: function() {
+      }
+
+      componentDidMount() {
         this.setState({x: 7});
-      },
-    });
+      }
+    }
 
     var Child = () => (renders++, <moo />);
     var Null = () => (renders++, null);
diff --git a/src/shared/utils/__tests__/traverseAllChildren-test.js b/src/shared/utils/__tests__/traverseAllChildren-test.js
index caf6661072273..6c690f3c5c26f 100644
--- a/src/shared/utils/__tests__/traverseAllChildren-test.js
+++ b/src/shared/utils/__tests__/traverseAllChildren-test.js
@@ -542,13 +542,13 @@ describe('traverseAllChildren', function() {
   it('should warn for using maps as children with owner info', function() {
     spyOn(console, 'error');
 
-    var Parent = React.createClass({
+    class Parent extends React.Component {
       render() {
         return (
           <div>{new Map([['foo', 0], ['bar', 1]])}</div>
         );
-      },
-    });
+      }
+    }
 
     ReactTestUtils.renderIntoDocument(<Parent />);
 
diff --git a/src/test/__tests__/ReactTestUtils-test.js b/src/test/__tests__/ReactTestUtils-test.js
index 28cd917e56156..9ce01f665b0ed 100644
--- a/src/test/__tests__/ReactTestUtils-test.js
+++ b/src/test/__tests__/ReactTestUtils-test.js
@@ -26,16 +26,16 @@ describe('ReactTestUtils', function() {
   });
 
   it('should have shallow rendering', function() {
-    var SomeComponent = React.createClass({
-      render: function() {
+    class SomeComponent extends React.Component {
+      render() {
         return (
           <div>
             <span className="child1" />
             <span className="child2" />
           </div>
         );
-      },
-    });
+      }
+    }
 
     var shallowRenderer = ReactTestUtils.createRenderer();
     var result = shallowRenderer.render(<SomeComponent />);
@@ -68,11 +68,11 @@ describe('ReactTestUtils', function() {
   });
 
   it('should throw for invalid elements', function() {
-    var SomeComponent = React.createClass({
-      render: function() {
+    class SomeComponent extends React.Component {
+      render() {
         return <div />;
-      },
-    });
+      }
+    }
 
     var shallowRenderer = ReactTestUtils.createRenderer();
     expect(() => shallowRenderer.render(SomeComponent)).toThrowError(
@@ -106,11 +106,11 @@ describe('ReactTestUtils', function() {
   });
 
   it('can shallow render to null', function() {
-    var SomeComponent = React.createClass({
-      render: function() {
+    class SomeComponent extends React.Component {
+      render() {
         return null;
-      },
-    });
+      }
+    }
 
     var shallowRenderer = ReactTestUtils.createRenderer();
     var result = shallowRenderer.render(<SomeComponent />);
@@ -119,11 +119,11 @@ describe('ReactTestUtils', function() {
   });
 
   it('can shallow render with a ref', function() {
-    var SomeComponent = React.createClass({
-      render: function() {
+    class SomeComponent extends React.Component {
+      render() {
         return <div ref="hello" />;
-      },
-    });
+      }
+    }
 
     var shallowRenderer = ReactTestUtils.createRenderer();
     // Shouldn't crash.
@@ -131,16 +131,14 @@ describe('ReactTestUtils', function() {
   });
 
   it('lets you update shallowly rendered components', function() {
-    var SomeComponent = React.createClass({
-      getInitialState: function() {
-        return {clicked: false};
-      },
+    class SomeComponent extends React.Component {
+      state = {clicked: false};
 
-      onClick: function() {
+      onClick = () => {
         this.setState({clicked: true});
-      },
+      };
 
-      render: function() {
+      render() {
         var className = this.state.clicked ? 'was-clicked' : '';
 
         if (this.props.aNew === 'prop') {
@@ -160,8 +158,8 @@ describe('ReactTestUtils', function() {
             </div>
           );
         }
-      },
-    });
+      }
+    }
 
     var shallowRenderer = ReactTestUtils.createRenderer();
     var result = shallowRenderer.render(<SomeComponent />);
@@ -183,14 +181,15 @@ describe('ReactTestUtils', function() {
   });
 
   it('can access the mounted component instance', function() {
-    var SimpleComponent = React.createClass({
-      someMethod: function() {
+    class SimpleComponent extends React.Component {
+      someMethod = () => {
         return this.props.n;
-      },
-      render: function() {
+      };
+
+      render() {
         return <div>{this.props.n}</div>;
-      },
-    });
+      }
+    }
 
     var shallowRenderer = ReactTestUtils.createRenderer();
     shallowRenderer.render(<SimpleComponent n={5} />);
@@ -198,14 +197,15 @@ describe('ReactTestUtils', function() {
   });
 
   it('can shallowly render components with contextTypes', function() {
-    var SimpleComponent = React.createClass({
-      contextTypes: {
+    class SimpleComponent extends React.Component {
+      static contextTypes = {
         name: React.PropTypes.string,
-      },
-      render: function() {
+      };
+
+      render() {
         return <div />;
-      },
-    });
+      }
+    }
 
     var shallowRenderer = ReactTestUtils.createRenderer();
     var result = shallowRenderer.render(<SimpleComponent />);
@@ -213,14 +213,14 @@ describe('ReactTestUtils', function() {
   });
 
   it('can shallowly render components with ref as function', function() {
-    var SimpleComponent = React.createClass({
-      getInitialState: function() {
-        return {clicked: false};
-      },
-      handleUserClick: function() {
+    class SimpleComponent extends React.Component {
+      state = {clicked: false};
+
+      handleUserClick = () => {
         this.setState({ clicked: true });
-      },
-      render: function() {
+      };
+
+      render() {
         return (
           <div
             ref={() => {}}
@@ -228,8 +228,8 @@ describe('ReactTestUtils', function() {
             className={this.state.clicked ? 'clicked' : ''}
           />
         );
-      },
-    });
+      }
+    }
 
     var shallowRenderer = ReactTestUtils.createRenderer();
     shallowRenderer.render(<SimpleComponent />);
@@ -244,14 +244,15 @@ describe('ReactTestUtils', function() {
   });
 
   it('can setState in componentWillMount when shallow rendering', function() {
-    var SimpleComponent = React.createClass({
+    class SimpleComponent extends React.Component {
       componentWillMount() {
         this.setState({groovy: 'doovy'});
-      },
+      }
+
       render() {
         return <div>{this.state.groovy}</div>;
-      },
-    });
+      }
+    }
 
     var shallowRenderer = ReactTestUtils.createRenderer();
     var result = shallowRenderer.render(<SimpleComponent />);
@@ -259,14 +260,15 @@ describe('ReactTestUtils', function() {
   });
 
   it('can pass context when shallowly rendering', function() {
-    var SimpleComponent = React.createClass({
-      contextTypes: {
+    class SimpleComponent extends React.Component {
+      static contextTypes = {
         name: React.PropTypes.string,
-      },
-      render: function() {
+      };
+
+      render() {
         return <div>{this.context.name}</div>;
-      },
-    });
+      }
+    }
 
     var shallowRenderer = ReactTestUtils.createRenderer();
     var result = shallowRenderer.render(<SimpleComponent />, {
@@ -277,14 +279,16 @@ describe('ReactTestUtils', function() {
 
   it('can fail context when shallowly rendering', function() {
     spyOn(console, 'error');
-    var SimpleComponent = React.createClass({
-      contextTypes: {
+
+    class SimpleComponent extends React.Component {
+      static contextTypes = {
         name: React.PropTypes.string.isRequired,
-      },
-      render: function() {
+      };
+
+      render() {
         return <div>{this.context.name}</div>;
-      },
-    });
+      }
+    }
 
     var shallowRenderer = ReactTestUtils.createRenderer();
     shallowRenderer.render(<SimpleComponent />);
@@ -299,11 +303,12 @@ describe('ReactTestUtils', function() {
   });
 
   it('can scryRenderedDOMComponentsWithClass with TextComponent', function() {
-    var Wrapper = React.createClass({
-      render: function() {
+    class Wrapper extends React.Component {
+      render() {
         return <div>Hello <span>Jim</span></div>;
-      },
-    });
+      }
+    }
+
     var renderedComponent = ReactTestUtils.renderIntoDocument(<Wrapper />);
     var scryResults = ReactTestUtils.scryRenderedDOMComponentsWithClass(
       renderedComponent,
@@ -313,11 +318,12 @@ describe('ReactTestUtils', function() {
   });
 
   it('can scryRenderedDOMComponentsWithClass with className contains \\n', function() {
-    var Wrapper = React.createClass({
-      render: function() {
+    class Wrapper extends React.Component {
+      render() {
         return <div>Hello <span className={'x\ny'}>Jim</span></div>;
-      },
-    });
+      }
+    }
+
     var renderedComponent = ReactTestUtils.renderIntoDocument(<Wrapper />);
     var scryResults = ReactTestUtils.scryRenderedDOMComponentsWithClass(
       renderedComponent,
@@ -327,11 +333,12 @@ describe('ReactTestUtils', function() {
   });
 
   it('can scryRenderedDOMComponentsWithClass with multiple classes', function() {
-    var Wrapper = React.createClass({
-      render: function() {
+    class Wrapper extends React.Component {
+      render() {
         return <div>Hello <span className={'x y z'}>Jim</span></div>;
-      },
-    });
+      }
+    }
+
     var renderedComponent = ReactTestUtils.renderIntoDocument(<Wrapper />);
     var scryResults1 = ReactTestUtils.scryRenderedDOMComponentsWithClass(
       renderedComponent,
@@ -368,11 +375,11 @@ describe('ReactTestUtils', function() {
   });
 
   it('traverses children in the correct order', function() {
-    var Wrapper = React.createClass({
-      render: function() {
+    class Wrapper extends React.Component {
+      render() {
         return <div>{this.props.children}</div>;
-      },
-    });
+      }
+    }
 
     var container = document.createElement('div');
     ReactDOM.render(
@@ -425,8 +432,8 @@ describe('ReactTestUtils', function() {
 
     // Full-page components (html, head, body) can't be rendered into a div
     // directly...
-    var Root = React.createClass({
-      render: function() {
+    class Root extends React.Component {
+      render() {
         return (
           <html ref="html">
             <head ref="head">
@@ -437,8 +444,8 @@ describe('ReactTestUtils', function() {
             </body>
           </html>
         );
-      },
-    });
+      }
+    }
 
     var markup = ReactDOMServer.renderToString(<Root />);
     var testDocument = getTestDocument(markup);
@@ -470,15 +477,15 @@ describe('ReactTestUtils', function() {
   });
 
   it('should change the value of an input field in a component', function() {
-    var SomeComponent = React.createClass({
-      render: function() {
+    class SomeComponent extends React.Component {
+      render() {
         return (
           <div>
             <input type="text" ref="input" onChange={this.props.handleChange} />
           </div>
         );
-      },
-    });
+      }
+    }
 
     var obj = {
       handler: function(e) {
@@ -497,15 +504,16 @@ describe('ReactTestUtils', function() {
   });
 
   it('should throw when attempting to use ReactTestUtils.Simulate with shallow rendering', function() {
-    var SomeComponent = React.createClass({
-      render: function() {
+    class SomeComponent extends React.Component {
+      render() {
         return (
           <div onClick={this.props.handleClick}>
             hello, world.
           </div>
         );
-      },
-    });
+      }
+    }
+
     var handler = jasmine.createSpy('spy');
     var shallowRenderer = ReactTestUtils.createRenderer();
     var result = shallowRenderer.render(<SomeComponent handleClick={handler} />);
@@ -522,14 +530,15 @@ describe('ReactTestUtils', function() {
 
     var CLIENT_X = 100;
 
-    var Component = React.createClass({
-      handleClick: function(e) {
+    class Component extends React.Component {
+      handleClick = (e) => {
         expect(e.clientX).toBe(CLIENT_X);
-      },
-      render: function() {
+      };
+
+      render() {
         return <div onClick={this.handleClick} />;
-      },
-    });
+      }
+    }
 
     var element = document.createElement('div');
     var instance = ReactDOM.render(<Component />, element);
@@ -542,16 +551,17 @@ describe('ReactTestUtils', function() {
 
   it('can scry with stateless components involved', function() {
     var Stateless = () => <div><hr /></div>;
-    var SomeComponent = React.createClass({
-      render: function() {
+
+    class SomeComponent extends React.Component {
+      render() {
         return (
           <div>
             <Stateless />
             <hr />
           </div>
         );
-      },
-    });
+      }
+    }
 
     var inst = ReactTestUtils.renderIntoDocument(<SomeComponent />);
     var hrs = ReactTestUtils.scryRenderedDOMComponentsWithTag(inst, 'hr');
diff --git a/src/test/__tests__/reactComponentExpect-test.js b/src/test/__tests__/reactComponentExpect-test.js
index 494095a82e2a2..b9418d9ea16cf 100644
--- a/src/test/__tests__/reactComponentExpect-test.js
+++ b/src/test/__tests__/reactComponentExpect-test.js
@@ -24,16 +24,16 @@ describe('reactComponentExpect', function() {
   });
 
   it('should detect text components', function() {
-    var SomeComponent = React.createClass({
-      render: function() {
+    class SomeComponent extends React.Component {
+      render() {
         return (
           <div>
             <div>This is a div</div>
             {'This is text'}
           </div>
         );
-      },
-    });
+      }
+    }
 
     var component = ReactTestUtils.renderIntoDocument(<SomeComponent />);