This was written 2 years ago when I didn't use ES6 React. I'd be happy to share anything else you see at https://app.pub.center.

Authenticator.js

// "Authenticator" is the state manager for "Login.js" and "Register.js"
//   (see below for the files)

import React from 'react'
import Router from 'react-router-component'
import MUIThemeable from 'material-ui/styles/muiThemeable';
const Link = Router.Link

import H1 from './H1'
import Container from './Container'
import Login from './Login'
import Register from './Register'


module.exports = MUIThemeable()(React.createClass({
  propTypes: {
    jwt: React.PropTypes.string,
    user: React.PropTypes.object,
    onJwt: React.PropTypes.func.isRequired,
    onUser: React.PropTypes.func.isRequired
  },
  getInitialState: function() {
    return {modalVisible: false, loginOrRegisterMode: 'login',}
  },
  render: function() {
    return (
      <Container>
        {this.state.loginOrRegisterMode === 'login'
          ? <Login onJwt={this.props.onJwt} onUser={this.props.onUser} toggleSigninMode={this.toggleSigninMode}/>
          : <Register onJwt={this.props.onJwt} onUser={this.props.onUser} toggleSigninMode={this.toggleSigninMode}/>
        }
      </Container>
    )
  },
  componentWillUpdate: function(newProps, newState) {

    if (newProps.jwt && newProps.user) {
      window.location = '/user'
    }
  },
  toggleSigninMode: function() {

    if (this.state.loginOrRegisterMode === 'login') {
      return this.setState({loginOrRegisterMode: 'register'})
    }

    return this.setState({loginOrRegisterMode: 'login'})
  },
}))

Home.js

// This is the landing page for https://app.pub.center
//  I'm a huge fan of using inline styles. I realize that this
//    is pretty ghetto how it was written... I just like the fact
//      that I can just open 1 file for each component and that
//        I don't have think about writing "classNames" at all

import React from 'react'
import Router from 'react-router-component'
import Color from 'color'
import Styled from 'styled-components'
import MUIThemeable from 'material-ui/styles/muiThemeable'
const Link = Router.Link

import heroGraphicLarge from '../images/orb.png'
import heroGraphicSmall from '../images/orb-small.png'
import CallToAction from './CallToAction'
import FactsBar from './FactsBar'
import FeatureList from './FeatureList'


module.exports = MUIThemeable()(React.createClass({
  propTypes: {
    width: React.PropTypes.number,
    height: React.PropTypes.number
  },
  getInitialState: function() {
    return {modalVisible: false}
  },
  render: function() {
    return (
      <div style={this.styleA()}>

        {/* HERO */}
        <div style={this.styleB()}>
          <div style={this.styleC()}>
            <div style={this.styleF()}>Archiving the<br/>world&#39;s RSS data</div>
            <p style={this.styleD()}>We believe that the marketplace of ideas should be free and accessible, so we&#39;ve undertaken efforts to archive the world&#39;s RSS feeds and provide this data free-of-charge to the public</p>
            <CallToAction href="/feed">Browse Feeds</CallToAction>
            <p style={this.styleE()}>We don&#39;t log or sell user activity to anyone (advertisers, businesses, governments). We&#39;re 100% supported by our notifications delivery service</p>
          </div>
        </div>

        <FactsBar/>

        <FeatureList/>

      </div>
    )
  },
  styleA: function() {
    return {overflow: 'auto'}
  },
  styleB: function() {
    return {
      paddingRight: window.innerWidth / 7,
      paddingLeft: window.innerWidth / 7,
      paddingBottom: '10%',
      height: this.props.width > 1000
        ? 'inherit'
        : '85vh',
      backgroundImage: this.props.width > 1000
        ? 'url(' + heroGraphicLarge + ')'
        : 'none',
      backgroundColor: this.props.muiTheme.palette.canvasColor,
      backgroundPosition: 'right bottom',
      backgroundRepeat: 'no-repeat',
      backgroundSize: this.props.width > 1000
        ? 'inherit'
        : '100%'
    }
  },
  styleD: function() {
    return {
      fontFamily: 'Helvetica',
      lineHeight: this.props.width > 1000
        ? '1.7rem'
        : 'inherit',
      fontSize: this.props.width > 1000
        ? '1.3rem'
        : '1rem',
      textAlign: this.props.width > 1000
        ? 'left'
        : 'center'
    }
  },
  styleC: function() {
    return {
      width: this.props.width > 1000
        ? '50%'
        : '100%',
      paddingTop: this.props.width > 1000
        ? '15vh'
        : '23vh',
      paddingRight: this.props.width > 1000
        ? this.props.muiTheme.spacing.desktopGutter
        : 0,
      paddingLeft: this.props.width > 1000
        ? this.props.muiTheme.spacing.desktopGutter
        : 0,
      WebkitFontSmoothing: 'antialiased',
      MozOsxFontSmoothing: 'grayscale',
      color: this.props.muiTheme.palette.primary2Color,
    }
  },
  styleE: function() {
    return {
      display: this.props.width > 1000
        ? 'block'
        : 'none',
      width: '50%',
      fontFamily: 'Helvetica',
      fontSize: '0.8rem',
      color: '#c1af99'
    }
  },
  styleF: function() {
    return {
      fontSize: this.props.width > 1000
        ? '3rem'
        : '2rem',
      fontWeight: 'bold',
      fontFamily: '"Monda", sans-serif',
      textAlign: this.props.width > 1000
        ? 'left'
        : 'center'
    }
  }
}))

Login.js

import JwtDecode from 'jwt-decode'
import React from 'react'
import Request from 'superagent'
import Validator from 'validator'

import MUIRaisedButton from 'material-ui/RaisedButton'
import MUIFlatButton from 'material-ui/FlatButton'
import MUITextField from 'material-ui/TextField'

import env from '../../env'
import H1 from './H1'


module.exports = React.createClass({
  propTypes: {
    onJwt: React.PropTypes.func.isRequired,
    onUser: React.PropTypes.func.isRequired,
    toggleSigninMode: React.PropTypes.func.isRequired
  },
  getInitialState: function() {
    return {usernameOrEmail: '', password: ''}
  },
  render: function() {
    return (
      <div>
        <H1>Sign-in</H1>
        <MUITextField type="text" hintText={this.state.usernameOrEmail || 'noel'} floatingLabelText="Username/Email" floatingLabelFixed={true} onChange={this.onChangeUsernameOrEmail}/>
        <MUITextField type="password" hintText={this.state.password || '•'.repeat(8)} floatingLabelText="Password" floatingLabelFixed={true} onChange={this.onChangePassword}/>
        <MUIRaisedButton primary onTouchTap={this.onSubmit} label="Submit"/>
        <MUIFlatButton onTouchTap={this.props.toggleSigninMode} label="No account? Register"/>
      </div>
    )
  },
  onSubmit: function(e) {

    var credentials

    if (Validator.isEmail(this.state.usernameOrEmail)) {
      //using an email
      credentials = {
        email: this.state.usernameOrEmail,
        password: this.state.password,
      }
    } else {
      //using an username
      credentials = {
        username: this.state.usernameOrEmail,
        password: this.state.password,
      }
    }

    Request
    .post(env.backend + '/jwt')
    .send(credentials)
    .end((err, response) => {

      var jwt

      if (err)
        throw err

      //plain-text
      jwt = response.text

      this.props.onJwt(jwt, () => {

        var _user_ = JwtDecode(jwt).id

        Request
        .get(env.backend + '/user/' + _user_)
        .set({Authorization: 'Bearer ' + jwt})
        .end((err, response) => {

          if (err) {
            throw err
          }

          this.props.onUser(response.body)
          return
        })
      })
    })
  },
  onChangeUsernameOrEmail: function(e) {

    return this.setState({usernameOrEmail: e.target.value})
  },
  onChangePassword: function(e) {

    return this.setState({password: e.target.value})
  },
})

Register.js

import Request from 'superagent'
import React from 'react'

import MUIRaisedButton from 'material-ui/RaisedButton'
import MUIFlatButton from 'material-ui/FlatButton';
import MUITextField from 'material-ui/TextField'

import env from '../../env'
import H1 from './H1'


module.exports = React.createClass({
  propTypes: {
    onJwt: React.PropTypes.func.isRequired,
    onUser: React.PropTypes.func.isRequired,
    toggleSigninMode: React.PropTypes.func.isRequired
  },
  getInitialState: function() {
    return {email: '', username: '', password: ''}
  },
  render: function() {
    return (
      <div>
        <H1>Signup</H1>
        <MUITextField type="email" hintText={this.state.email || '[email protected]'} floatingLabelText="Email" floatingLabelFixed={true} onChange={this.onChangeEmail}/>
        <MUITextField type="text" hintText={this.state.username || 'noel'} floatingLabelText="Username" floatingLabelFixed={true} onChange={this.onChangeUsername}/>
        <MUITextField type="password" hintText={this.state.password || '•'.repeat(8)} floatingLabelText="Password" floatingLabelFixed={true} onChange={this.onChangePassword}/>
        <MUIRaisedButton primary onTouchTap={this.onSubmit} label="Submit"/>
        <MUIFlatButton onTouchTap={this.props.toggleSigninMode} label="Have an account? Login"/>
      </div>
    )
  },
  onSubmit: function() {

    Request
    .post(env.backend + '/user')
    .send({
      user: {
        email: this.state.email,
        username: this.state.username,
        password: this.state.password,
      }
    })
    .end((err, response) => {

      if (err)
        throw err

      this.props.onUser(response.body, () => {

        Request
        .post(env.backend + '/jwt')
        .send({username: response.body.username, password: this.state.password,})
        .end((err, response) => {

          if (err) {
            throw err
          }

          return this.props.onJwt(response.text)
        })
      })
    })
  },
  onChangeEmail: function(e) {

    return this.setState({email: e.target.value})
  },
  onChangeUsername: function(e) {

    return this.setState({username: e.target.value})
  },
  onChangePassword: function(e) {

    return this.setState({password: e.target.value})
  },
})