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/[email protected]/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;