Skip to content

Instantly share code, notes, and snippets.

@wschenk
wschenk / App.js
Last active December 5, 2017 20:31
basic react-router-dom example
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Route,
Link,
Switch
} from 'react-router-dom';
const Nav = () => (
<ul>
@wschenk
wschenk / App.js
Created December 4, 2017 18:46
material-ui with themes
import React, { Component } from 'react';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import { withStyles } from 'material-ui/styles';
import Drawer from './drawer'
import Navbar from './navbar'
import Login from './login'
import Feed from './feed_basic'
import purple from 'material-ui/colors/purple';
import green from 'material-ui/colors/green';
@wschenk
wschenk / App.js
Created December 1, 2017 12:15
material-ui example
import React, { Component } from 'react';
import { withStyles } from 'material-ui/styles';
import Drawer from './drawer'
import Navbar from './navbar'
import Login from './login'
import Feed from './feed_basic'
const drawerWidth = 216;
const styles = theme => ({
@wschenk
wschenk / feed_basic.js
Last active December 4, 2017 19:28
material-ui example feed
import React, {Component} from 'react'
import { withStyles } from 'material-ui/styles'
import Paper from 'material-ui/Paper'
import Button from 'material-ui/Button'
const styles = theme => ({
feed: {
width: '100%',
display: 'flex',
flexDirection: 'column',
@wschenk
wschenk / login.js
Created November 30, 2017 22:55
material-ui example login form
import React, {Component} from 'react';
import Button from 'material-ui/Button';
import TextField from 'material-ui/TextField';
import Dialog, {
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
withMobileDialog
} from 'material-ui/Dialog';
@wschenk
wschenk / drawer.js
Last active November 30, 2017 22:40
material-ui drawer
import React, {Component} from 'react'
import Drawer from 'material-ui/Drawer';
import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
import Divider from 'material-ui/Divider';
import InboxIcon from 'material-ui-icons/Inbox';
class MyDrawer extends Component {
render() {
return (
<Drawer
@wschenk
wschenk / navbar.js
Created November 29, 2017 19:52
create-react-app material-ui navbar example
import React, {Component} from 'react'
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu';
import AccountCircle from 'material-ui-icons/AccountCircle';
@wschenk
wschenk / index.js
Last active November 30, 2017 21:28
material-ui fonts example
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import WebFont from 'webfontloader'
WebFont.load({
google: {
families: ['Roboto:300,500,700']
@wschenk
wschenk / feed_full.js
Created November 28, 2017 21:59
create-react-app rmwc demo
import React, {Component} from 'react'
import {Button, Elevation} from 'rmwc'
import Helmet from 'react-helmet'
class FeedItem extends Component {
state = {height: 4}
click = () => { this.props.theme( this.props.primary, this.props.secondary ) }
render() {
@wschenk
wschenk / feed_basic.js
Created November 28, 2017 21:46
create-react-app rmwc example
import React, {Component} from 'react'
import {Button, Elevation} from 'rmwc'
class FeedItem extends Component {
state = {height: 4}
render() {
return (
<Elevation
z={this.state.height}