React as common.js modules using System.js

Summary

This is an example of writing ReactJS components as CommonJS modules.

PROS:

• System.js allows for mixing and matching these modules with ES6 and AMD modules.
• This method has an advantage over Browserify in that it does not require a compilation step to use CommonJS modules.
• System.js allows for lazy loading modules and does not require a single compiled app.js style JS file

CONS:

• unlike Browserify System.js cannot load NPM modules directly from node_modules directory structure.

NOTE on Directory structure

• js/lib: holds all of the external JS libraries
• js/package.json: required to install local copy of react-tools for the JSX binary to be used for JSX compilation
• js/init.js: the System.js app loader configuration
• js/app: where the main application JS code lives
• js/react_components: where the original JSX components live in their raw state
• js/app/components: the target directory where JSX components get compiled as raw JS

to compile JSX components

install node modules

cd js;
npm install;

compile

./node_modules/.bin/jsx react_components app/components

to continuously watch for changes and recompile

./node_modules/.bin/jsx -w react_components app/components