diff --git a/components/ReadNext.jsx b/components/ReadNext.jsx
index 5eac26ae428b9..2dda8a0a11308 100644
--- a/components/ReadNext.jsx
+++ b/components/ReadNext.jsx
@@ -3,10 +3,13 @@ import { Link } from 'react-router';
 import { prune, include as includes } from 'underscore.string';
 import find from 'lodash/collection/find';
 
-module.exports = React.createClass({
-  render: function() {
-    var body, fontSizeToMS, html, nextPost, readNext, ref, rhythm;
-    ref = this.props.typography, rhythm = ref.rhythm, fontSizeToMS = ref.fontSizeToMS;
+export default class extends React.Component {
+  render() {
+    let body, fontSizeToMS, html, nextPost, readNext, ref, rhythm;
+    ref = this.props.typography, 
+    rhythm = ref.rhythm, 
+    fontSizeToMS = ref.fontSizeToMS;
+    
     readNext = this.props.post.readNext;
     if (readNext != null) {
       nextPost = find(this.props.pages, function(page) {
@@ -53,4 +56,4 @@ module.exports = React.createClass({
       );
     }
   }
-});
+}
\ No newline at end of file
diff --git a/html.jsx b/html.jsx
index 3552b2d03562f..ee98186f9aa99 100644
--- a/html.jsx
+++ b/html.jsx
@@ -2,17 +2,11 @@ import React from 'react';
 import Typography from 'typography';
 import DocumentTitle from 'react-document-title';
 
-var TypographyStyle = new Typography().TypographyStyle;
+let TypographyStyle = new Typography().TypographyStyle;
 
-module.exports = React.createClass({
-  getDefaultProps: function() {
-    return {
-      body: ""
-    };
-  },
-
-  render: function() {
-    var title, urlPrefix;
+export default class Html extends React.Component {
+  render() {
+    let title, urlPrefix;
     title = DocumentTitle.rewind();
     if (this.props.title) {
       title = this.props.title;
@@ -56,6 +50,6 @@ module.exports = React.createClass({
         </body>
       </html>
     );
-
   }
-});
+}
+Html.defaultProps = { body: "" };
diff --git a/pages/_template.jsx b/pages/_template.jsx
index 9bd5deec2b0e5..44357735636a1 100644
--- a/pages/_template.jsx
+++ b/pages/_template.jsx
@@ -4,14 +4,14 @@ import { Container, Grid, Breakpoint, Span } from 'react-responsive-grid';
 import Typography from 'typography';
 import { link } from 'gatsby-helpers';
 
-var typography = new Typography();
-var rhythm = typography.rhythm, fontSizeToMS = typography.fontSizeToMS;
+let typography = new Typography();
+let rhythm = typography.rhythm, fontSizeToMS = typography.fontSizeToMS;
 
 import '../css/styles.css';
 
-module.exports = React.createClass({
-  render: function() {
-    var header;
+export default class extends React.Component {
+  render() {
+    let header;
     if (this.props.state.path === link('/')) {
       header = (
         <h1
@@ -59,4 +59,4 @@ module.exports = React.createClass({
       </Container>
     );
   }
-});
+}
diff --git a/pages/index.jsx b/pages/index.jsx
index a883443870576..41a2d2fb4abe3 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -4,20 +4,18 @@ import sortBy from 'lodash/collection/sortBy';
 import DocumentTitle from 'react-document-title';
 import { link } from 'gatsby-helpers';
 
-module.exports = React.createClass({
-  statics: {
-    data: function() {
-      return {
-        yo: true
-      };
+export default class extends React.Component {
+  static data() {
+    return {
+      yo: true
     }
-  },
-  render: function() {
-    var i, len, page, pageLinks, ref, ref1, ref2, rhythm, title;
+  }
+  render() {
+    let i, len, page, pageLinks, ref, ref1, ref2, rhythm, title;
     rhythm = this.props.typography.rhythm;
     pageLinks = [];
-    ref = sortBy(this.props.pages, function(page) {
-      var ref;
+    ref = sortBy(this.props.pages, (page) => {
+      let ref;
       return (ref = page.data) != null ? ref.date : void 0;
     }).reverse();
     for (i = 0, len = ref.length; i < len; i++) {
@@ -63,4 +61,4 @@ module.exports = React.createClass({
       </DocumentTitle>
     );
   }
-});
+}
\ No newline at end of file