react-rails

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.

``js
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 (

);
},
});
`

#### Basic Flux - Component

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

`js
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 (

Current dice value: {this.state.diceValue}
Roll the dice

);
},
});
`

#### Basic Flux - Backend (with generators)

Dispatches a "/rollTheDice" action.

`js

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