Package Exports

react-app

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-app) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ReactApp

Convenience 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

Installation

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

% npm install react-app react-tools

Usage

ReactApp 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 your following your decisions.

Basic usage

The next option is to bootstrap your application with your own code:

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

var Page = React.createClass({
  render: function() {
    return (
      <html>
        <head>
          <title>{this.props.title}</title>
        </head>
        <body>
          {this.props.children}
        </body>
      </html>
    );
  }
});

module.exports = ReactApp.createApp({
  routes: {
    '/': ReactApp.createPage({
      render: function() {
        return (
          <Page title={this.props.options.appName}>
            <h1>Main Page</h1>
          </Page>
        );
      }
    }),

    '/about': './pages/about.jsx',

    '/users/:username': ReactApp.createPage({
      render: function() {
        return (
          <Page title={this.props.request.params.username}>
            <h1>@{this.props.request.params.username</h1>
          </Page>
        );
      }
    })
  },

  start: function() {
    this.setOptions({
      appName: 'My App'
    });
  }
});

Now you can produce code for your application with the following command:

% react-app bundle ./index.jsx > ./index.bundle.js

And create a host page:

<!doctype html>
<script src="index.bundle.js"></script>
<script>
  app = require('./index');
  app.start();
</script>

Or serve your app directly:

% react-app serve ./index.jsx

Node.js middleware

ReactApp provides with a Node.js middleware which helps you serving your app to a browser with pre-rendered UI and bundled assets:

var serveApp = require('react-app/middleware');
var app = serveApp(
  './index.jsx', {
    options: {
      appName: 'My App',
      debug: true
    }
  });
app.listen(3000);

Alternatively you can use separate middleware for assets and UI pre-rendering.

var serveAssets = require('react-app/middleware/assets'),
    serveUI = require('react-app/middleware/ui'),
    createBundler = require('react-app/bundler'),
    express = require('express');

var bundler = createBundler('./index.jsx', {debug: true}),
    app = express();

app.use(serveAssets(bundler));
app.use(serveUI(bundler));
app.listen(3000);

Command line interface reference

Help is accessible via react-app --help:

% react-app --help

Options:
  -h, --help          Show this message and exit
  --verbose           Operate in verbose mode        [default: false]
  -q, --quiet         Operate in quiet mode          [default: false]
  --colors            Color logging output           [default: true]
  -v, --version       Show version
  -w, --watch         Watch sources for changes      [default: false]
  -d, --debug         Run in debug mode              [default: false]
  -p, --port          Port to use                    [default: 3000]
  --host              Host to use                    [default: "localhost"]
  --render            Render UI on server            [default: false]
  -t, --transform     Apply source transform
  --global-transform  Apply global source transform
  -o, --output        Output directory for bundle
  --css               Bundle only CSS dependencies   [default: false]
  --js                Bundle only JS dependencies    [default: false]