Revert D5465182: creatClass codemod

Differential Revision: D5465182

fbshipit-source-id: a15de76f50294123323e211f8e11106b90fff911

website/core/AlgoliaDocSearch.js

@@ -12,14 +12,14 @@
 
 var React = require('React');
 
-class AlgoliaDocSearch extends React.Component {
-  render() {
+var AlgoliaDocSearch = React.createClass({
+  render: function() {
     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');
 
-class BlogPost extends React.Component {
-  render() {
+var BlogPost = React.createClass({
+  render: function() {
     var post = this.props.post;
 
     return (
@@ -31,6 +31,6 @@ class BlogPost extends React.Component {
       </article>
     );
   }
-}
+});
 
 module.exports = BlogPost;

website/core/BlogPostDate.js

@@ -13,8 +13,8 @@
 
 var React = require('React');
 
-class BlogPostDate extends React.Component {
-  render() {
+var BlogPostDate = React.createClass({
+  render: function() {
     var post = this.props.post;
 
     var match = post.publishedAt.match(/([0-9]+)-([0-9]+)-([0-9]+)/);
@@ -32,6 +32,6 @@ class BlogPostDate extends React.Component {
       <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');
 
-class BlogPostExcerpt extends React.Component {
-  render() {
+var BlogPostExcerpt = React.createClass({
+  render: function() {
     var post = this.props.post;
     return (
       <article className="entry-excerpt">
@@ -33,6 +33,6 @@ class BlogPostExcerpt extends React.Component {
       </article>
     );
   }
-}
+});
 
 module.exports = BlogPostExcerpt;

website/core/BlogPostFooter.js

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

website/core/BlogPostHeader.js

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

website/core/DocsSidebar.js

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

website/core/EjectBanner.js

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

website/core/ExcerptLink.js

@@ -13,8 +13,8 @@
 
 var React = require('React');
 
-class ExcerptLink extends React.Component {
-  render() {
+var ExcerptLink = React.createClass({
+  render: function() {
     var cta = "Read more";
 
     if (this.props.category === "videos") {
@@ -29,6 +29,6 @@ class ExcerptLink extends React.Component {
       </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;
 }
 
-class Footer extends React.Component {
-  render() {
+var Footer = React.createClass({
+  render: function() {
     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');
 
-class H2 extends React.Component {
-  render() {
+var H2 = React.createClass({
+  render: function() {
     return <Header {...this.props} level={2}>{this.props.children}</Header>;
   }
-}
+});
 
 module.exports = H2;

website/core/Header.js

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

website/core/HeaderLinks.js

@@ -13,19 +13,18 @@
 var AlgoliaDocSearch = require('AlgoliaDocSearch');
 var React = require('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'},
-];
+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 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) {
+  makeLinks: function(links) {
     return links.map(function(link) {
       return (
         <li key={link.section}>
@@ -38,23 +37,23 @@ class HeaderLinks extends React.Component {
         </li>
       );
     }, this);
-  }
+  },
 
-  render() {
+  render: function() {
     return (
       <div className="nav-site-wrapper">
         <ul className="nav-site nav-site-internal">
-          {this.makeLinks(linksInternal)}
+          {this.makeLinks(this.linksInternal)}
         </ul>
 
         <AlgoliaDocSearch />
 
         <ul className="nav-site nav-site-external">
-          {this.makeLinks(linksExternal)}
+          {this.makeLinks(this.linksExternal)}
         </ul>
       </div>
     );
   }
-}
+});
 
 module.exports = HeaderLinks;

website/core/HeaderWithGithub.js

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

website/core/Hero.js

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

website/core/Marked.js

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

website/core/Prism.js

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

website/core/ShowcaseAppIcon.js

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

website/core/SnackPlayer.js

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

website/core/WebPlayer.js

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

website/core/center.js

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

website/layout/AutodocsLayout.js

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

website/layout/BlogPageLayout.js

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

website/layout/BlogPostLayout.js

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

website/layout/DocsLayout.js

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

website/layout/PageLayout.js

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

website/layout/RedirectLayout.js

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

website/src/react-native/404.js

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

website/src/react-native/index.js

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

website/src/react-native/showcase.js

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

website/src/react-native/support.js

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