React

by brigand

HTML

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

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

function Thingy({ x }) {
	const ctxRef = React.useRef();
  const canvasRef = React.useRef();
  
  React.useEffect(() => {
  	if (!ctxRef.current) {
	    ctxRef.current = canvasRef.current.getContext('2d');
    }
    
    const ctx = ctxRef.current;
    
    ctx.clearRect(0, 0, 400, 300)
    ctx.fillRect(x, 10, 50, 50);
  }, [x])
  
  return <canvas width="400" height="300" ref={canvasRef} />
}

function TodoApp() {
	const [x, setX] = React.useState(10)
  React.useEffect(() => {
		requestAnimationFrame(function tick() {
			setX(x => x + (Math.random() * 5) - 2.5);
			requestAnimationFrame(tick);
		});
	}, []);
  
  return (
    <div>
      <Thingy x={x} />
    </div>
  )
}


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