Live Reacto

<button onClick={()=> alert('hello') }>click</button>

() => {
  const Button = () => <button 
    onClick={()=> alert('hello') }>click
  </button>

  return <div><Button /></div>
}

function App() {

  // this is an external library (styled component)
  const Button = styled.button`
    background-color: #000;
    color: #fff;
  `;

  const [count, setCount] = React.useState(0);
  const onCount = () => setCount(count + 1);

  return <div>{count} <Button onClick={onCount}>Click me</Button></div>
}

render(<App />)

() => {
  const [count, setCount] = React.useState(0);
  const onCount = () => setCount(count + 1);
  return (
    <div>
      {count} <button onClick={onCount}>Click me</button>
    </div
  );
}