Example project

[jordwalke]

Hi @ericclemmons,

Would you be able to provide an example project that uses both grunt-react and browserify together?

[ericclemmons]

Absolutely! I'm using them right now with GREAT SUCCESS! :)

Give me a day or two to move it out of my company's private repo into something... a little more public.

[jordwalke]

Awesome. I can't wait to try it out.

[jordwalke]

I have some time to play around with this today. Could you start by just giving a gist (if that's quicker)?

[ericclemmons]

Oh, I'm sorry! I recently inherited 15 new developers, so I'm sidetracked a bit :)

The README has a decent explanation in the "recommended" block. Here's a synopsis of how you'd get going:

1. npm install --save grunt-react browserify

2. Update your Gruntfile with the grunt.loadNpmTasks('grunt-browserify') as described in the README, and the following block:

browserify:     {
  options:      {
    transform:  [ require('grunt-react').browserify ]
  },
  app:          {
    src:        'path/to/source/main.js',
    dest:       'path/to/target/output.js'
  }
}

3. Update your code (e.g. main.js) to look like a nodejs module. Here's mine:

var App = require('./app.jsx');

window.app = new App();
Backbone.history.start();

4. Update your JS files to use require and module.exports. Here's my app.jsx as an example:

var App = Backbone.Router.extend({
  routes: { ... }
});

module.exports = App;

5. Include <script src="path/to/target/output.js"></script> in your index.html, as well as any dependencies before it (like Backbone, jQuery, etc.)

That's pretty much it. The most work is really updating the JS files to use CommonJS-like dependency management.

I'll be updating Genesis Skeleton with a feature/react branch soon, since this is a pretty darn nice way of building an app!

[jordwalke]

I took a look at genesis. Seems like a pretty cool project. I was hoping someone would make a complete app setup with React like that!

[ericclemmons]

Linked the project I'll be updating with a react example...

[jordwalke]

Nice!