I've been struggling for a few hours to get react to work with golden layout as per their demo:
http://golden-layout.com/examples/#XdabGJ
I'm creating a document editing app with electron, and trying to use gl to provide virtual views on the document. I want each gl window to host a react component. I've created the following class:
[variable-list.js]
const React = require('react')
const Component = React.Component
class VariableList extends Component {
constructor() {
super()
this.state = { }
}
render() {
console.log('render')
return (
<div className="variable-list">
<h3>Variables</h3>
</div>
);
}
}
module.exports = VariableList;
which I reference from my main script:
const GoldenLayout = require('golden-layout');
const VariableList = require('variable-list')
var config = {
content: [{
type: 'column',
content: [{
type: 'component',
componentName: 'variables'
}]
}]
};
// Setup layout
var layout = new GoldenLayout(config);
layout.registerComponent( 'variables', VariableList );
layout.init();
When I run the code, the gl is created and a window appears, but it contains no elements within it, and the console doesn't contain the expected print.
The examples show the class being created through 'React.createClass', however this function doesn't seem to exist any more, and according to the react docs, 'extends Component' is analogue to it.
How do I get gl to call my render function?