frontsideair/index.html

## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <!-- test here: https://esnextb.in/?gist=7cba0a35afc77d49ebb2bf5b99e944f1 -->
</head>
<body>
  <div id="app"></div>
</body>
</html>

## index.js
import React, { Component } from 'react'
import { render } from 'react-dom'
import { MemoryRouter as Router, Match, Miss, Link } from 'react-router'

class App extends Component {
  state = { num: 0 }

  componentDidMount () {
    this.interval = setInterval(() => this.setState(() => ({ num: Math.random() })), 1000)
  }

  componentWillUnmount () {
    clearInterval(this.interval)
  }

  render () {
    return (
      <Router>
        <div>
          <Match exactly pattern="/" component={() => <Home num={this.state.num} />} />
        </div>
      </Router>
    )
  }
}

class Home extends Component {
  state = { text: '' }

  render () {
    return (
      <div>
        <label>
          Number: { this.props.num }
          <br />
          <input onChange={e => this.setState({ text: e.target.value })} value={this.state.text} />
        </label>
      </div>
    )
  }
}

render(<App/>, document.querySelector('#app'))

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "react": "15.2.0-rc.2",
    "react-dom": "15.2.0-rc.2",
    "react-router": "4.0.0-2",
    "babel-runtime": "6.11.6"
  }
}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- test here: https://esnextb.in/?gist=7cba0a35afc77d49ebb2bf5b99e944f1 -->
	</head>
	<body>
	<div id="app"></div>
	</body>
	</html>
	import React, { Component } from 'react'
	import { render } from 'react-dom'
	import { MemoryRouter as Router, Match, Miss, Link } from 'react-router'

	class App extends Component {
	state = { num: 0 }

	componentDidMount () {
	this.interval = setInterval(() => this.setState(() => ({ num: Math.random() })), 1000)
	}

	componentWillUnmount () {
	clearInterval(this.interval)
	}

	render () {
	return (
	<Router>
	<div>
	<Match exactly pattern="/" component={() => <Home num={this.state.num} />} />
	</div>
	</Router>
	)
	}
	}

	class Home extends Component {
	state = { text: '' }

	render () {
	return (
	<div>
	<label>
	Number: { this.props.num }
	<br />
	<input onChange={e => this.setState({ text: e.target.value })} value={this.state.text} />
	</label>
	</div>
	)
	}
	}

	render(<App/>, document.querySelector('#app'))
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"react": "15.2.0-rc.2",
	"react-dom": "15.2.0-rc.2",
	"react-router": "4.0.0-2",
	"babel-runtime": "6.11.6"
	}
	}