creatClass codemod

Reviewed By: acdlite, flarnie

Differential Revision: D5465182

fbshipit-source-id: 084d364abb7bf74e799dbf24a4c1c01a3bf7cd46

website/core/AlgoliaDocSearch.js

@@ -12,14 +12,14 @@
 
 var React = require('React');
 
-var AlgoliaDocSearch = React.createClass({
-  render: function() {
+class AlgoliaDocSearch extends React.Component {
+  render() {
     return (
       <div className="algolia-search-wrapper">
         <input id="algolia-doc-search" tabIndex="0" type="text" placeholder="Search docs..." />
       </div>
     );
   }
-});
+}
 
 module.exports = AlgoliaDocSearch;

website/core/BlogPost.js

@@ -17,8 +17,8 @@ var BlogPostHeader = require('BlogPostHeader');
 var BlogPostFooter = require('BlogPostFooter');
 var ExcerptLink = require('ExcerptLink');
 
-var BlogPost = React.createClass({
-  render: function() {
+class BlogPost extends React.Component {
+  render() {
     var post = this.props.post;
 
     return (
@@ -31,6 +31,6 @@ var BlogPost = React.createClass({
       </article>
     );
   }
-});
+}
 
 module.exports = BlogPost;

website/core/BlogPostDate.js

@@ -13,8 +13,8 @@
 
 var React = require('React');
 
-var BlogPostDate = React.createClass({
-  render: function() {
+class BlogPostDate extends React.Component {
+  render() {
     var post = this.props.post;
 
     var match = post.publishedAt.match(/([0-9]+)-([0-9]+)-([0-9]+)/);
@@ -32,6 +32,6 @@ var BlogPostDate = React.createClass({
       <time className="date" datetime={post.publishedAt}>{postedOnDate}</time>
     );
   }
-});
+}
 
 module.exports = BlogPostDate;

website/core/BlogPostExcerpt.js

@@ -16,8 +16,8 @@ var BlogPostHeader = require('BlogPostHeader');
 var Marked = require('Marked');
 var ExcerptLink = require('ExcerptLink');
 
-var BlogPostExcerpt = React.createClass({
-  render: function() {
+class BlogPostExcerpt extends React.Component {
+  render() {
     var post = this.props.post;
     return (
       <article className="entry-excerpt">
@@ -33,6 +33,6 @@ var BlogPostExcerpt = React.createClass({
       </article>
     );
   }
-});
+}
 
 module.exports = BlogPostExcerpt;

website/core/BlogPostFooter.js

@@ -14,8 +14,8 @@
 var React = require('React');
 var BlogPostDate = require('BlogPostDate');
 
-var BlogPostFooter = React.createClass({
-  render: function() {
+class BlogPostFooter extends React.Component {
+  render() {
     var post = this.props.post;
 
     var authorImage = this.props.post.authorImage ? this.props.post.authorImage : '/react-native/img/author.png';
@@ -58,6 +58,6 @@ var BlogPostFooter = React.createClass({
       </div>
     );
   }
-});
+}
 
 module.exports = BlogPostFooter;

website/core/BlogPostHeader.js

@@ -14,8 +14,8 @@
 var React = require('React');
 var BlogPostDate = require('BlogPostDate');
 
-var BlogPostHeader = React.createClass({
-  render: function() {
+class BlogPostHeader extends React.Component {
+  render() {
     var post = this.props.post;
 
     var hero;
@@ -54,6 +54,6 @@ var BlogPostHeader = React.createClass({
       </header>
     );
   }
-});
+}
 
 module.exports = BlogPostHeader;

website/core/DocsSidebar.js

@@ -13,8 +13,15 @@
 var Metadata = require('Metadata');
 var React = require('React');
 
-var DocsSidebar = React.createClass({
-  getCategories: function() {
+class DocsSidebar extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.getCategories = this.getCategories.bind(this);
+    this.getLink = this.getLink.bind(this);
+  }
+
+  getCategories() {
     var metadatas = Metadata.files.filter(function(metadata) {
       return metadata.layout === 'docs' || metadata.layout === 'autodocs';
     });
@@ -67,13 +74,13 @@ var DocsSidebar = React.createClass({
     categories.push(currentCategory);
 
     return categories;
-  },
+  }
 
-  getLink: function(metadata) {
+  getLink(metadata) {
     return metadata.permalink;
-  },
+  }
 
-  render: function() {
+  render() {
     return <div className="nav-docs">
       <div className="nav-docs-viewport">
         {this.getCategories().map((category) =>
@@ -97,6 +104,6 @@ var DocsSidebar = React.createClass({
       </div>
     </div>;
   }
-});
+}
 
 module.exports = DocsSidebar;

website/core/EjectBanner.js

@@ -12,8 +12,8 @@
 
 var React = require('React');
 
-var EjectBanner = React.createClass({
-  render: function() {
+class EjectBanner extends React.Component {
+  render() {
     return (
       <div className="banner-crna-ejected">
         <h3>Project with Native Code Required</h3>
@@ -25,6 +25,6 @@ var EjectBanner = React.createClass({
       </div>
     );
   }
-});
+}
 
 module.exports = EjectBanner;

website/core/ExcerptLink.js

@@ -13,8 +13,8 @@
 
 var React = require('React');
 
-var ExcerptLink = React.createClass({
-  render: function() {
+class ExcerptLink extends React.Component {
+  render() {
     var cta = "Read more";
 
     if (this.props.category === "videos") {
@@ -29,6 +29,6 @@ var ExcerptLink = React.createClass({
       </footer>
     );
   }
-});
+}
 
 module.exports = ExcerptLink;

website/core/Footer.js

@@ -16,14 +16,14 @@ function getGitHubPath(path) {
   return 'https://github.com/facebook/react-native/blob/master/' + path;
 }
 
-var Footer = React.createClass({
-  render: function() {
+class Footer extends React.Component {
+  render() {
     return (
       <p className="edit-page-block">
         You can <a target="_blank" href={getGitHubPath(this.props.path)}>edit the content above on GitHub</a> and send us a pull request!
       </p>
     );
   }
-});
+}
 
 module.exports = Footer;

website/core/H2.js

@@ -13,10 +13,10 @@
 var Header = require('Header');
 var React = require('React');
 
-var H2 = React.createClass({
-  render: function() {
+class H2 extends React.Component {
+  render() {
     return <Header {...this.props} level={2}>{this.props.children}</Header>;
   }
-});
+}
 
 module.exports = H2;

website/core/Header.js

@@ -16,12 +16,8 @@ var PropTypes = require('prop-types');
 
 var slugify = require('slugify');
 
-var Header = React.createClass({
-  contextTypes: {
-    permalink: PropTypes.string
-  },
-
-  render: function() {
+class Header extends React.Component {
+  render() {
     var slug = slugify(this.props.toSlug || this.props.children);
     var H = 'h' + this.props.level;
     var base = this.context.permalink || '';
@@ -33,6 +29,10 @@ var Header = React.createClass({
       </H>
     );
   }
-});
+}
+
+Header.contextTypes = {
+  permalink: PropTypes.string
+};
 
 module.exports = Header;

website/core/HeaderLinks.js

@@ -13,18 +13,19 @@
 var AlgoliaDocSearch = require('AlgoliaDocSearch');
 var React = require('React');
 
-var HeaderLinks = React.createClass({
-  linksInternal: [
-    {section: 'docs', href: 'docs/getting-started.html', text: 'Docs', target: '.nav-docs'},
-    {section: 'support', href: '/react-native/support.html', text: 'Help'},
-    {section: 'blog', href: '/react-native/blog/', text: 'Blog'},
-  ],
-  linksExternal: [
-    {section: 'github', href: 'https://github.com/facebook/react-native', text: 'GitHub'},
-    {section: 'react', href: 'http://facebook.github.io/react', text: 'React'},
-  ],
+var linksInternal = [
+  {section: 'docs', href: 'docs/getting-started.html', text: 'Docs', target: '.nav-docs'},
+  {section: 'support', href: '/react-native/support.html', text: 'Help'},
+  {section: 'blog', href: '/react-native/blog/', text: 'Blog'},
+];
 
-  makeLinks: function(links) {
+var linksExternal = [
+  {section: 'github', href: 'https://github.com/facebook/react-native', text: 'GitHub'},
+  {section: 'react', href: 'http://facebook.github.io/react', text: 'React'},
+];
+
+class HeaderLinks extends React.Component {
+  makeLinks(links) {
     return links.map(function(link) {
       return (
         <li key={link.section}>
@@ -37,23 +38,23 @@ var HeaderLinks = React.createClass({
         </li>
       );
     }, this);
-  },
+  }
 
-  render: function() {
+  render() {
     return (
       <div className="nav-site-wrapper">
         <ul className="nav-site nav-site-internal">
-          {this.makeLinks(this.linksInternal)}
+          {this.makeLinks(linksInternal)}
         </ul>
 
         <AlgoliaDocSearch />
 
         <ul className="nav-site nav-site-external">
-          {this.makeLinks(this.linksExternal)}
+          {this.makeLinks(linksExternal)}
         </ul>
       </div>
     );
   }
-});
+}
 
 module.exports = HeaderLinks;

website/core/HeaderWithGithub.js

@@ -19,13 +19,8 @@ function getGitHubPath(path) {
   return  'https://github.com/facebook/react-native/blob/master/' + path;
 }
 
-var HeaderWithGithub = React.createClass({
-
-  contextTypes: {
-    version: PropTypes.string
-  },
-
-  render: function() {
+class HeaderWithGithub extends React.Component {
+  render() {
     return (
       <table width="100%">
         <tbody>
@@ -47,6 +42,10 @@ var HeaderWithGithub = React.createClass({
       </table>
     );
   }
-});
+}
+
+HeaderWithGithub.contextTypes = {
+  version: PropTypes.string
+};
 
 module.exports = HeaderWithGithub;

website/core/Hero.js

@@ -12,8 +12,8 @@
 
 var React = require('React');
 
-var Hero = React.createClass({
-  render: function() {
+class Hero extends React.Component {
+  render() {
     return (
       <div className="hero">
         <div className="wrap">
@@ -26,6 +26,6 @@ var Hero = React.createClass({
       </div>
     );
   }
-});
+}
 
 module.exports = Hero;

website/core/Marked.js

@@ -1193,15 +1193,15 @@ marked.inlineLexer = InlineLexer.output;
 
 marked.parse = marked;
 
-var Marked = React.createClass({
-  render: function() {
+class Marked extends React.Component {
+  render() {
     return this.props.children
       ? React.DOM.div(
           null,
           marked(this.props.children, this.props)
         )
       : null;
-  },
-});
+  }
+}
 
 module.exports = Marked;

website/core/Prism.js

@@ -526,16 +526,8 @@ _.languages.java = _.languages.extend('clike', {
   },
 });
 
-var Prism = React.createClass({
-  statics: {
-    _: _,
-  },
-  getDefaultProps: function() {
-    return {
-      language: 'javascript',
-    };
-  },
-  render: function() {
+class Prism extends React.Component {
+  render() {
     var grammar = _.languages[this.props.language];
     if (!grammar) {
       grammar = _.languages.javascript;
@@ -549,7 +541,12 @@ var Prism = React.createClass({
         )}
       </div>
     );
-  },
-});
+  }
+}
+
+Prism._ = _;
+Prism.defaultProps = {
+  language: 'javascript',
+};
 
 module.exports = Prism;

website/core/ShowcaseAppIcon.js

@@ -13,14 +13,14 @@
 
 var React = require('React');
 
-const ShowcaseAppIcon = React.createClass({
-  render: function() {
+class ShowcaseAppIcon extends React.Component {
+  render() {
     return (
       <a href={this.props.linkUri}>
         <img src={this.props.iconUri} alt={this.props.name} />
       </a>
     );
   }
-});
+}
 
 module.exports = ShowcaseAppIcon;

website/core/Site.js

@@ -14,8 +14,8 @@ var HeaderLinks = require('HeaderLinks');
 var Metadata = require('Metadata');
 var React = require('React');
 
-var Site = React.createClass({
-  render: function() {
+class Site extends React.Component {
+  render() {
     const path = Metadata.config.RN_DEPLOYMENT_PATH;
     const version = Metadata.config.RN_VERSION;
     const algoliaVersion = version === 'next'
@@ -426,6 +426,7 @@ var Site = React.createClass({
         </body>
       </html>
     );
-  },
-});
+  }
+}
+
 module.exports = Site;

website/core/SnackPlayer.js

@@ -41,14 +41,16 @@ var ReactNativeToExpoSDKVersionMap = {
  * }
  * ```
  */
-var SnackPlayer = React.createClass({
-  contextTypes: {
-    version: PropTypes.number.isRequired,
-  },
+class SnackPlayer extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.parseParams = this.parseParams.bind(this);
+  }
 
   componentDidMount() {
     window.ExpoSnack && window.ExpoSnack.initialize();
-  },
+  }
 
   render() {
     var code = encodeURIComponent(this.props.children);
@@ -110,9 +112,9 @@ var SnackPlayer = React.createClass({
         </div>
       </div>
     );
-  },
+  }
 
-  parseParams: function(paramString) {
+  parseParams(paramString) {
     var params = {};
 
     if (paramString) {
@@ -124,7 +126,11 @@ var SnackPlayer = React.createClass({
     }
 
     return params;
-  },
-});
+  }
+}
+
+SnackPlayer.contextTypes = {
+  version: PropTypes.number.isRequired,
+};
 
 module.exports = SnackPlayer;

website/core/WebPlayer.js

@@ -31,8 +31,14 @@ var WEB_PLAYER_VERSION = '1.2.6';
  * AppRegistry.registerComponent('MyApp', () => App);
  * ```
  */
-var WebPlayer = React.createClass({
-  parseParams: function(paramString) {
+class WebPlayer extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.parseParams = this.parseParams.bind(this);
+  }
+
+  parseParams(paramString) {
     var params = {};
 
     if (paramString) {
@@ -44,9 +50,9 @@ var WebPlayer = React.createClass({
     }
 
     return params;
-  },
+  }
 
-  render: function() {
+  render() {
     var hash = `#code=${encodeURIComponent(this.props.children)}`;
 
     if (this.props.params) {
@@ -65,7 +71,7 @@ var WebPlayer = React.createClass({
         />
       </div>
     );
-  },
-});
+  }
+}
 
 module.exports = WebPlayer;

website/core/center.js

@@ -12,14 +12,14 @@
 
 var React = require('React');
 
-var center = React.createClass({
-  render: function() {
+class center extends React.Component {
+  render() {
     return (
       <div {...this.props} style={{textAlign: 'center'}}>
         {this.props.children}
       </div>
     );
   }
-});
+}
 
 module.exports = center;

website/layout/AutodocsLayout.js

@@ -14,7 +14,6 @@
 var DocsSidebar = require('DocsSidebar');
 var Footer = require('Footer');
 var Header = require('Header');
-var HeaderWithGithub = require('HeaderWithGithub');
 var Marked = require('Marked');
 var Metadata = require('Metadata');
 var Prism = require('Prism');
@@ -204,8 +203,23 @@ function getNamedTypes(typedefs) {
   return namedTypes;
 }
 
-var ComponentDoc = React.createClass({
-  renderProp: function(name, prop) {
+class ComponentDoc extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.extractPlatformFromProps = this.extractPlatformFromProps.bind(this);
+    this.renderCompose = this.renderCompose.bind(this);
+    this.renderStylesheetProp = this.renderStylesheetProp.bind(this);
+    this.renderStylesheetProps = this.renderStylesheetProps.bind(this);
+    this.renderMethod = this.renderMethod.bind(this);
+    this.renderMethods = this.renderMethods.bind(this);
+    this.renderProp = this.renderProp.bind(this);
+    this.renderProps = this.renderProps.bind(this);
+    this.renderTypeDef = this.renderTypeDef.bind(this);
+    this.renderTypeDefs = this.renderTypeDefs.bind(this);
+  }
+
+  renderProp(name, prop) {
     return (
       <div className="prop" key={name}>
         <Header level={4} className="propTitle" toSlug={name}>
@@ -232,9 +246,9 @@ var ComponentDoc = React.createClass({
         {prop.description && <Marked>{prop.description}</Marked>}
       </div>
     );
-  },
+  }
 
-  renderCompose: function(name) {
+  renderCompose(name) {
     return (
       <div className="prop" key={name}>
         <Header level={4} className="propTitle" toSlug={name}>
@@ -242,9 +256,9 @@ var ComponentDoc = React.createClass({
         </Header>
       </div>
     );
-  },
+  }
 
-  renderStylesheetProp: function(name, prop) {
+  renderStylesheetProp(name, prop) {
     return (
       <div className="prop" key={name}>
         <h6 className="propTitle">
@@ -261,9 +275,9 @@ var ComponentDoc = React.createClass({
         </h6>
       </div>
     );
-  },
+  }
 
-  renderStylesheetProps: function(stylesheetName) {
+  renderStylesheetProps(stylesheetName) {
     var style = this.props.content.styles[stylesheetName];
     this.extractPlatformFromProps(style.props);
     return (
@@ -299,9 +313,9 @@ var ComponentDoc = React.createClass({
         }
       </div>
     );
-  },
+  }
 
-  renderProps: function(props, composes) {
+  renderProps(props, composes) {
     return (
       <div className="props">
         {(composes || []).map((name) =>
@@ -313,9 +327,9 @@ var ComponentDoc = React.createClass({
         }
       </div>
     );
-  },
+  }
 
-  extractPlatformFromProps: function(props) {
+  extractPlatformFromProps(props) {
     for (var key in props) {
       var prop = props[key];
       var description = prop.description || '';
@@ -326,9 +340,9 @@ var ComponentDoc = React.createClass({
       prop.description = description;
       prop.platforms = platforms;
     }
-  },
+  }
 
-  renderMethod: function(method, namedTypes) {
+  renderMethod(method, namedTypes) {
     return (
       <Method
         key={method.name}
@@ -341,9 +355,9 @@ var ComponentDoc = React.createClass({
         namedTypes={namedTypes}
       />
     );
-  },
+  }
 
-  renderMethods: function(methods, namedTypes) {
+  renderMethods(methods, namedTypes) {
     if (!methods || !methods.length) {
       return null;
     }
@@ -357,9 +371,9 @@ var ComponentDoc = React.createClass({
         </div>
       </span>
     );
-  },
+  }
 
-  renderTypeDef: function(typedef, namedTypes) {
+  renderTypeDef(typedef, namedTypes) {
     return (
       <TypeDef
         key={typedef.name}
@@ -372,9 +386,9 @@ var ComponentDoc = React.createClass({
         namedTypes={namedTypes}
       />
     );
-  },
+  }
 
-  renderTypeDefs: function(typedefs, namedTypes) {
+  renderTypeDefs(typedefs, namedTypes) {
     if (!typedefs || !typedefs.length) {
       return null;
     }
@@ -388,9 +402,9 @@ var ComponentDoc = React.createClass({
         </div>
       </span>
     );
-  },
+  }
 
-  render: function() {
+  render() {
     var content = this.props.content;
     this.extractPlatformFromProps(content.props);
     const namedTypes = getNamedTypes(content.typedef);
@@ -406,11 +420,23 @@ var ComponentDoc = React.createClass({
       </div>
     );
   }
-});
+}
 
-var APIDoc = React.createClass({
+class APIDoc extends React.Component {
+  constructor(props, context) {
+    super(props, context);
 
-  renderMethod: function(method, namedTypes) {
+    this.renderMethod = this.renderMethod.bind(this);
+    this.renderMethods = this.renderMethods.bind(this);
+    this.renderProperty = this.renderProperty.bind(this);
+    this.renderProperties = this.renderProperties.bind(this);
+    this.renderClasses = this.renderClasses.bind(this);
+    this.renderTypeDef = this.renderTypeDef.bind(this);
+    this.renderTypeDefs = this.renderTypeDefs.bind(this);
+    this.renderMainDescription = this.renderMainDescription.bind(this);
+  }
+
+  renderMethod(method, namedTypes) {
     return (
       <Method
         key={method.name}
@@ -423,9 +449,9 @@ var APIDoc = React.createClass({
         namedTypes={namedTypes}
       />
     );
-  },
+  }
 
-  renderMethods: function(methods, namedTypes) {
+  renderMethods(methods, namedTypes) {
     if (!methods.length) {
       return null;
     }
@@ -439,9 +465,9 @@ var APIDoc = React.createClass({
         </div>
       </span>
     );
-  },
+  }
 
-  renderProperty: function(property) {
+  renderProperty(property) {
     return (
       <div className="prop" key={property.name}>
         <Header level={4} className="propTitle" toSlug={property.name}>
@@ -457,9 +483,9 @@ var APIDoc = React.createClass({
         </Marked>}
       </div>
     );
-  },
+  }
 
-  renderProperties: function(properties) {
+  renderProperties(properties) {
     if (!properties || !properties.length) {
       return null;
     }
@@ -473,9 +499,9 @@ var APIDoc = React.createClass({
         </div>
       </span>
     );
-  },
+  }
 
-  renderClasses: function(classes, namedTypes) {
+  renderClasses(classes, namedTypes) {
     if (!classes || !classes.length) {
       return null;
     }
@@ -503,9 +529,9 @@ var APIDoc = React.createClass({
         </div>
       </span>
     );
-  },
+  }
 
-  renderTypeDef: function(typedef, namedTypes) {
+  renderTypeDef(typedef, namedTypes) {
     return (
       <TypeDef
         key={typedef.name}
@@ -518,9 +544,9 @@ var APIDoc = React.createClass({
         namedTypes={namedTypes}
       />
     );
-  },
+  }
 
-  renderTypeDefs: function(typedefs, namedTypes) {
+  renderTypeDefs(typedefs, namedTypes) {
     if (!typedefs || !typedefs.length) {
       return null;
     }
@@ -534,9 +560,9 @@ var APIDoc = React.createClass({
         </div>
       </span>
     );
-  },
+  };
 
-  renderMainDescription: function(content) {
+  renderMainDescription(content) {
     if (content.docblock) {
       return (
         <Marked>
@@ -552,9 +578,9 @@ var APIDoc = React.createClass({
       );
     }
     return null;
-  },
+  }
 
-  render: function() {
+  render() {
     var content = this.props.content;
     if (!content.methods) {
       throw new Error(
@@ -572,10 +598,18 @@ var APIDoc = React.createClass({
       </div>
     );
   }
-});
+}
 
-var Method = React.createClass({
-  renderTypehintRec: function(typehint) {
+class Method extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.renderTypehint = this.renderTypehint.bind(this);
+    this.renderTypehintRec = this.renderTypehintRec.bind(this);
+    this.renderMethodExamples = this.renderMethodExamples.bind(this);
+    this.renderMethodParameters = this.renderMethodParameters.bind(this);
+  }
+  renderTypehintRec(typehint) {
     if (typehint.type === 'simple') {
       return typehint.value;
     }
@@ -585,10 +619,9 @@ var Method = React.createClass({
     }
 
     return JSON.stringify(typehint);
+  }
 
-  },
-
-  renderTypehint: function(typehint) {
+  renderTypehint(typehint) {
     if (typeof typehint === 'object' && typehint.name) {
       return renderType(typehint);
     }
@@ -599,9 +632,9 @@ var Method = React.createClass({
     }
 
     return this.renderTypehintRec(typehint);
-  },
+  }
 
-  renderMethodExamples: function(examples) {
+  renderMethodExamples(examples) {
     if (!examples || !examples.length) {
       return null;
     }
@@ -621,9 +654,9 @@ var Method = React.createClass({
         </div>
       );
     });
-  },
+  };
 
-  renderMethodParameters: function(params) {
+  renderMethodParameters(params) {
     if (!params || !params.length) {
       return null;
     }
@@ -661,9 +694,9 @@ var Method = React.createClass({
           </table>
       </div>
     );
-  },
+  }
 
-  render: function() {
+  render() {
     return (
       <div className="prop">
         <Header level={4} className="methodTitle" toSlug={this.props.name}>
@@ -690,11 +723,18 @@ var Method = React.createClass({
         {this.renderMethodExamples(this.props.examples)}
       </div>
     );
-  },
-});
+  }
+}
 
-var TypeDef = React.createClass({
-  renderProperties: function(properties) {
+class TypeDef extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.renderProperties = this.renderProperties.bind(this);
+    this.renderValues = this.renderValues.bind(this);
+  }
+
+  renderProperties(properties) {
     if (!properties || !properties.length) {
       return null;
     }
@@ -729,9 +769,9 @@ var TypeDef = React.createClass({
           </table>
       </div>
     );
-  },
+  }
 
-  renderValues: function(values) {
+  renderValues(values) {
     if (!values || !values.length) {
       return null;
     }
@@ -764,9 +804,9 @@ var TypeDef = React.createClass({
         </table>
       </div>
     );
-  },
+  }
 
-  render: function() {
+  render() {
     return (
       <div className="prop">
         <Header level={4} className="propTitle" toSlug={this.props.name}>
@@ -782,23 +822,24 @@ var TypeDef = React.createClass({
         {this.renderValues(this.props.values)}
       </div>
     );
-  },
-});
+  }
+}
 
-var Autodocs = React.createClass({
-  childContextTypes: {
-    permalink: PropTypes.string,
-    version: PropTypes.string
-  },
+class Autodocs extends React.Component {
+  contsructor(props, context) {
+    super(props, context);
 
-  getChildContext: function() {
+    this.renderFullDescription = this.renderFullDescription.bind(this);
+  }
+
+  getChildContext() {
     return {
       permalink: this.props.metadata.permalink,
       version: Metadata.config.RN_VERSION || 'next'
     };
-  },
+  }
 
-  renderFullDescription: function(docs) {
+  renderFullDescription(docs) {
     if (!docs.fullDescription) {
       return;
     }
@@ -811,9 +852,9 @@ var Autodocs = React.createClass({
         <Footer path={'docs/' + docs.componentName + '.md'} />
       </div>
     );
-  },
+  }
 
-  render: function() {
+  render() {
     var metadata = this.props.metadata;
     var docs = JSON.parse(this.props.children);
     var content  = docs.type === 'component' || docs.type === 'style' ?
@@ -841,6 +882,11 @@ var Autodocs = React.createClass({
       </Site>
     );
   }
-});
+}
+
+Autodocs.childContextTypes = {
+  permalink: PropTypes.string,
+  version: PropTypes.string
+};
 
 module.exports = Autodocs;

website/layout/BlogPageLayout.js

@@ -15,19 +15,24 @@ var React = require('React');
 var Site = require('Site');
 var Hero = require('Hero');
 var MetadataBlog = require('MetadataBlog');
-var BlogPost = require('BlogPost');
 var BlogPostExcerpt = require('BlogPostExcerpt');
 
-var BlogPageLayout = React.createClass({
-  getPageURL: function(page) {
+class BlogPageLayout extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.getPageURL = this.getPageURL.bind(this);
+  }
+
+  getPageURL(page) {
     var url = '/react-native/blog/';
     if (page > 0) {
       url += 'page' + (page + 1) + '/';
     }
     return url + '#content';
-  },
+  }
 
-  render: function() {
+  render() {
     var perPage = this.props.metadata.perPage;
     var page = this.props.metadata.page;
     return (
@@ -55,6 +60,6 @@ var BlogPageLayout = React.createClass({
       </Site>
     );
   }
-});
+}
 
 module.exports = BlogPageLayout;

website/layout/BlogPostLayout.js

@@ -19,8 +19,8 @@ var BlogPost = require('BlogPost');
 var BlogPostHeader = require('BlogPostHeader');
 var Marked = require('Marked');
 
-var BlogPostLayout = React.createClass({
-  render: function() {
+class BlogPostLayout extends React.Component {
+  render() {
     return (
       <Site
         section="blog"
@@ -39,6 +39,6 @@ var BlogPostLayout = React.createClass({
       </Site>
     );
   }
-});
+}
 
 module.exports = BlogPostLayout;

website/layout/DocsLayout.js

@@ -20,20 +20,15 @@ var React = require('React');
 var PropTypes = require('prop-types');
 var Site = require('Site');
 
-var DocsLayout = React.createClass({
-  childContextTypes: {
-    permalink: PropTypes.string,
-    version: PropTypes.string
-  },
-
-  getChildContext: function() {
+class DocsLayout extends React.Component {
+  getChildContext() {
     return {
       permalink: this.props.metadata.permalink,
       version: Metadata.config.RN_VERSION || 'next'
     };
-  },
+  }
 
-  render: function() {
+  render() {
     var metadata = this.props.metadata;
     var content = this.props.children;
     return (
@@ -57,6 +52,11 @@ var DocsLayout = React.createClass({
       </Site>
     );
   }
-});
+}
+
+DocsLayout.childContextTypes = {
+  permalink: PropTypes.string,
+  version: PropTypes.string
+};
 
 module.exports = DocsLayout;

website/layout/PageLayout.js

@@ -15,16 +15,12 @@ var React = require('React');
 var PropTypes = require('prop-types');
 var Site = require('Site');
 
-var support = React.createClass({
-  childContextTypes: {
-    permalink: PropTypes.string
-  },
-
-  getChildContext: function() {
+class support extends React.Component {
+  getChildContext() {
     return {permalink: this.props.metadata.permalink};
-  },
+  }
 
-  render: function() {
+  render() {
     var metadata = this.props.metadata;
     var content = this.props.children;
     return (
@@ -39,6 +35,10 @@ var support = React.createClass({
       </Site>
     );
   }
-});
+}
+
+support.childContextTypes = {
+  permalink: PropTypes.string
+};
 
 module.exports = support;

website/layout/RedirectLayout.js

@@ -12,8 +12,8 @@
 
 var React = require('React');
 
-var RedirectLayout = React.createClass({
-  render: function() {
+class RedirectLayout extends React.Component {
+  render() {
     var destinationUrl = this.props.metadata.destinationUrl;
 
     return (
@@ -32,6 +32,6 @@ var RedirectLayout = React.createClass({
       </html>
     );
   }
-});
+}
 
 module.exports = RedirectLayout;

website/src/react-native/404.js

@@ -10,8 +10,8 @@
 
 var React = require('React');
 
-var fourOhFour = React.createClass({
-  render: function() {
+class fourOhFour extends React.Component {
+  render() {
     return (
       <html>
         <head>
@@ -21,6 +21,6 @@ var fourOhFour = React.createClass({
       </html>
     );
   }
-});
+}
 
 module.exports = fourOhFour;

website/src/react-native/index.js

@@ -19,16 +19,22 @@ const pinnedApps = Metadata.showcaseApps.filter(app => {
   return app.pinned;
 });
 
-const AppList = React.createClass({
-  render: function() {
+class AppList extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this._renderApp = this._renderApp.bind(this);
+  }
+
+  render() {
     return (
       <div>
         {this.props.apps.map(this._renderApp)}
       </div>
     );
-  },
+  }
 
-  _renderApp: function(app, i) {
+  _renderApp(app, i) {
     return (
       <div className="showcase" key={i}>
         <ShowcaseAppIcon
@@ -37,11 +43,11 @@ const AppList = React.createClass({
           linkUri={app.infoLink} />
       </div>
     );
-  },
-});
+  }
+}
 
-const index = React.createClass({
-  render: function() {
+class index extends React.Component {
+  render() {
     return (
       <Site>
         <Hero title="React Native" subtitle="Learn once, write anywhere: Build mobile apps with React">
@@ -168,6 +174,6 @@ class SomethingFast extends Component {
       </Site>
     );
   }
-});
+}
 
 module.exports = index;

website/src/react-native/showcase.js

@@ -35,17 +35,26 @@ const featuredApps = showcaseApps.filter(app => {
 
 const apps = pinnedApps.concat(featuredApps);
 
-const AppList = React.createClass({
+class AppList extends React.Component {
+  constructor(props, context) {
+    super(props, context);
 
-  render: function() {
+    this._renderApp = this._renderApp.bind(this);
+    this._renderAppIcon = this._renderAppIcon.bind(this);
+    this._renderAppName = this._renderAppName.bind(this);
+    this._renderInfo = this._renderInfo.bind(this);
+    this._renderLinks = this._renderLinks.bind(this);
+  }
+
+  render() {
     return (
       <div>
         {this.props.apps.map(this._renderApp)}
       </div>
     );
-  },
+  }
 
-  _renderApp: function(app, i) {
+  _renderApp(app, i) {
     return (
       <div className="showcase" key={i}>
         <div>
@@ -59,17 +68,17 @@ const AppList = React.createClass({
         </div>
       </div>
     );
-  },
+  }
 
-  _renderAppIcon: function(app) {
+  _renderAppIcon(app) {
     return <img src={app.icon} alt={app.name} />;
-  },
+  }
 
-  _renderAppName: function(name) {
+  _renderAppName(name) {
     return <h3>{name}</h3>;
-  },
+  }
 
-  _renderInfo: function(title, uri) {
+  _renderInfo(title, uri) {
     let info = null;
     if (uri) {
       info = <p><a href={uri} target="_blank">{title}</a></p>;
@@ -78,9 +87,9 @@ const AppList = React.createClass({
     return (
       {info}
     );
-  },
+  }
 
-  _renderLinks: function(app) {
+  _renderLinks(app) {
     if (!app.linkAppStore && !app.linkPlayStore) {
       return;
     }
@@ -95,11 +104,11 @@ const AppList = React.createClass({
         {linkPlayStore}
       </p>
     );
-  },
-});
+  }
+}
 
-const showcase = React.createClass({
-  render: function() {
+class showcase extends React.Component {
+  render() {
     return (
       <Site section="showcase" title="Showcase">
         <section className="content wrap documentationContent nosidebar showcaseSection">
@@ -130,6 +139,6 @@ const showcase = React.createClass({
       </Site>
     );
   }
-});
+}
 
 module.exports = showcase;

website/src/react-native/support.js

@@ -12,15 +12,12 @@ var React = require('React');
 var PropTypes = require('prop-types');
 var Site = require('Site');
 
-var support = React.createClass({
-  childContextTypes: {
-    permalink: PropTypes.string,
-  },
-
-  getChildContext: function() {
+class support extends React.Component {
+  getChildContext() {
     return { permalink: 'support.html' };
-  },
-  render: function() {
+  }
+
+  render() {
     return (
       <Site section="support" title="Help">
 
@@ -166,7 +163,11 @@ var support = React.createClass({
 
       </Site>
     );
-  },
-});
+  }
+}
+
+support.childContextTypes = {
+  permalink: PropTypes.string,
+};
 
 module.exports = support;

website/src/react-native/versions.js

@@ -12,8 +12,8 @@ var Metadata = require('Metadata');
 var React = require('React');
 var Site = require('Site');
 
-module.exports = React.createClass({
-  render: function() {
+module.exports = class extends React.Component {
+  render() {
     var availableDocs = (Metadata.config.RN_AVAILABLE_DOCS_VERSIONS ||
       '')
       .split(',');
@@ -220,5 +220,5 @@ module.exports = React.createClass({
         </section>
       </Site>
     );
-  },
-});
+  }
+};