Rosmaro for React
$ npm install --save rosmaro rosmaro-redux redux-saga redux rosmaro-react $ mkdir -p src/bindings && touch src/graph.json
The index.js file
// IMPORTING DEPENDENCIES:// This is the component factory function exported by this package.;// The content of this file should be generated using the Rosmaro visual editor (). For more information on drawing graphs please visit;// It's convenient to generate the bindings/index.js file using;// We need Rosmaro and React.;;;// Redux itself.;// This will gives us a Rosmaro driven reducer and integrate it with Redux Saga.;// We need to provide the Redux state.;// Side-effects are handled by Redux Saga.;// For more information on Redux Saga please refer to the official documentation at;// Writing handlers is easier with;// SETTING THINGS UP:// Makes writing handlers convenient.const makeHandler = ;// Rosmaro bindings are built with the handler factory defined above.const bindings = ;// This is the Rosmaro model.const model = ;// The reducer is based on the Rosmaro model.const rootReducer = ;// For more information on connecting Rosmaro and Redux please checkconst sagaMiddleware = ;const store =;sagaMiddleware;// This component is driven by the `model` Rosmaro model.// Its state lives in the provided Redux store.// The selector function defines the exact location of the Rosmaro model state.const App =;// Rendering the component.ReactDOM;
The most important thing is that every handler must react to the
RENDER action. It is supposed to return a React component.
How the bindings are built doesn't really matter as long as they are correctly interpreted by Rosmaro. However, it's highly recommended to use rosmaro-binding-utils and rosmaro-tools most of the time, as they make most of the things a lot easier and provide a directory structure.
Below is an example of a simple On/Off component.
We're going to focus on the
src/bindings directory we created at the very beginning.
Let's give it the following structure:
$ tree -U . └── main ├── index.js ├── On │ └── index.js └── Off └── index.js
src/bindings/main/index.js file contains the
main node binding. We don't need anything fancy here, so it may use the default handler provided by rosmaro-binding-utils:
// src/bindings/main/index.js;handler: defaultHandler;
src/bindings/main/On/index.js file is the
main:On node binding. It's a simple button which when clicked makes the node follow the
// src/bindings/main/On/index.js;;// This component is connected to the redux store,// so it can dispatch actions.const View =<buttonid="on-button"onClick=>on</button>;// The makeHandler function is passed to the makeBindings function// in the src/index.js file.handler:;
src/bindings/main/Off/index.js file is a very similar button:
// src/bindings/main/Off/index.js;;const View =<buttonid="off-button"onClick=>off</button>;handler:;
src/bindings/index.js file, which is imported in the
src/index.js file may be generated:
$ cd src/bindings $ npx rosmaro-tools bindings:build . Generated index.js!
The whole code of this example can be found in the