I started learning React a few weeks ago. I’m really enjoying it, though I’ve barely scratched the surface.

Started using the JSXTransformer as per the Getting Started docs. This involved adding the React and JSXTransformer javascript files to the page, and then one for each JSX component. This got tedious having to add a script tag for each component. And it’s not anything like what you would do for an actual production site.

After some dabbling I worked out a structure and build system that I liked using NPM & Grunt and built a boilerplate project that I could clone for different experiments rather than creating it from scratch each time.

The Github repo is: https://github.com/dmison/My-Little-React-App.

To use it you need NPM & Grunt installed. Clone the repo, do npm install, bower install to set it up. Then run grunt start start the dev build.

It installs React using NPM, and uses Browserify with Reactify to compile the JSX down to a single JS file (app.js) that’s included in index.html. I also include Bootstrap using Bower as well.

The app starts at app.jsx which starts the app up by requireing React and the LittleApp component and rendering LittleApp into the page.

var React = require('react');
var LittleApp = require('./LittleApp.jsx');

var data = "My Little React App";

React.render(<LittleApp data={data} />, document.getElementById('app'));

LittleApp is extremely basic, just a ‘hello world’.

(function(){
  var React = require('react');

  var LittleApp = React.createClass({

    render: function(){
      return (
        <div>
          <h2>{this.props.data}</h2>
        </div>
      )
    }

  });

  module.exports = LittleApp;

})();

As I experiment with different things I copy this project, create new components as CommonJS modules and put them in the components directory. Then I update LittleApp.jsx to require and use the new components as necessary.

The Gruntfile has two targets, the default and dist.

The default target is what I use when developing. Just run grunt and builds the app with source maps, starts a web server, and opens your default browser pointing at index.html (grunt-contrib-connect). It then watches the files and rebuilds it when files change and forces a browser refresh (grunt-contrib-watch).

The dist target is what you use to build the app for production deployment. It just does the build step but doesn’t include the source maps.

Including testing is probably the next thing I should look at.

I should also investigate Webpack as an alternative to the Grunt build because React Hot Loader would be pretty sweet.