I am trying to integrate noflo ui 'the-graph' with a React based front end. I am trying to wrap demo-simple.html example into a react component as simple-demo.js and thereafter build on top of it.
On building and running I get the following errors:
Uncaught ReferenceError: React is not defined at Object.module.exports.register (bundle.js:42029).......
On looking into bundle.js, I find that the cause is:
TheGraph.SVGImage = React.createFactory( React.createClass({......
my simple-demo.js has just the following code and basic boiler-plate:
import React, {Component} from 'react';
var fbpGraph = require('fbp-graph');
var theGraph = require('the-graph');
Here I have already imported React, but after importing 'the-graph' I get the error. If this import is commented, there is no issue.
It will be of great help if someone can shed insight into what is going wrong. Thanks for you patience and help.
flowhub/the-graph expects a global React variable and It worked out by adding react and hammer in the index.html in the following manner:
<body>
<div class="container"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="app/bundle.js"></script>
</html>
Currently it doesn't work with react 16.0.0 and I needed 15.4.2 to make it work. So in the current form of this library, I believe this is the way to proceed.