Es6!

static/src/js/app.js

@@ -1,10 +1,10 @@
 /* global $ */
 
-require('./events.js');
+import './events.js';
 
-var React = require('react');
+import React from 'react';
-var ProjectImagesTypes = require('./components/index/project-images-types');
+import ProjectImagesTypes from './components/index/project-images-types';
-var ProjectImagesMain = require('./components/index/project-images-main');
+import ProjectImagesMain from './components/index/project-images-main';
 
 
 if ($('body').hasClass('index')) {  // Render components on index

static/src/js/components/index/project-image.js

@@ -1,9 +1,9 @@
-var React = require('react');
+import React from 'react';
 var ReactBootstrap = require('react-bootstrap');
 var Col = ReactBootstrap.Col;
 
-var projectImage = React.createClass({
+export default class ProjectImage extends React.Component {
-  render: function () {
+  render() {
     var animationClass = this.props.isHovered ? 'zoomIn' : 'zoomOut';
     return (
       <Col sm={4} className="project-image">
@@ -23,6 +23,4 @@ var projectImage = React.createClass({
       </Col>
     );
   }
-});
+}
-
-module.exports = projectImage;

static/src/js/components/index/project-images-main.js

@@ -1,7 +1,7 @@
-var React = require('react');
+import React from 'react';
 var ReactBootstrap = require('react-bootstrap');
+import ProjectImage from './project-image';
 var Row = ReactBootstrap.Row;
-var ProjectImage = require('./project-image');
 
 const DATA = [
   {
@@ -42,19 +42,19 @@ const DATA = [
   }
 ];
 
-
+export default class ProjectImagesMain extends React.Component {
-var projectImagesMain = React.createClass({
+  constructor() {
-  keys: [[1, 2, 3], [4, 5, 6]],
+    super();
-  getInitialState: function () {
+    this.keys = [[1, 2, 3], [4, 5, 6]];
-    return {
+    this.state = {
-      hover: 0,
+      hover: 0
     };
-  },
+    this.setHovering = this.setHovering.bind(this);
-
+  }
-  setHovering: function (key) {
+  setHovering(key) {
     this.setState({hover: key});
-  },
+  }
-  render: function () {
+  render() {
     var generate_image = function (key) {
       return (
         <ProjectImage isHovered={this.state.hover === key}
@@ -76,6 +76,4 @@ var projectImagesMain = React.createClass({
       </div>
     );
   }
-});
+}
-
-module.exports = projectImagesMain;

static/src/js/components/index/project-images-types.js

@@ -1,7 +1,7 @@
-var React = require('react');
+import React from 'react';
 var ReactBootstrap = require('react-bootstrap');
+import ProjectImage from './project-image';
 var Row = ReactBootstrap.Row;
-var ProjectImage = require('./project-image');
 
 const DATA = [
   {
@@ -24,19 +24,21 @@ const DATA = [
   }
 ];
 
-
+export default class ProjectImagesTypes extends React.Component {
-var projectImagesTypes = React.createClass({
+  constructor() {
-  keys: [1, 2, 3],
+    super();
-  getInitialState: function () {
+    this.keys = [1, 2, 3];
-    return {
+    this.state = {
-      hover: 0,
+      hover: 0
     };
-  },
+    this.setHovering = this.setHovering.bind(this);
+  }
 
-  setHovering: function (key) {
+  setHovering(key) {
     this.setState({hover: key});
-  },
+  }
-  render: function () {
+
+  render() {
     var images = this.keys.map(function (key) {
       return (
         <ProjectImage isHovered={this.state.hover === key}
@@ -54,6 +56,4 @@ var projectImagesTypes = React.createClass({
       </div>
     );
   }
-});
+}
-
-module.exports = projectImagesTypes;