Application with MUI

App-MUI.jsx

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import AppBar from 'material-ui/AppBar';
import AutoComplete from 'material-ui/AutoComplete';
import Avatar from 'material-ui/Avatar';
import RaisedButton from 'material-ui/RaisedButton';
import Chip from 'material-ui/Chip';
import DatePicker from 'material-ui/DatePicker';
import Dialog from 'material-ui/Dialog';
import Drawer from 'material-ui/Drawer';

const createArray = () => {
  const myArr = [];
  for (let i = 0; i < 100; i++) {
    myArr.push(i);
  }
  return myArr;
};

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = { drawerOpen: false };
  }
  handleToggleDrawer = () => this.setState({ drawerOpen: !this.state.drawerOpen });

  renderMaterial() {
    const myArr = createArray();
    return myArr.map((index) =>
      (<div key={index}>
        <AppBar
          title="Title"
          iconClassNameRight="muidocs-icon-navigation-expand-more"
        />
        <AutoComplete
          hintText="Type data"
          dataSource={['data', 'dataSource', 'dataSource text']}
        />
        <Avatar size={40} />
        <RaisedButton label="Open Drawer" primary onClick={this.handleToggleDrawer} />
        <Chip>Chip Lorem Ipsum</Chip>
        <DatePicker hintText="Landscape Dialog" mode="landscape" />
        <Dialog
          title="Dialog With Actions"
          modal={false}
          open={false}
        >
          The actions in this window were passed in as an array of React objects.
        </Dialog>
        <Drawer open={this.state.drawerOpen}>
          <RaisedButton label="Close Drawer" primary onClick={this.handleToggleDrawer} />
        </Drawer>
      </div>)
    );
  }

  render() {
    return (
      <div className="home">
        <MuiThemeProvider>
          <div>{this.renderMaterial()}</div>
        </MuiThemeProvider>
      </div>
    );
  }
}

export default Home;

App-RT.jsx

import React, { Component } from 'react';

import AppBar from 'react-toolbox/lib/app_bar';
import Autocomplete from 'react-toolbox/lib/autocomplete';
import Avatar from 'react-toolbox/lib/avatar';
import { Button } from 'react-toolbox/lib/button';
import Chip from 'react-toolbox/lib/chip';
import DatePicker from 'react-toolbox/lib/date_picker';
import Dialog from 'react-toolbox/lib/dialog';
import Drawer from 'react-toolbox/lib/drawer';

const createArray = () => {
  const myArr = [];
  for (let i = 0; i < 100; i++) {
    myArr.push(i);
  }
  return myArr;
};

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = { drawerOpen: false };
  }
  handleToggleDrawer = () => this.setState({ drawerOpen: !this.state.drawerOpen });

  renderMaterial() {
    const myArr = createArray();
    return myArr.map((index) =>
      (<div key={index}>
        <AppBar
          title="Title"
          className={'purpleAppBar'}
        />
        <Autocomplete
          label="Type data"
          direction="down"
          selectedPosition="above"
          source={['data', 'dataSource', 'dataSource text']}
        />
        <Avatar />
        <Button label="Open Drawer" raised primary onClick={this.handleToggleDrawer} />
        <Chip>Chip Lorem Ipsum</Chip>
        <DatePicker label="Landscape Dialog" />
        <Dialog
          title="Dialog With Actions"
          active={false}
        >
          The actions in this window were passed in as an array of React objects.
        </Dialog>
        <Drawer active={this.state.drawerOpen}>
          <Button label="Close Drawer" raised primary onClick={this.handleToggleDrawer} />
        </Drawer>
      </div>)
    );
  }

  render() {
    return (
      <div className="home">
        <div>
          {this.renderMaterial()}
        </div>
      </div>
    );
  }
}

export default Home;