1

I am new to React.

I would like to try and incorporate the 'ReactGridLayout' module found here: https://github.com/STRML/react-grid-layout

in a Mean.JS v0.4 project I am working on.

I started off by adding ngReact to my project and adding the assets:

    // application/config/assets/default.js
    module.exports = {
      client: {
        lib: {
          css: [
            // ...
            'public/lib/react-grid-layout/css/styles.css',
            'public/lib/react-resizable/css/styles.css'           
          ],
          js: [
            // ...
            'public/lib/react/react.js',
            'public/lib/react/react-dom.js',
            'public/lib/ngReact/ngReact.min.js',
            'public/lib/react-grid-layout/react-grid-layout.min.js',
          ]
        }
      }
    };  

And then in my model's module.config file:

    angular
    .module('model', ['react'])

In my Client Controller I've added the following:

    // model.client.controller.js

    var MyFirstGrid = React.createClass({
      displayName: 'MyFirstGrid',

      render: function render() {
        // layout is an array of objects, see the demo for more complete usage
        var layout = [{ i: 'a', x: 0, y: 0, w: 1, h: 2, static: true }, { i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 }, { i: 'c', x: 4, y: 0, w: 1, h: 2 }];
        return React.createElement(
          ReactGridLayout,
          { className: 'layout', layout: layout, cols: 12, rowHeight: 30, width: 1200 },
          React.createElement(
            'div',
            { key: 'a' },
            'a'
          ),
          React.createElement(
            'div',
            { key: 'b' },
            'b'
          ),
          React.createElement(
            'div',
            { key: 'c' },
            'c'
          )
        );
      }
    });

    app.value('MyFirstGrid', MyFirstGrid);

and then in my view I have added:

    // view-model.client.view.html

    <react-component name="MyFirstGrid" props="layout" watch-depth="reference"/>

However, on page load I get:

    **ReferenceError: ReactGridLayout is not defined**

This isn't entirely unexpected, the documentation for STRML's ReactGridLayout includes a:

    var ReactGridLayout = require('react-grid-layout');

However, because I am trying to include this in my clientside controller I can't use "requires", which is why I've tried to add it as an 'asset'.

How can I get around this?

Thanks!

Dave Rich
  • 319
  • 3
  • 15
  • I'm curious about the same.. curious where you landed with this? – hulkish Jul 21 '16 at 00:48
  • For this project I ended up moving away from react, and instead using "angular-gridster", see: https://github.com/ManifestWebDesign/angular-gridster – Dave Rich Jul 21 '16 at 18:27

0 Answers0