--- a/devtools/client/animationinspector/components/animation-timeline.js
+++ b/devtools/client/animationinspector/components/animation-timeline.js
@@ -1,28 +1,28 @@
 /* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
-const {Task} = require("devtools/shared/task");
+const { Task } = require("devtools/shared/task");
 const EventEmitter = require("devtools/shared/event-emitter");
 const {
   createNode,
   findOptimalTimeInterval,
   getFormattedAnimationTitle,
   TimeScale,
   getCssPropertyName
 } = require("devtools/client/animationinspector/utils");
-const {AnimationDetails} = require("devtools/client/animationinspector/components/animation-details");
-const {AnimationTargetNode} = require("devtools/client/animationinspector/components/animation-target-node");
-const {AnimationTimeBlock} = require("devtools/client/animationinspector/components/animation-time-block");
+const { AnimationDetails } = require("devtools/client/animationinspector/components/animation-details");
+const { AnimationTargetNode } = require("devtools/client/animationinspector/components/animation-target-node");
+const { AnimationTimeBlock } = require("devtools/client/animationinspector/components/animation-time-block");
 
 const { LocalizationHelper } = require("devtools/shared/l10n");
 const L10N =
   new LocalizationHelper("devtools/client/locales/animationinspector.properties");
 
 // The minimum spacing between 2 time graduation headers in the timeline (px).
 const TIME_GRADUATION_MIN_SPACING = 40;
 // When the container window is resized, the timeline background gets refreshed,
@@ -80,31 +80,32 @@ AnimationsTimeline.prototype = {
   },
 
   setupSplitBox: function () {
     const browserRequire = this.win.BrowserLoader({
       window: this.win,
       useOnlyShared: true
     }).require;
 
-    const React = browserRequire("devtools/client/shared/vendor/react");
+    const { createFactory } = browserRequire("devtools/client/shared/vendor/react");
+    const dom = require("devtools/client/shared/vendor/react-dom-factories");
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
 
-    const SplitBox = React.createFactory(
+    const SplitBox = createFactory(
       browserRequire("devtools/client/shared/components/splitter/SplitBox"));
 
     const splitter = SplitBox({
       className: "animation-root",
       splitterSize: 1,
       initialHeight: "50%",
       endPanelControl: true,
-      startPanel: React.DOM.div({
+      startPanel: dom.div({
         className: "animation-timeline"
       }),
-      endPanel: React.DOM.div({
+      endPanel: dom.div({
         className: "animation-detail"
       }),
       vert: false
     });
 
     ReactDOM.render(splitter, this.rootWrapperEl);
 
     this.animationRootEl = this.rootWrapperEl.querySelector(".animation-root");

--- a/devtools/client/inspector/animation/components/AnimationListContainer.js
+++ b/devtools/client/inspector/animation/components/AnimationListContainer.js
@@ -1,16 +1,18 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
-const { createFactory, DOM: dom, PropTypes, PureComponent } =
+const { createFactory, PureComponent } =
   require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
 
 const AnimationList = createFactory(require("./AnimationList"));
 const AnimationListHeader = createFactory(require("./AnimationListHeader"));
 
 class AnimationListContainer extends PureComponent {
   static get propTypes() {
     return {
       animations: PropTypes.arrayOf(PropTypes.object).isRequired,

--- a/devtools/client/inspector/animation/components/AnimationListHeader.js
+++ b/devtools/client/inspector/animation/components/AnimationListHeader.js
@@ -1,16 +1,18 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
-const { createFactory, DOM: dom, PropTypes, PureComponent } =
+const { createFactory, PureComponent } =
   require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
 
 const AnimationTimelineTickList = createFactory(require("./AnimationTimelineTickList"));
 
 class AnimationListHeader extends PureComponent {
   static get propTypes() {
     return {
       animations: PropTypes.arrayOf(PropTypes.object).isRequired,
     };

--- a/devtools/client/inspector/animation/components/AnimationTimelineTickItem.js
+++ b/devtools/client/inspector/animation/components/AnimationTimelineTickItem.js
@@ -1,16 +1,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
-const { DOM: dom, PropTypes, PureComponent } =
-  require("devtools/client/shared/vendor/react");
+const { PureComponent } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
 
 class AnimationTimeTickItem extends PureComponent {
   static get propTypes() {
     return {
       position: PropTypes.number.isRequired,
       timeTickLabel: PropTypes.string.isRequired,
     };
   }

--- a/devtools/client/inspector/animation/components/AnimationTimelineTickList.js
+++ b/devtools/client/inspector/animation/components/AnimationTimelineTickList.js
@@ -1,16 +1,18 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
-const { createFactory, DOM: dom, PropTypes, PureComponent } =
+const { createFactory, PureComponent } =
   require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 const ReactDOM = require("devtools/client/shared/vendor/react-dom");
 
 const AnimationTimelineTickItem = createFactory(require("./AnimationTimelineTickItem"));
 
 const TimeScale = require("../utils/timescale");
 const { findOptimalTimeInterval } = require("../utils/utils");
 

--- a/devtools/client/inspector/changes/components/ChangesApp.js
+++ b/devtools/client/inspector/changes/components/ChangesApp.js
@@ -1,18 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
-const {
-  DOM: dom,
-  PureComponent,
-} = require("devtools/client/shared/vendor/react");
+const { PureComponent } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 
 class ChangesApp extends PureComponent {
   static get propTypes() {
     return {};
   }
 
   render() {

--- a/devtools/client/inspector/events/components/EventsApp.js
+++ b/devtools/client/inspector/events/components/EventsApp.js
@@ -1,18 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
-const {
-  DOM: dom,
-  PureComponent,
-} = require("devtools/client/shared/vendor/react");
+const { PureComponent } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 
 class EventsApp extends PureComponent {
   static get propTypes() {
     return {};
   }
 
   render() {

--- a/devtools/client/inspector/test/browser_inspector_addSidebarTab.js
+++ b/devtools/client/inspector/test/browser_inspector_addSidebarTab.js
@@ -10,51 +10,51 @@ const CONTENT_TEXT = "Hello World!";
 
 /**
  * Verify InspectorPanel.addSidebarTab() API that can be consumed
  * by DevTools extensions as well as DevTools code base.
  */
 add_task(function* () {
   let { inspector } = yield openInspectorForURL(TEST_URI);
 
-  const React = inspector.React;
+  const { Component, createFactory } = inspector.React;
   const dom = require("devtools/client/shared/vendor/react-dom-factories");
   const { div } = dom;
 
   info("Adding custom panel.");
 
   // Define custom side-panel.
-  let tabPanel = React.createFactory(React.createClass({
-    displayName: "myTabPanel",
-    render: function () {
+  class myTabPanel extends Component {
+    render() {
       return (
         div({className: "my-tab-panel"},
           CONTENT_TEXT
         )
       );
     }
-  }));
+  }
+  let tabPanel = createFactory(myTabPanel);
 
   // Append custom panel (tab) into the Inspector panel and
   // make sure it's selected by default (the last arg = true).
   inspector.addSidebarTab("myPanel", "My Panel", tabPanel, true);
   is(inspector.sidebar.getCurrentTabID(), "myPanel",
      "My Panel is selected by default");
 
   // Define another custom side-panel.
-  tabPanel = React.createFactory(React.createClass({
-    displayName: "myTabPanel2",
-    render: function () {
+  class myTabPanel2 extends Component {
+    render() {
       return (
         div({className: "my-tab-panel2"},
           "Another Content"
         )
       );
     }
-  }));
+  }
+  tabPanel = createFactory(myTabPanel2);
 
   // Append second panel, but don't select it by default.
   inspector.addSidebarTab("myPanel", "My Panel", tabPanel, false);
   is(inspector.sidebar.getCurrentTabID(), "myPanel",
      "My Panel is selected by default");
 
   // Check the the panel content is properly rendered.
   let tabPanelNode = inspector.panelDoc.querySelector(".my-tab-panel");

--- a/devtools/client/shared/components/Tree.js
+++ b/devtools/client/shared/components/Tree.js
@@ -49,23 +49,23 @@ const NUMBER_OF_OFFSCREEN_ITEMS = 1;
  *       label: String,
  *       parent: Item or null,
  *       children: Array of child items,
  *       expanded: bool,
  *     }
  *
  * Here is how we could render that data with this component:
  *
- *     const MyTree = createClass({
- *       displayName: "MyTree",
- *
- *       propTypes: {
+ *     class MyTree extends Component {
+ *       static get propTypes() {
  *         // The root item of the tree, with the form described above.
- *         root: PropTypes.object.isRequired
- *       },
+ *         return {
+ *           root: PropTypes.object.isRequired
+ *         };
+ *       }
  *
  *       render() {
  *         return Tree({
  *           itemHeight: 20, // px
  *
  *           getRoots: () => [this.props.root],
  *
  *           getParent: item => item.parent,
@@ -91,17 +91,17 @@ const NUMBER_OF_OFFSCREEN_ITEMS = 1;
  *               dom.span({ className: "my-tree-item-label" }, item.label)
  *             );
  *           },
  *
  *           onExpand: item => dispatchExpandActionToRedux(item),
  *           onCollapse: item => dispatchCollapseActionToRedux(item),
  *         });
  *       }
- *     });
+ *     }
  */
 class Tree extends Component {
   static get propTypes() {
     return {
       // Required props
 
       // A function to get an item's parent, or null if it is a root.
       //