andreypopp / react-app

*DEPRECATED* Rapid appliaction development with React

react-app

DEPRECATION WARNING: This is not maintained anymore, please use react-quickstart instead.

See react-app-express or react-app-demo for the examples of using react-app with Express app and standalone.

A set of conveniences for React to develop applications which

• use HTML5 History API to navigate between pages
• can pre-render UI on a server to reduce "time to first tweet"
• use CommonJS to manage code (js/coffee/...) and stylesheet (css/stylus/less/sass/...) dependencies in the browser

react-app is designed to be scalable from basic applications needs to large-scale application development where you need high degree of freedom and want to make your own choices. ReactApp is neither a framework nor a library, it's is just a set of conveniences which you can accepts, reject or even replace by following your own decisions.

Installation

You need both react-app and react packages to be installed, the best (and the only) way is to use npm:

% npm install react react-app

If you want to experiment with it.

Basic usage

Define your application in ui.jsx:

var React = require('react');
var ReactApp = require('react-app');

var Main = React.createClass({
  render: function() {
    return (
      <div className="Main">
        Hello!
        <a href="/about">About</a>
      </div>
    )
  }
});

var About = React.createClass({

  fetchData: function(req, cb) {
    console.log('fetching data...');
    cb(null, {msg: 'Hello'});
  },

  render: function() {
    return (
      <div className="About">
        About
        <p>data: {this.props.request.data}</p>
        <a href="/">index</a>
      </div>
    )
  }
});

module.exports = ReactApp({
  routes: {
    '/': Main,
    '/about': About
  },

  onClick: function(e) {
    if (e.target.tagName === 'A' && e.target.attributes.href) {
      e.preventDefault();
      this.navigate(e.target.attributes.href.value);
    }
  },

  componentDidMount: function() {
    window.addEventListener('click', this.onClick);
  },

  componentWillUnmount: function() {
    window.removeEventListener('click', this.onClick);
  }
});

then you can serve your app using react-app command line utility:

% ./node_modules/.bin/react-app --render --debug ./ui.jsx

Note the --debug flag which will result in watching your code for changes and generating source maps for a bundle. The --render flag instructs react-app to pre-render UI on server.

For other options see react-app --help:

react-app [options] <module id>

Options:
  -h, --help       Show this message and exit
  -v, --version    Show version
  -q, --quiet      Operate in quiet mode          [default: false]
  --colors         Color logging output           [default: true]
  -d, --debug      Run in debug mode              [default: false]
  -p, --port       Port to use                    [default: 3000]
  --host           Host to use                    [default: "localhost"]
  -a, --assets     Serve assets from a directory
  -s, --styles     Serve styles
  --render         Render UI on server            [default: false]
  -t, --transform  Apply source transform
  --css-transform  Apply CSS source transform

Modularity

react-app is just a thin wrapper on top of react-app-controller and react-app-middleware packages. Both of them can be used separately.