R

A view concept for Functional Reactive Applications. Read the following article for an introduction: Functional Reactive Applications.

$3

- BaconJS
- RxJS

$3

R exposes a simple API to give your FRP code a view layer to hook on to.

#### DOM
DOM has to be available in the scope of the module. It is used by the JSX transpiler. So, whenever you write JSX, import the DOM function.

#### Component
A component has to return an observable of vritual dom structures.
``js
import {Component, DOM} from 'r-js';

exports default Component(function (props, observables) {

return observables.foo
.map(function (foo) {

return (


);

});

});
`

#### Render
Inject observables to map over in your Components. The function has to return a component that will be mounted on document.body.
`js
import {Render, DOM} from 'r-js';
import observables from './observables.js';
import App from './App.js';

Render(observables, function () {
return ;
});

`

#### Hook
Hook allows you to easily push values to a Bus (BaconJS) using push or BehaviorSubject (RxJS) using onNext. You can also bind values to the hook.
`js
import {Component, Hook, DOM} from 'r-js';

exports default Component(function (props, observables) {

return observables.foo
.map(function (foo) {

return (


);

});

});
`

$3

It is highly recommended to use Webpack and babel-loader for JSX and ES6/7 syntax.

- npm install r-js
- npm install virtual-dom-loader
- npm install babel-loader
- npm install webpack
- npm install webpack-dev-server

Create a webpack.config.js file in your root folder.

`js
var path = require('path');
var nodeModulesPath = path.resolve(__dirname, 'node_modules');
var appPath = path.resolve(__dirname, 'app');
var buildPath = path.resolve(__dirname, 'build');

var config = {
entry: path.resolve(appPath, 'main.js'),
output: {
path: buildPath,
filename: 'bundle.js',
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel!virtual-dom?jsx=DOM',
exclude: [nodeModulesPath]
}]
}
};

module.exports = config;
`

And add a script in your package.json file:
`js
...
"scripts": {
"start": "webpack-dev-server --devtool eval --progress --colors --content-base build/",
}
...
`

And last but not least, you need an html file in your build folder. build/index.html.

`html



`

Run your project workflow with npm start.

Please check out react-webpack-cookbook for more info on using webpack.

$3


npm start runs the demo on localhost:8080

$3

- Fork and clone repo
- npm install
- npm start starts development flow on localhost:8080
- npm test` run tests