Use ES6 classes everywhere

Author: mjackson

modules/IndexLink.js

@@ -1,12 +1,15 @@
 import React from 'react'
 import Link from './Link'
 
-const IndexLink = React.createClass({
+/**
+ * An <IndexLink> is used to link to an <IndexRoute>.
+ */
+class IndexLink extends React.Component {
 
   render() {
     return <Link {...this.props} onlyActiveOnIndex={true} />
   }
 
-})
+}
 
 export default IndexLink

modules/IndexRoute.js

@@ -10,30 +10,26 @@ const { bool, func } = React.PropTypes
  * An <IndexRoute> is used to specify its parent's <Route indexRoute> in
  * a JSX route config.
  */
-const IndexRoute = React.createClass({
-
-  statics: {
-
-    createRouteFromReactElement(element, parentRoute) {
-      if (parentRoute) {
-        parentRoute.indexRoute = createRouteFromReactElement(element)
-      } else {
-        warning(
-          false,
-          'An <IndexRoute> does not make sense at the root of your route config'
-        )
-      }
+class IndexRoute extends React.Component {
+
+  static createRouteFromReactElement(element, parentRoute) {
+    if (parentRoute) {
+      parentRoute.indexRoute = createRouteFromReactElement(element)
+    } else {
+      warning(
+        false,
+        'An <IndexRoute> does not make sense at the root of your route config'
+      )
     }
+  }
 
-  },
-
-  propTypes: {
+  static propTypes = {
     path: falsy,
     ignoreScrollBehavior: bool,
     component,
     components,
     getComponents: func
-  },
+  }
 
   render() {
     invariant(
@@ -42,6 +38,6 @@ const IndexRoute = React.createClass({
     )
   }
 
-})
+}
 
 export default IndexRoute

modules/Link.js

@@ -37,29 +37,27 @@ function isEmptyObject(object) {
  *
  *   <Link ... query={{ show: true }} state={{ the: 'state' }} />
  */
-const Link = React.createClass({
+class Link extends React.Component {
 
-  contextTypes: {
+  static contextTypes = {
     history: object
-  },
+  }
 
-  propTypes: {
+  static propTypes = {
     activeStyle: object,
     activeClassName: string,
     onlyActiveOnIndex: bool.isRequired,
     to: string.isRequired,
     query: object,
     state: object,
     onClick: func
-  },
+  }
 
-  getDefaultProps() {
-    return {
-      onlyActiveOnIndex: false,
-      className: '',
-      style: {}
-    }
-  },
+  static defaultProps = {
+    onlyActiveOnIndex: false,
+    className: '',
+    style: {}
+  }
 
   handleClick(event) {
     let allowTransition = true, clickResult
@@ -77,7 +75,7 @@ const Link = React.createClass({
 
     if (allowTransition)
       this.context.history.pushState(this.props.state, this.props.to, this.props.query)
-  },
+  }
 
   componentWillMount() {
     warning(
@@ -86,13 +84,13 @@ const Link = React.createClass({
       'some features including real hrefs, active styling, and navigation ' +
       'will not function correctly'
     )
-  },
+  }
 
   render() {
     const { history } = this.context
     const { activeClassName, activeStyle, onlyActiveOnIndex, to, query, state, onClick, ...props } = this.props
 
-    props.onClick = this.handleClick
+    props.onClick = (e) => this.handleClick(e)
 
     // Ignore if rendered outside the context
     // of history, simplifies unit testing.
@@ -110,9 +108,9 @@ const Link = React.createClass({
       }
     }
 
-    return React.createElement('a', props)
+    return <a {...props} />
   }
 
-})
+}
 
 export default Link

modules/Redirect.js

@@ -7,73 +7,69 @@ import { falsy } from './PropTypes'
 const { string, object } = React.PropTypes
 
 /**
- * A <Redirect> is used to declare another URL path a client should be sent
- * to when they request a given URL.
+ * A <Redirect> is used to declare another URL path a client should
+ * be sent to when they request a given URL.
  *
- * Redirects are placed alongside routes in the route configuration and are
- * traversed in the same manner.
+ * Redirects are placed alongside routes in the route configuration
+ * and are traversed in the same manner.
  */
-const Redirect = React.createClass({
-
-  statics: {
-
-    createRouteFromReactElement(element) {
-      const route = createRouteFromReactElement(element)
-
-      if (route.from)
-        route.path = route.from
-
-      route.onEnter = function (nextState, replaceState) {
-        const { location, params } = nextState
-
-        let pathname
-        if (route.to.charAt(0) === '/') {
-          pathname = formatPattern(route.to, params)
-        } else if (!route.to) {
-          pathname = location.pathname
-        } else {
-          let routeIndex = nextState.routes.indexOf(route)
-          let parentPattern = Redirect.getRoutePattern(nextState.routes, routeIndex - 1)
-          let pattern = parentPattern.replace(/\/*$/, '/') + route.to
-          pathname = formatPattern(pattern, params)
-        }
-
-        replaceState(
-          route.state || location.state,
-          pathname,
-          route.query || location.query
-        )
+class Redirect extends React.Component {
+
+  static createRouteFromReactElement(element) {
+    const route = createRouteFromReactElement(element)
+
+    if (route.from)
+      route.path = route.from
+
+    route.onEnter = function (nextState, replaceState) {
+      const { location, params } = nextState
+
+      let pathname
+      if (route.to.charAt(0) === '/') {
+        pathname = formatPattern(route.to, params)
+      } else if (!route.to) {
+        pathname = location.pathname
+      } else {
+        let routeIndex = nextState.routes.indexOf(route)
+        let parentPattern = Redirect.getRoutePattern(nextState.routes, routeIndex - 1)
+        let pattern = parentPattern.replace(/\/*$/, '/') + route.to
+        pathname = formatPattern(pattern, params)
       }
 
-      return route
-    },
+      replaceState(
+        route.state || location.state,
+        pathname,
+        route.query || location.query
+      )
+    }
 
-    getRoutePattern(routes, routeIndex) {
-      let parentPattern = ''
+    return route
+  }
 
-      for (let i = routeIndex; i >= 0; i--) {
-        let route = routes[i]
-        let pattern = route.path || ''
-        parentPattern = pattern.replace(/\/*$/, '/') + parentPattern
+  static getRoutePattern(routes, routeIndex) {
+    let parentPattern = ''
 
-        if (pattern.indexOf('/') === 0)
-          break
-      }
+    for (let i = routeIndex; i >= 0; i--) {
+      let route = routes[i]
+      let pattern = route.path || ''
+      parentPattern = pattern.replace(/\/*$/, '/') + parentPattern
 
-      return '/' + parentPattern
+      if (pattern.indexOf('/') === 0)
+        break
     }
 
-  },
+    return '/' + parentPattern
+  }
 
-  propTypes: {
+  static propTypes = {
     path: string,
     from: string, // Alias for path
     to: string.isRequired,
     query: object,
     state: object,
     onEnter: falsy,
     children: falsy
-  },
+  }
 
   render() {
     invariant(
@@ -82,6 +78,6 @@ const Redirect = React.createClass({
     )
   }
 
-})
+}
 
 export default Redirect

modules/Route.js

@@ -7,45 +7,41 @@ import { component, components } from './PropTypes'
 const { string, bool, func } = React.PropTypes
 
 /**
- * A <Route> is used to declare which components are rendered to the page when
- * the URL matches a given pattern.
+ * A <Route> is used to declare which components are rendered to the
+ * page when the URL matches a given pattern.
  *
- * Routes are arranged in a nested tree structure. When a new URL is requested,
- * the tree is searched depth-first to find a route whose path matches the URL.
- * When one is found, all routes in the tree that lead to it are considered
- * "active" and their components are rendered into the DOM, nested in the same
- * order as they are in the tree.
+ * Routes are arranged in a nested tree structure. When a new URL is
+ * requested, the tree is searched depth-first to find a route whose
+ * path matches the URL.  When one is found, all routes in the tree
+ * that lead to it are considered "active" and their components are
+ * rendered into the DOM, nested in the same order as in the tree.
  */
-const Route = React.createClass({
+class Route extends React.Component {
 
-  statics: {
+  static createRouteFromReactElement(element) {
+    const route = createRouteFromReactElement(element)
 
-    createRouteFromReactElement(element) {
-      const route = createRouteFromReactElement(element)
+    if (route.handler) {
+      warning(
+        false,
+        '<Route handler> is deprecated, use <Route component> instead'
+      )
 
-      if (route.handler) {
-        warning(
-          false,
-          '<Route handler> is deprecated, use <Route component> instead'
-        )
-
-        route.component = route.handler
-        delete route.handler
-      }
-
-      return route
+      route.component = route.handler
+      delete route.handler
     }
-  
-  },
 
-  propTypes: {
+    return route
+  }
+
+  static propTypes = {
     path: string,
     ignoreScrollBehavior: bool,
     handler: component, // deprecated
     component,
     components,
     getComponents: func
-  },
+  }
 
   render() {
     invariant(
@@ -54,6 +50,6 @@ const Route = React.createClass({
     )
   }
 
-})
+}
 
 export default Route