A view concept for Functional Reactive Applications. Read the following article for an introduction: Functional Reactive Applications.
R exposes a simple API to give your FRP code a view layer to hook on to.
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.
A component has to return an observable of vritual dom structures.
import {Component, DOM} from 'r-js';
exports default Component(function (props, observables) {
return observables.foo
.map(function (foo) {
return (
<div>
<h1>Hello there {foo}. Message: {props.message}</h1>
</div>
);
});
});Inject observables to map over in your Components. The function has to return a component that will be mounted on document.body.
import {Render, DOM} from 'r-js';
import observables from './observables.js';
import App from './App.js';
Render(observables, function () {
return <App message="Wazup?"/>;
});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.
import {Component, Hook, DOM} from 'r-js';
exports default Component(function (props, observables) {
return observables.foo
.map(function (foo) {
return (
<div>
<h1>Hello there {foo}. Message: {props.message}</h1>
<button
ev-click={Hook(observables.changeFoo, 'push', 'This is the new value')}
>Change</button>
</div>
);
});
});It is highly recommended to use Webpack and babel-loader for JSX and ES6/7 syntax.
npm install r-jsnpm install virtual-dom-loadernpm install babel-loadernpm install webpacknpm install webpack-dev-server
Create a webpack.config.js file in your root folder.
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:
...
"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.
<body>
<script src="bundle.js"></script>
</body>Run your project workflow with npm start.
Please check out react-webpack-cookbook for more info on using webpack.
npm start runs the demo on localhost:8080
- Fork and clone repo
npm installnpm startstarts development flow on localhost:8080npm testrun tests