An application framework using functional reactive concepts and virtual-dom
npm install r-js#### 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 (
});
});
`
- npm install r-jsnpm 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.
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