Show HN: Essential React, a minimal skeleton for building React apps using ES6

:thumbsup: to this sentiment. Whenever I see a "skeleton" starter project that includes tooling that could easily be added at a later date, I usually close the tab.

I think people forget that skeleton projects need to serve an educational purpose to newcomers. Each additional framework/tool that you throw into the mix compromises the skeleton's ability to do that.

- https://github.com/RickWong/react-isomorphic-starterkit

The starterkit's focused on the build tools and overall ease-of-use. You can get started in less than 5 minutes. The included example showcases how the server & client work together elegantly to produce the page. The goal of the starterkit is to enhance productivity so there's one single cli command to watch and rebuild both the server with auto-reloads, and client with hot (instant) code updates. Everything happens automatically on-save.

Check it out, it just works. I'm looking for feedback.

It also gives you inline styles, webpack, etc.

For example, I'd avoid having a (somewhat) verbose plugin dependency to shim `console.log` - it's very easy to avoid hitting that incompatibility in most development. Similar argument against including es5-shim - it's super easy to add that if/when you need it, but it's orthogonal to building a react application.

Also, I'd be wary of incorporating Radium - it will narrow the audience because it brings another set of dev requirements., and it's really not Essential to building a react app, it's just a nice-to-have if it fits your dev style.

Will definitely be interested in trying this out next time I'm playing with React, though - thanks for sharing it!

In my company we use Staticr [1], a way to express generated asset bundles (Browserify, SASS or anything else) using JS.

You basically declare the endpoints; e.g.:

    var endpoints = {
      "/js/app.js": function() {
        return browserify("app.js", {...})
          .transform(babelify())
          .bundle();
      },
      "/css/app.css":  // ... similar with node-sass
    };
         

    if (process.env.NODE_ENV === 'development') {
      var serve = require('staticr/serve');
      app.use(serve(endpoints));
    }

Then, in production, you simply include the following as part of your deployment script:

    staticr endpoints.js public/

Of course, Webpack gives you a more extensive toolset, but Staticr is a lot simpler.

I'm curious, do you need es5-shim when you have Babel (ie., "babel/polyfill") which uses core.js, which I believe installs most of what is needed? Actually Babel only requires "core.js/shim"; for ES5 you might need to require "core-js/es5". But it would probably be better to use one polyfill library instead of several.

[1] https://github.com/bjoerge/staticr