Material UI Base Fiddle

by Nofiden Noble

HTML

<script src="https://fb.me/react-with-addons-15.2.1.js"></script>
<script src="https://fb.me/react-dom-15.2.1.js"></script>
<script src="https://rawgit.com/nathanmarks/3f5196f5973e3ff7807f2bab4e603a37/raw/f409f3bf5902c211b358a3ebe7b6cd366da551e8/mui-umd.js"></script>
<div id="container">
  
</div>

CSS

#container {
  height: 80vh;
  width: 80vw;
  margin: 10vh 10vw;
  background: teal;
}
.button {
  position: absolute;
  top: 0;
  right: 0;
}

Babel + JSX

const { RaisedButton, Drawer, MuiThemeProvider, getMuiTheme } = MaterialUI;

 class AppDrawerExample extends React.Component {

  state = {
    open: false
  }
  
  handleToggle = () => this.setState({open: !this.state.open});

  render() {
    return (
      <div>
        <RaisedButton
          className='button'
          label="Toggle Drawer"
          onClick={this.handleToggle}
        />
        <Drawer open={this.state.open}>

        </Drawer>
      </div>
    );
  }

}

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <AppDrawerExample />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('container')
);