inawrath/index.html

## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNext Bin Sketch</title>
  <!-- put additional styles and scripts here -->
  <link href="https://fonts.googleapis.com/css?family=Glass+Antiqua" rel="stylesheet" type="text/css">
  <!-- CSS Reset -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">

  <!-- Milligram CSS minified -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.1.0/milligram.min.css">

  <style>
    body {
      color: white;
      background-color: #575A65;
      font-family: 'Glass Antiqua', cursive;
    }
    #app {
      padding: 20px;
      text-align: center;
    }
    .name {
      font-size: 1.7em;
    }
  </style>
</head>
<body>
  <div id="app"></div>
</body>
</html>

## index.js
import {random} from 'starwars-names'
import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
  state = {
    name: '[Click the button]'
  }

  getRandomName = () => {
    this.setState({name: random()})
  }

  render() {
    return (
      <div>
        <h1>Random Star Wars Names</h1>
        <div className="name">{this.state.name}</div>
        <hr />
        <button onClick={this.getRandomName}>
          New Random Name
        </button>
      </div>
    )
  }
}

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

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "starwars-names": "1.5.3",
    "react": "15.6.2",
    "react-dom": "15.6.2"
  }
}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNext Bin Sketch</title>
	<!-- put additional styles and scripts here -->
	<link href="https://fonts.googleapis.com/css?family=Glass+Antiqua" rel="stylesheet" type="text/css">
	<!-- CSS Reset -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">

	<!-- Milligram CSS minified -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.1.0/milligram.min.css">

	<style>
	body {
	color: white;
	background-color: #575A65;
	font-family: 'Glass Antiqua', cursive;
	}
	#app {
	padding: 20px;
	text-align: center;
	}
	.name {
	font-size: 1.7em;
	}
	</style>
	</head>
	<body>
	<div id="app"></div>
	</body>
	</html>
	import {random} from 'starwars-names'
	import React, { Component } from 'react'
	import ReactDOM from 'react-dom'

	class App extends Component {
	state = {
	name: '[Click the button]'
	}

	getRandomName = () => {
	this.setState({name: random()})
	}

	render() {
	return (
	<div>
	<h1>Random Star Wars Names</h1>
	<div className="name">{this.state.name}</div>
	<hr />
	<button onClick={this.getRandomName}>
	New Random Name
	</button>
	</div>
	)
	}
	}

	ReactDOM.render(
	<App />,
	document.getElementById('app'),
	)
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"starwars-names": "1.5.3",
	"react": "15.6.2",
	"react-dom": "15.6.2"
	}
	}