petite

React on Rails - The Ultimate React Framework

React on Rails is your way into production-ready React apps. Embracing the core principles of React, React on Rails provides you with all you need to start making you React-powered, full stack JS WebApp, that actually does actual things in actual browsers of actual visitors, served by actual servers crawled by actual spiders. Not your grandma's WebApp.

Installation & Usage

npm install react-rails and start hacking. Clone/fork react-rails-starterkit if you want an opinionated file structure & toolkip.

Check out the Introduction and the Full API Docs for more info.

Core principles

• First-class server-side pre-rendering, even with complex, async data dependencies.
• Fully-integrated flux implementation, including flux over the wire.
• Real-time full-duplex data propagation by default.
• Idiomatic React implementation of all you need for you WebApp: animations, routing, tree transformation, HTTP backend communication, session management, etc, the React Way.

Release notes/news

• 30/9/2014: Should be ready for use, but expect some bugs, still very early release. Feel free to post and issue. Check out react-rails-starterkit.

SHOW ME THE CODE

Animating

Toggles the rotation of an image upon click a button.

var R = require("react-rails");
var styles = { // Styles are automatically processed (vendor-prefixing, etc)
    "left": new R.Style({ transform: "rotate(0deg)" }),
    "right": new R.Style({ transform: "rotate(180deg)" }),
};
 
module.exports = React.createClass({
    mixins: [R.Component.Mixin],
    propTypes: {
        src: React.PropTypes.string.isRequired,
    },
    getInitialState: function() { return { orientation: "left" }; },
    rotate: function(from, to) {
        this.animate("rotate", { // starts an animation.
            from: styles[from],  // the component can be safely unmounted
            to: styles[to],      // during the animation,
            duration: 1000,      // R.Animate handles everything properly.
            easing: "cubic-in-out",
        });
        this.setState({ orientation: to });
    },
    handleClick: function() {
        if(this.state.orientation === "left") {
            this.rotate("left", "right");
        }
        else {
            this.rotate("right", "left");
        }
    },
    render: function() {
        var style = this.isAnimating("rotate") ? this.getAnimatedStyle("rotate") : styles[this.state.orientation];
        return (<div>
            <button onClick={this.handleClick}>Click to rotate</button>
            <img src={this.props.src} style={style} />
        </div>);
    },
});

Basic Flux - Component

Tells a memory dispatcher to roll a die, and continuously update state to reflect its status.

var R = require("react-rails");
 
module.exports = React.createClass({
    mixins: [R.Component.Mixin],
    getFluxStoreSubscriptions: _.constant({ // subscribe to a stored resources and auto-injects
        "memory://diceValue": "diceValue",  // the up-to-date value in state.
    }),
    handleClick: function() {
        this.dispatch("dispatcher://rollTheDice", { from: 0, to: 6 })(this.handleDispatched);
    },
    handleDispatched: R.Async.IfMounted(function(err) { // Will only execute if the component
        R.Debug.dev(function() {                        // is still mounted when invoked
            if(err) { throw err; }
        });
    }),
    render: function() {
        return (<div>
            <span>Current dice value: {this.state.diceValue}</span>
            <button onClick={this.handleClick}>Roll the dice</button>
        </div>);
    },
});

Basic Flux - Backend (with generators)

Dispatches a "/rollTheDice" action.

 
flux.getDispatcher("dispatcher").addActionListener("/rollTheDice", function*(params) {
    R.Debug.dev(function() { // Ignored in production
        assert(params.from && _.isNumber(params.from));
        assert(params.to && _.isNumber(params.to));
    });
    // asynchronously udpate the memory store
    var diceValue = _.random(params.from, params.to);
    yield flux.getStore("memory").set("/diceValue", diceValue);
});

Roadmap

• Release v0.1.0

  • Stabilize the API
  • Document the API
  • Add more tests

• Release v0.2.0

  • Lightweight builds/move plugins out of core