Changed all class properties to use es7 class property syntax

[alicewriteswrongs]

What are the relevant tickets?

closes #330

What's this PR do?

This moves all class properties to the newer class property syntax, which uses the static keyword and looks like this:

class Foo {
  static someClassProperty = 12;
}

as opposed to the older syntax:

class Foo {
  ...
}

Foo.someClassProperty = 12;

the newer syntax moves the class properties into the body of the class declaration, meaning that the property declarations are closer to the code they relate to. On classes that extend React.Component we can declare our propTypes and defaultProps as class properties:

class Foobar extends React.Component {
  static propTypes = {
    foobar:  React.PropTypes.func.isRequired,
  }

  static defaultProps = {
    foobar: () => console.log("FOOBAR");
  }
}

It's a bit more readable and just generally nicer to work with. This syntax is a stage-1 proposal, which we're able to use by adding the stage-1 preset to Babel (see .babelrc).

Where should the reviewer start?

review the changes, make sure I didn't make any typos :P

How should this be manually tested?

click around and make sure everything works!

Any background context you want to provide?

Screenshots (if appropriate)

What GIF best describes this PR or how it makes you feel?

[gsidebo]

general question: does webpack (or some other tool) take this es6/7 syntax and 'translate' it to something that is compatible with all the browsers we support? keep in mind i dont even know what browsers we support

[alicewriteswrongs]

Yeah, we use babel for this purpose.
On May 17, 2016 12:15 PM, "Gavin Sidebottom" notifications@github.com
wrote:

general question: does webpack (or some other tool) take this es6/7 syntax
and 'translate' it to something that is compatible with all the browsers we
support? keep in mind i dont even know what browsers we support

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
#340 (comment)

[alicewriteswrongs]

you can read more here: https://babeljs.io/

[alicewriteswrongs]

Babel is a transpiler, so basically it implements the ES2015 (and newer) syntax in standards-compliant ES5 JS. Webpack has some knowledge of ES2015 syntax, but really right now (until the 2.0 release hits) it pretty much consumes ES5 JS, so we basically chain them together - babel transpiles the code we write to clean ES5, and Webpack does the minification and bundling (for production) or the hot-reload dev stuff.

[alicewriteswrongs]

We also polyfill prototype methods that don't yet have wide browser support (like Object.entries).

[alicewriteswrongs]

also I like talking about JS a lot so if you have questions hmu haha

[gsidebo]

👍 looks good