Yes, another demo repo for React, Hot Loading and ES2015 with Babel... with a few important differences. Most of the starter repos are pretty trivial and don't do much other than what you can find in the docs. When you want to do a little more it's frustrating how these implementations clash with one another.
This little repo allows you not only to make use of hot loading but also browser-sync which is a tool I'm not ready to do without. Yes, you can get hot loading and browser-sync playing nicely. Browser-sync has a great feature allowing you to proxy another host. Thank you browser-sync.
You can also split your js concerns while using the webpack dev server which is something that's not immediately apparent on how to achieve. Webpacks messy config system doesn't make much clear so it wasn't until finding a nice split plugin that it worked as I required.
Webpack... I wish I didn't have to use this but it is faster than using browserify to achieve the result I was after with this particular setup. I've wrapped it up in Gulp and used it as minimally as possible.
For testing I started using Mocha and Istanbul for test coverage but found that Istanbul just wasn't working out. After half an hour I got frustrated and dropped it. Five minutes later (mostly waiting for npm install) I had Lab up and running for tests and coverage.
Overall this is a pretty simple albeit more than trivial setup that demonstrates a really fast workflow. Changes to js, jsx and styl files swap out blazingly fast with no page refresh/reload required which is a pretty killer feature while developing.
Oh I forgot to mention it's all done with ES2015 (ES6 whatever) which is quite nice to look at.
$ git clone git@github.com:chasevida/babel-react-hot-loading.git
$ cd babel-react-hot-loading
$ npm install
$ npm start
Testing is pretty straight forward and makes use of Lab... pretty similar to Mocha and Chai for obvious reasons. A few additions to the setup have been made to allow for testing React components.
$ npm test
Yes, I know you can lint using Lab but in the time I had available it was quicker to implement an old setup for linting than resolve a few issues with linting, ES6 and folder structures.
Yes, the code coverage html report is all sorts of funky but I'm pretty sure the good people working on Lab will resolve that someday.
Thanks to all the good people behind these open source projects, you are awesome.