I have Angular project that uses Angular material. Because of performance issues I decided to integrate React inside my project by using ngReact directive.
So everything works properly. BTW I installed react with bower and not npm.
So now I'm trying to integrate React Material UI to be able to use Material components like drop-down-menu inside React instead md-select in Angular material.
Today I compile react jsx files with jsx command, like:
jsx -w -x jsx app/scripts/components/ app/scripts/components/build/
So far so good.
React Material UI doesn't have bower but npm. So I installed material-ui so what next?
How can I use react components? I need some js file to include it to my index.html.
When I try to include node_modules/material-ui/index.js I get an error:
index.js:3 Uncaught ReferenceError: exports is not defined
This is a index.js content:
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ToolbarTitle = exports.ToolbarSeparator = exports.ToolbarGroup = exports.Toolbar = exports.Toggle = exports.TimePicker = exports.TextField = exports.TableRowColumn = exports.TableRow = exports.TableHeaderColumn = exports.TableHeader = exports.TableFooter = exports.TableBody = exports.Table = exports.Tab = exports.Tabs = exports.Snackbar = exports.Stepper = exports.StepLabel = exports.StepContent = exports.StepButton = exports.Step = exports.SvgIcon = exports.Subheader = exports.Slider = exports.SelectField = exports.RefreshIndicator = exports.RaisedButton = exports.RadioButtonGroup = exports.RadioButton = exports.Popover = exports.Paper = exports.MenuItem = exports.Menu = exports.MakeSelectable = exports.ListItem = exports.List = exports.LinearProgress = exports.IconMenu = exports.IconButton = exports.GridTile = exports.GridList = exports.FontIcon = exports.FloatingActionButton = exports.FlatButton = exports.DropDownMenu = exports.Drawer = exports.Divider = exports.Dialog = exports.DatePicker = exports.CircularProgress = exports.Checkbox = exports.CardText = exports.CardTitle = exports.CardMedia = exports.CardHeader = exports.CardActions = exports.Card = exports.Badge = exports.Avatar = exports.AutoComplete = exports.AppBar = undefined;
var _AppBar2 = require('./AppBar');
var _AppBar3 = _interopRequireDefault(_AppBar2);
// ....
var _ToolbarTitle3 = _interopRequireDefault(_ToolbarTitle2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.AppBar = _AppBar3.default;
exports.AutoComplete = _AutoComplete3.default;
exports.Avatar = _Avatar3.default;
exports.Badge = _Badge3.default;
//....
exports.ToolbarSeparator = _ToolbarSeparator3.default;
exports.ToolbarTitle = _ToolbarTitle3.default;
Did anyone solve/use this approach?
