React

by edwardsharp

HTML

<div id="app"></div>

CSS

body {
  background: #666;
  padding: 20px;
  font-family: sans-serrif;
  font-size: 2em;
  color: white;
}

button {
  margin-left: 1em;
  background-color: #000;
  border-color: #000;
  color: white;
  font-size: 1em;
}
button:hover{
  color: #eeddee;
  border: inset 1px #eeddee;
}

React

function HelloWorld(){
	[counter, setCounter] = React.useState(1)
  
	const increment = () => {
  	setCounter(oldVal => oldVal + 1)
    console.log('counter was',counter)
  }  
  
 	return (
  	<div>
  	  {counter}
      <button onClick={increment}>increment</button>
  	</div>
  )
}

ReactDOM.render(<HelloWorld />, document.querySelector("#app"))