facebook · bvaughn · Apr 11, 2017 · Apr 11, 2017 · Apr 11, 2017 · Apr 11, 2017
diff --git a/fixtures/art/VectorWidget.js b/fixtures/art/VectorWidget.js
@@ -24,13 +24,11 @@ var BASE_VEL = 0.15;
 /**
  * An animated SVG component.
  */
-var VectorWidget = React.createClass({
+class VectorWidget extends React.Component {
   /**
    * Initialize state members.
    */
-  getInitialState: function() {
-    return {degrees: 0, velocity: 0, drag: MOUSE_UP_DRAG};
-  },
+  state = {degrees: 0, velocity: 0, drag: MOUSE_UP_DRAG};
 
   /**
    * When the component is mounted into the document - this is similar to a
@@ -39,40 +37,40 @@ var VectorWidget = React.createClass({
    * method. Binding of `this.onTick` is not needed because all React methods
    * are automatically bound before being mounted.
    */
-  componentDidMount: function() {
+  componentDidMount() {
     this._interval = window.setInterval(this.onTick, 20);
-  },
+  }
 
-  componentWillUnmount: function() {
+  componentWillUnmount() {
     window.clearInterval(this._interval);
-  },
+  }
 
-  onTick: function() {
+  onTick = () => {
     var nextDegrees = this.state.degrees + BASE_VEL + this.state.velocity;
     var nextVelocity = this.state.velocity * this.state.drag;
     this.setState({degrees: nextDegrees, velocity: nextVelocity});
-  },
+  };
 
   /**
    * When mousing down, we increase the friction down the velocity.
    */
-  handleMouseDown: function() {
+  handleMouseDown = () => {
     this.setState({drag: MOUSE_DOWN_DRAG});
-  },
+  };
 
   /**
    * Cause the rotation to "spring".
    */
-  handleMouseUp: function() {
+  handleMouseUp = () => {
     var nextVelocity = Math.min(this.state.velocity + CLICK_ACCEL, MAX_VEL);
     this.setState({velocity: nextVelocity, drag: MOUSE_UP_DRAG});
-  },
+  };
 
   /**
    * This is the "main" method for any component. The React API allows you to
    * describe the structure of your UI component at *any* point in time.
    */
-  render: function() {
+  render() {
     return (
       <Surface
         width={700}
@@ -81,12 +79,12 @@ var VectorWidget = React.createClass({
         {this.renderGraphic(this.state.degrees)}
       </Surface>
     );
-  },
+  }
 
   /**
    * Better SVG support for React coming soon.
    */
-  renderGraphic: function(rotation) {
+  renderGraphic = (rotation) => {
 
     return (
       <Group
@@ -112,8 +110,8 @@ var VectorWidget = React.createClass({
         </Group>
       </Group>
     );
-  }
-});
+  };
+}
 
 var BORDER_PATH = "M3.00191459,4 C1.34400294,4 0,5.34785514 0,7.00550479 L0,220.994495 C0,222.65439 1.34239483,224 3.00191459,224 L276.998085,224 C278.655997,224 280,222.652145 280,220.994495 L280,7.00550479 C280,5.34561033 278.657605,4 276.998085,4 L3.00191459,4 Z M3.00191459,4";
 var BG_PATH = "M3.00191459,1 C1.34400294,1 0,2.34785514 0,4.00550479 L0,217.994495 C0,219.65439 1.34239483,221 3.00191459,221 L276.998085,221 C278.655997,221 280,219.652145 280,217.994495 L280,4.00550479 C280,2.34561033 278.657605,1 276.998085,1 L3.00191459,1 Z M3.00191459,1";

diff --git a/fixtures/dom/package.json b/fixtures/dom/package.json
@@ -8,6 +8,7 @@
   "dependencies": {
     "classnames": "^2.2.5",
     "query-string": "^4.2.3",
+    "prop-types": "^15.5.6",
     "react": "^15.4.1",
     "react-dom": "^15.4.1",
     "semver": "^5.3.0"

diff --git a/fixtures/dom/public/index.html b/fixtures/dom/public/index.html
@@ -14,6 +14,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <script src="https://unpkg.com/prop-types@15.5.6/prop-types.js"></script>
     <script src="react-loader.js"></script>
   </head>
   <body>

diff --git a/fixtures/dom/src/components/App.js b/fixtures/dom/src/components/App.js
@@ -4,17 +4,15 @@ import Fixtures from './fixtures';
 
 import '../style.css';
 
-const App = React.createClass({
-  render() {
-    return (
-      <div>
-        <Header />
-        <div className="container" >
-          <Fixtures />
-        </div>
+function App () {
+  return (
+    <div>
+      <Header />
+      <div className="container" >
+        <Fixtures />
       </div>
-    );
-  },
-});
+    </div>
+  );
+}
 
 export default App;
diff --git a/fixtures/dom/src/components/Fixture.js b/fixtures/dom/src/components/Fixture.js
@@ -1,7 +1,8 @@
+const PropTypes = window.PropTypes;
 const React = window.React;
 
 const propTypes = {
-  children: React.PropTypes.node.isRequired,
+  children: PropTypes.node.isRequired,
 };
 
 class Fixture extends React.Component {

diff --git a/fixtures/dom/src/components/FixtureSet.js b/fixtures/dom/src/components/FixtureSet.js
@@ -1,8 +1,9 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 const propTypes = {
-  title: React.PropTypes.node.isRequired,
-  description: React.PropTypes.node.isRequired,
+  title: PropTypes.node.isRequired,
+  description: PropTypes.node.isRequired,
 };
 
 class FixtureSet extends React.Component {

diff --git a/fixtures/dom/src/components/Header.js b/fixtures/dom/src/components/Header.js
@@ -2,32 +2,33 @@ import { parse, stringify } from 'query-string';
 import getVersionTags from '../tags';
 const React = window.React;
 
-const Header = React.createClass({
-  getInitialState() {
+class Header extends React.Component {
+  constructor(props, context) {
+    super(props, context);
     const query = parse(window.location.search);
     const version = query.version || 'local';
     const versions = [version];
-    return { version, versions };
-  },
+    this.state = { version, versions };
+  }
   componentWillMount() {
     getVersionTags()
       .then(tags => {
         let versions = tags.map(tag => tag.name.slice(1));
         versions = [`local`, ...versions];
         this.setState({ versions });
       })
-  },
+  }
   handleVersionChange(event) {
     const query = parse(window.location.search);
     query.version = event.target.value;
     if (query.version === 'local') {
       delete query.version;
     }
     window.location.search = stringify(query);
-  },
+  }
   handleFixtureChange(event) {
     window.location.pathname = event.target.value;
-  },
+  }
   render() {
     return (
     <header className="header">
@@ -66,7 +67,7 @@ const Header = React.createClass({
       </div>
     </header>
     );
-  },
-});
+  }
+}
 
 export default Header;
diff --git a/fixtures/dom/src/components/TestCase.js b/fixtures/dom/src/components/TestCase.js
@@ -1,14 +1,15 @@
 import cn from 'classnames';
 import semver from 'semver';
 import React from 'react';
+import PropTypes from 'prop-types';
 import { parse } from 'query-string';
-import { semverString } from './propTypes'
+import { semverString } from './propTypes';
 
 const propTypes = {
-  children: React.PropTypes.node.isRequired,
-  title: React.PropTypes.node.isRequired,
+  children: PropTypes.node.isRequired,
+  title: PropTypes.node.isRequired,
   resolvedIn: semverString,
-  resolvedBy: React.PropTypes.string
+  resolvedBy: PropTypes.string
 };
 
 class TestCase extends React.Component {

diff --git a/fixtures/dom/src/components/fixtures/buttons/index.js b/fixtures/dom/src/components/fixtures/buttons/index.js
@@ -10,7 +10,7 @@ function onButtonClick() {
 export default class ButtonTestCases extends React.Component {
   render() {
     return (
-      <FixtureSet title="Buttons">
+      <FixtureSet title="Buttons" description="">
         <TestCase
           title="onClick with disabled buttons"
           description="The onClick event handler should not be invoked when clicking on a disabled buyaton">

diff --git a/fixtures/dom/src/components/fixtures/index.js b/fixtures/dom/src/components/fixtures/index.js
@@ -12,29 +12,27 @@ import ButtonFixtures from './buttons';
  * A simple routing component that renders the appropriate
  * fixture based on the location pathname.
  */
-const FixturesPage = React.createClass({
-  render() {
-    switch (window.location.pathname) {
-      case '/text-inputs':
-        return <TextInputFixtures />;
-      case '/range-inputs':
-        return <RangeInputFixtures />;
-      case '/selects':
-        return <SelectFixtures />;
-      case '/textareas':
-        return <TextAreaFixtures />;
-      case '/input-change-events':
-        return <InputChangeEvents />;
-      case '/number-inputs':
-        return <NumberInputFixtures />;
-      case '/password-inputs':
-        return <PasswordInputFixtures />;
-      case '/buttons':
-        return <ButtonFixtures />
-      default:
-        return <p>Please select a test fixture.</p>;
-    }
-  },
-});
+function FixturesPage() {
+  switch (window.location.pathname) {
+    case '/text-inputs':
+      return <TextInputFixtures />;
+    case '/range-inputs':
+      return <RangeInputFixtures />;
+    case '/selects':
+      return <SelectFixtures />;
+    case '/textareas':
+      return <TextAreaFixtures />;
+    case '/input-change-events':
+      return <InputChangeEvents />;
+    case '/number-inputs':
+      return <NumberInputFixtures />;
+    case '/password-inputs':
+      return <PasswordInputFixtures />;
+    case '/buttons':
+      return <ButtonFixtures />
+    default:
+      return <p>Please select a test fixture.</p>;
+  }
+}
 
 module.exports = FixturesPage;
diff --git a/fixtures/dom/src/components/fixtures/number-inputs/NumberTestCase.js b/fixtures/dom/src/components/fixtures/number-inputs/NumberTestCase.js
@@ -2,16 +2,14 @@ const React = window.React;
 
 import Fixture from '../../Fixture';
 
-const NumberTestCase = React.createClass({
-  getInitialState() {
-    return { value: '' };
-  },
-  onChange(event) {
+class NumberTestCase extends React.Component {
+  state = { value: '' };
+  onChange = (event) => {
     const parsed = parseFloat(event.target.value, 10)
     const value = isNaN(parsed) ? '' : parsed
 
     this.setState({ value })
-  },
+  }
   render() {
     return (
       <Fixture>
@@ -31,7 +29,7 @@ const NumberTestCase = React.createClass({
         </div>
       </Fixture>
     );
-  },
-});
+  }
+}
 
 export default NumberTestCase;