react-builder

A build tool for constructing simple apps composed (entirely) of React components. It reads the jsx source, transforms to javascript and renders a html page with the js source packaged with browserify. The packaged javascript is compressed by UglifyJS2. Will even watch the source files for changes and re-render pages as necessary. Magic.

Somewhat similar to (and somewhat inspired by) react-page.

Installation

Use npm, duh:

npm install -g react-builder

This registers the react-builder command.

Usage

We assume that the project directory for mysite is laid out:

mysite/assets        => static stuff: css, images, fonts...
mysite/src           => shared components
mysite/src/pages     => the actual pages
mysite/srv           => the output ready to be served
mysite/package.json  => npm package file to declare dependencies

A template for this structure can be seen in the awesomely named react-builder-template repository. This also includes an example core component for the page boilerplate along with placeholder index and about pages.

We can then run react-builder in the mysite directory. This will:

1. Apply the jsx transform to all files under the src directory.
2. Render html from each page in the src/pages directory.
3. Browserify the js used to render each page.
4. Uglify this js and insert it into the html.
5. Output the finished page into the srv directory.
6. Watch for changes in the source files and update as required.

Dependencies

Javascript dependencies can be installed using npm. They can be accessed using the magic of browserify and will be bundled along with the rest of the components.

A version of React (hacked to be usable by browserify) can be found here: react-hack. Hopefully they will soon release a build that works sensibly with browserify anyway and this won't be needed...