This is a template repository for wrapping a react bundle into a webgme visualizer. The basic outline is the following:
- The webgme visualizer panel is defined in WebGMEReactVizPanel.js.
- The visualizer panel loads the reactViz.bundle.js which is the react app from src wrapped as a requirejs module and constructor like function that provides the id of the DOM-element where react app should attach.
- The webgme (backbone) state is propagated via mediator globally available. The react app can also trigger state events (as shown with setActiveNode/Selection). In addition panel-events such as readOnly, isActivePanel and destroy are propagated.
- The state in the react component is handled by redux and provided to the component ChildrenList.jsx via a wrapper-container ChildrenList.jsx.
The entry point for the react application is index.js and this example also shows how to bundle css with webpack.
To rebuild the reactViz.bundle.js/css run npm run webpack.
First, install the react-viz following:
Second, start mongodb locally by running the mongod executable in your mongodb installation (you may need to create a data directory or set --dbpath).
Then, run webgme start from the project root to start . Finally, navigate to http://localhost:8888 to start using react-viz!