Updates PropTypes and CreateClass usage for React 15.5 warnings (#196)

swap React.PropTypes for prop-types swap React.CreateClass for create-react-class
STRML · Apr 29, 2017 · e3e1b86 · e3e1b86
1 parent c01b674
commit e3e1b86
Show file tree

Hide file tree

Showing 27 changed files with 160 additions and 102 deletions.
diff --git a/docs/a-elements.md b/docs/a-elements.md
@@ -14,8 +14,9 @@ Just wrap these sections with a `CaptureClicks` component:
     var Locations = Router.Locations
     var Location = Router.Location
     var CaptureClicks = require('react-router-component/lib/CaptureClicks')
+    var CreateReactClass = require('create-react-class');
 
-    var Page = React.createClass({
+    var Page = CreateReactClass({
       render: function() {
         return (
           <div>
@@ -28,7 +29,7 @@ Just wrap these sections with a `CaptureClicks` component:
       }
     })
 
-    var App = React.createClass({
+    var App = CreateReactClass({
       render: function() {
         return (
           <CaptureClicks>

diff --git a/docs/contextual.md b/docs/contextual.md
@@ -4,7 +4,9 @@ Contextual router is a router which can be mounted under another router. Such
 router is not aware of the global `location.pathname` and routes only the
 unmatched part of the parent router.
 
-    var App = React.createClass({
+    var CreateReactClass = require('create-react-class');
+
+    var App = CreateReactClass({
 
       render: function() {
         return (
@@ -16,7 +18,7 @@ unmatched part of the parent router.
       }
     })
 
-    var Photos = React.createClass({
+    var Photos = CreateReactClass({
 
       render: function() {
         return (
@@ -38,7 +40,7 @@ If you use `Link` components inside a contextual router, its `href` would be
 scoped to this router. In the following example, the link *"back to albums"*
 would trigger transition to `/photos/` URL.
 
-    var PhotoPage = React.createClass({
+    var PhotoPage = CreateReactClass({
 
       render: function() {
         return (

diff --git a/docs/hash-routing.md b/docs/hash-routing.md
@@ -11,7 +11,9 @@ location but everything else will be working as expected.
 
 To use hash routing you need to pass a `hash` prop to a router:
 
-    var App = React.createClass({
+    var CreateReactClass = require('create-react-class');
+
+    var App = CreateReactClass({
 
       render: function() {
         return (

diff --git a/docs/index.md b/docs/index.md
@@ -72,7 +72,9 @@ Otherwise, as of React 0.12, you must create factories:
 Now you can define your application as a regular React component which renders
 into `Locations` router:
 
-    var App = React.createClass({
+    var CreateReactClass = require('create-react-class');
+
+    var App = CreateReactClass({
 
       render: function() {
         return (
@@ -124,8 +126,9 @@ other location is matched. For that there's a special `NotFound` location
 descriptor:
 
     var NotFound = Router.NotFound
+    var CreateReactClass = require('create-react-class');
 
-    var App = React.createClass({
+    var App = CreateReactClass({
 
       render: function() {
         return (
@@ -148,8 +151,9 @@ As an example, let's see how `MainPage` component can be implemented with the
 usage of the `Link` component to transition to a `UserPage`:
 
     var Link = require('react-router-component').Link
+    var CreateReactClass = require('create-react-class');
 
-    var MainPage = React.createClass({
+    var MainPage = CreateReactClass({
 
       render: function() {
         return (

diff --git a/docs/multiple.md b/docs/multiple.md
@@ -5,7 +5,9 @@ You can have multiple routers active at the same time.
 Define several components which use `Locations` router to dispatch to different
 UI components:
 
-    var Sidebar = React.createClass({
+    var CreateReactClass = require('create-react-class');
+
+    var Sidebar = CreateReactClass({
 
       render: function() {
         return (
@@ -17,7 +19,7 @@ UI components:
       }
     })
 
-    var Content = React.createClass({
+    var Content = CreateReactClass({
 
       render: function() {
         return (
@@ -31,7 +33,9 @@ UI components:
 
 Then combine them into a single component:
 
-    var App = React.createClass({
+    var CreateReactClass = require('create-react-class');
+
+    var App = CreateReactClass({
 
       render: function() {
         return (

diff --git a/docs/querystring.md b/docs/querystring.md
@@ -9,7 +9,10 @@ The route `/foo/:bar` will match both `/foo/biff` and `/foo/baz?biff=baz&num=1`.
 
 For example:
 
-    var App = React.createClass({
+    var CreateReactClass = require('create-react-class');
+    var PropTypes = require('prop-types');
+
+    var App = CreateReactClass({
 
       render: function() {
         return (<Locations path={this.props.path)}
@@ -21,10 +24,10 @@ For example:
       }
     });
 
-    var QueryPage = React.createClass({
+    var QueryPage = CreateReactClass({
       propTypes: {
-        bar: React.PropTypes.string,
-        _query: React.PropTypes.object
+        bar: prop-types.string,
+        _query: prop-types.object
       },
 
       render: function() {

diff --git a/docs/recipes/custom-link.md b/docs/recipes/custom-link.md
@@ -8,8 +8,9 @@ which wraps original `Link` component:
 
     var React = require('react')
     var Router = require('react-router-component')
+    var CreateReactClass = require('create-react-class');
 
-    var HighlightedLink = React.createClass({
+    var HighlightedLink = CreateReactClass({
 
       mixins: [Router.NavigatableMixin],
 

diff --git a/docs/recipes/custom-router.md b/docs/recipes/custom-router.md
@@ -51,7 +51,9 @@ handler is rendered. It provides a method `renderRouteHandler()`.
 
 We can now define our custom routers like this:
 
-    var Application = React.createClass({
+    var CreateReactClass = require('create-react-class');
+
+    var Application = CreateReactClass({
       mixins: [MyRouterMixin],
 
       routes: {

diff --git a/docs/server-side.md b/docs/server-side.md
@@ -9,7 +9,9 @@ need is to pass a `path` prop to a router so it can determine which location to
 render without accessing `window.location.pathname` (which isn't available on
 server):
 
-    var App = React.createClass({
+    var CreateReactClass = require('create-react-class');
+
+    var App = CreateReactClass({
 
       render: function() {
         return (
@@ -58,8 +60,9 @@ similar to `Locations` but renders directly into `<body>` DOM element.
     var Router = require('react-router-component')
     var Pages = Router.Pages
     var Page = Router.Page
+    var CreateReactClass = require('create-react-class');
 
-    var App = React.createClass({
+    var App = CreateReactClass({
 
       render: function() {
         return (

diff --git a/examples/context/index.js b/examples/context/index.js
@@ -1,6 +1,7 @@
 "use strict";
 
 var React     = require('react');
+var CreateReactClass = require('create-react-class');
 var Router    = require('../../');
 
 var Locations = Router.Locations;
@@ -21,7 +22,7 @@ var Context = {
 };
 
 
-var Tabs = React.createClass({
+var Tabs = CreateReactClass({
 
   mixins: [Context],
 
@@ -45,14 +46,14 @@ var Tabs = React.createClass({
   }
 });
 
-var Tab1 = React.createClass({
+var Tab1 = CreateReactClass({
 
   render: function() {
     return <div>Tab1</div>;
   }
 });
 
-var Tab2 = React.createClass({
+var Tab2 = CreateReactClass({
 
   render: function() {
     return <div>Tab2</div>;

diff --git a/examples/extras/AnimatedLocations.jsx b/examples/extras/AnimatedLocations.jsx
@@ -1,12 +1,13 @@
 'use strict';
 var React = require('react');
+var CreateReactClass = require('create-react-class');
 var Router = require('react-router-component');
 var TransitionGroup = require('react/lib/ReactCSSTransitionGroup');
 
 /**
  * AnimatedLocations is an extension of the <Locations> object that animates route transitions.
  */
-var AnimatedLocations = React.createClass({
+var AnimatedLocations = CreateReactClass({
   mixins: [
     Router.AsyncRouteRenderingMixin,
     Router.RouterMixin,

diff --git a/examples/extras/TitleSwitcher.jsx b/examples/extras/TitleSwitcher.jsx
@@ -1,22 +1,24 @@
 'use strict';
 var React = require('react');
+var CreateReactClass = require('create-react-class');
+var PropTypes = require('prop-types');
 var Router = require('react-router-component');
 
 /**
  * TitleSwitcher is an extension of Router that switches the title on render.
  * The actual function that switches the title is not implemented here, as that 
  * can be environment-specific in isomorphic apps.
  */
-var TitleSwitcher = React.createClass({
+var TitleSwitcher = CreateReactClass({
   mixins: [
     Router.AsyncRouteRenderingMixin,
     Router.RouterMixin,
     React.addons.PureRenderMixin
   ],
 
   propTypes: {
-    messages: React.PropTypes.object,
-    component: React.PropTypes.node
+    messages: PropTypes.object,
+    component: PropTypes.node
   },
 
   getDefaultProps: function() {

diff --git a/examples/master-detail/index.js b/examples/master-detail/index.js
@@ -2,11 +2,12 @@
 
 var React = require('react');
 var ReactRouter = require('../../');
+var CreateReactClass = require('create-react-class');
 var Locations = ReactRouter.Locations;
 var Location = ReactRouter.Location;
 var Link = ReactRouter.Link;
 
-var Master = React.createClass({
+var Master = CreateReactClass({
 
   render: function() {
     var links = [1, 2, 3, 4, 5].map((item) =>
@@ -18,7 +19,7 @@ var Master = React.createClass({
   }
 });
 
-var Detail = React.createClass({
+var Detail = CreateReactClass({
 
   render: function() {
     return (
@@ -29,7 +30,7 @@ var Detail = React.createClass({
   }
 });
 
-var Page = React.createClass({
+var Page = CreateReactClass({
 
   render: function() {
     return (
@@ -41,7 +42,7 @@ var Page = React.createClass({
   }
 });
 
-var App = React.createClass({
+var App = CreateReactClass({
 
   render: function() {
     return (

diff --git a/examples/querystring-key/index.js b/examples/querystring-key/index.js
@@ -2,6 +2,7 @@
 
 var qs          = require('querystring');
 var React       = require('react');
+var CreateReactClass = require('create-react-class');
 var Router      = require('../../');
 var Environment = require('../../lib/Environment');
 
@@ -65,7 +66,7 @@ var Context = {
   }
 };
 
-var Tabs = React.createClass({
+var Tabs = CreateReactClass({
 
   mixins: [Context],
 
@@ -95,14 +96,14 @@ var Tabs = React.createClass({
   }
 });
 
-var Tab1 = React.createClass({
+var Tab1 = CreateReactClass({
 
   render: function() {
     return <div>Tab1</div>;
   }
 });
 
-var Tab2 = React.createClass({
+var Tab2 = CreateReactClass({
 
   render: function() {
     return <div>Tab2</div>;

diff --git a/lib/CaptureClicks.js b/lib/CaptureClicks.js
@@ -1,19 +1,21 @@
 "use strict";
 
 var React       = require('react');
+var CreateReactClass = require('create-react-class');
+var PropTypes   = require('prop-types');
 var urllite     = require('urllite/lib/core');
 var Environment = require('./environment');
 var HashEnvironment = require('./environment/HashEnvironment');
 var assign      = Object.assign || require('object-assign');
 var omit        = require('object.omit');
 
 var PROP_TYPES = {
-  component: React.PropTypes.oneOfType([
-    React.PropTypes.string,
-    React.PropTypes.func
+  component: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func
   ]).isRequired,
-  environment: React.PropTypes.object,
-  gotoURL: React.PropTypes.func
+  environment: PropTypes.object,
+  gotoURL: PropTypes.func
 };
 
 var PROP_KEYS = Object.keys(PROP_TYPES);
@@ -22,7 +24,7 @@ var PROP_KEYS = Object.keys(PROP_TYPES);
  * A container component which captures <a> clicks and, if there's a matching
  * route defined, routes them.
  */
-var CaptureClicks = React.createClass({
+var CaptureClicks = CreateReactClass({
   displayName: 'CaptureClicks',
 
   propTypes: PROP_TYPES,