Material - UI and ReactJS working together
<p>Working with ReactJS for the first time and I'm looking for some components I can use in my app. It appears that Material-UI will cover all the bases when it comes to components.</p>

<p>My question is if Material UI is compatible with newer versions of ReactJS</p>

<p>I've been experimenting with a project and I'm trying to include a table.
I've NPM installed material-ui but I am running into trouble when running the code</p>

<p>Here is the code</p>

<pre><code>var React = require('react');
var Table = require('material-ui/lib/table/table');
var TableHeader = require('material-ui/lib/table/table-header');
var TableRow = require('material-ui/lib/table/table-row');
var TableHeaderColumn = require('material-ui/lib/table/table-header-column');
var TableBody = require('material-ui/lib/table/table-body');
var TableRowColumn = require('material-ui/lib/table/table-row-column');




var Home = React.createClass({

render: function() {
    return (
         &lt;Table&gt;
            &lt;TableHeader&gt;
              &lt;TableRow&gt;
                &lt;TableHeaderColumn&gt;ID&lt;/TableHeaderColumn&gt;
                &lt;TableHeaderColumn&gt;Name&lt;/TableHeaderColumn&gt;
                &lt;TableHeaderColumn&gt;Status&lt;/TableHeaderColumn&gt;
              &lt;/TableRow&gt;
            &lt;/TableHeader&gt;
            &lt;TableBody&gt;
              &lt;TableRow&gt;
                &lt;TableRowColumn&gt;1&lt;/TableRowColumn&gt;
                &lt;TableRowColumn&gt;John Smith&lt;/TableRowColumn&gt;
                &lt;TableRowColumn&gt;Employed&lt;/TableRowColumn&gt;
              &lt;/TableRow&gt;
              &lt;TableRow&gt;
                &lt;TableRowColumn&gt;2&lt;/TableRowColumn&gt;
                &lt;TableRowColumn&gt;Randal White&lt;/TableRowColumn&gt;
                &lt;TableRowColumn&gt;Unemployed&lt;/TableRowColumn&gt;
              &lt;/TableRow&gt;
              &lt;TableRow&gt;
                &lt;TableRowColumn&gt;3&lt;/TableRowColumn&gt;
                &lt;TableRowColumn&gt;Stephanie Sanders&lt;/TableRowColumn&gt;
                &lt;TableRowColumn&gt;Employed&lt;/TableRowColumn&gt;
              &lt;/TableRow&gt;
              &lt;TableRow&gt;
                &lt;TableRowColumn&gt;4&lt;/TableRowColumn&gt;
                &lt;TableRowColumn&gt;Steve Brown&lt;/TableRowColumn&gt;
                &lt;TableRowColumn&gt;Employed&lt;/TableRowColumn&gt;
              &lt;/TableRow&gt;
            &lt;/TableBody&gt;
          &lt;/Table&gt;
    );
}

});

module.exports = Home;
</code></pre>

<p>I get 24 warnings like this when I run the code</p>

<p>"React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of <code>Home</code>"</p>

<p>and the Error</p>

<p>"Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `Home"</p>

<p>Any guidance would be appreciated.</p>

<p><strong>FIXED CODE</strong></p>

<pre><code>var React = require('react');
var MUI = require('material-ui').default;
var Table = MUI.Table;
var TableHeader = MUI.TableHeader;
var TableRow = MUI.TableRow;
var TableHeaderColumn = MUI.TableHeaderColumn;
var TableBody = MUI.TableBody;
var TableRowColumn = MUI.TableRowColumn;




var Home = React.createClass({

render: function() {
    return (
         &lt;Table&gt;
            &lt;TableHeader&gt;
              &lt;TableRow&gt;
                &lt;TableHeaderColumn&gt;ID&lt;/TableHeaderColumn&gt;
                &lt;TableHeaderColumn&gt;Name&lt;/TableHeaderColumn&gt;
                &lt;TableHeaderColumn&gt;Status&lt;/TableHeaderColumn&gt;
              &lt;/TableRow&gt;
            &lt;/TableHeader&gt;
            &lt;TableBody&gt;
              &lt;TableRow&gt;
                &lt;TableRowColumn&gt;1&lt;/TableRowColumn&gt;
                &lt;TableRowColumn&gt;John Smith&lt;/TableRowColumn&gt;
                &lt;TableRowColumn&gt;Employed&lt;/TableRowColumn&gt;
              &lt;/TableRow&gt;
              &lt;TableRow&gt;
                &lt;TableRowColumn&gt;2&lt;/TableRowColumn&gt;
                &lt;TableRowColumn&gt;Randal White&lt;/TableRowColumn&gt;
                &lt;TableRowColumn&gt;Unemployed&lt;/TableRowColumn&gt;
              &lt;/TableRow&gt;
              &lt;TableRow&gt;
                &lt;TableRowColumn&gt;3&lt;/TableRowColumn&gt;
                &lt;TableRowColumn&gt;Stephanie Sanders&lt;/TableRowColumn&gt;
                &lt;TableRowColumn&gt;Employed&lt;/TableRowColumn&gt;
              &lt;/TableRow&gt;
              &lt;TableRow&gt;
                &lt;TableRowColumn&gt;4&lt;/TableRowColumn&gt;
                &lt;TableRowColumn&gt;Steve Brown&lt;/TableRowColumn&gt;
                &lt;TableRowColumn&gt;Employed&lt;/TableRowColumn&gt;
              &lt;/TableRow&gt;
            &lt;/TableBody&gt;
          &lt;/Table&gt;
    );
}

});

module.exports = Home;
</code></pre>