Wanna do new JavaScript + React?

Here's the "easiest" way to get started with the latest version of JavaScript (so much new stuff in es2105!) and the most popular kid (for this week, at least) in the JS framework playground: React.

This approach uses the wonderful new JSPM package manager... so if you're not willing to place your bet on this particular horse, then head over to WebPack land to see if they have a similar guide. Also, if you want to see the final product - here's my "ES2015+React boilerplate".

Create a new project with jspm install (and install JSPM if you haven't).
Hit enter over all the defaults, except for Transpiler: traceur/babel?. Change this to Babel. It's more cool this week, and supports JSX.
But it doesn't support JSX by default. To allow it, we need to tweak the babelOptions in the config.js file. Add the option "blacklist": [] to remove react from the blacklist.
Next we need a simple index.html page. Inside the body tag:
```
<body>
  <div id="app"></div>
  <script src="jspm_packages/system.js"></script>
  <script src="config.js"></script>
  <script>
    System.import('src/main');
  </script>
</body>
```
This loads the "System" module loader polyfill so we can load modules. The config file specifies a bunch of modules to load (such as React!). Finally, we do our own System.import and call our own file at /src/main.js.

Add a script at /src/main.js. Make it look like this:

import React from 'react';

export default React.render(
  <div>Hello World </div>,
  document.querySelector('#app')
);

Serve it up. Use the simple web server of your choice (I like http-server) to serve the page, and test all is well.

Phew, quite a lot still - but worth it to get all the magical goodness. Plus it's all in the boilerplate repo if you don't want to do these steps every new project.