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
config.jsfile. Add the option
"blacklist": to remove react from the blacklist.
Next we need a simple
index.htmlpage. 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
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.