React as common.js modules using System.js
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.
- 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
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