reac

App.jsx

import { CanvasSpace, Pt } from 'pts';

const space = new CanvasSpace('#app');
const form = new space.getForm();

space.add((time, ftime) => {
  let pt = new Pt(space.center);

  form.fill('red').point(pt, 10, 'circle');
});

space.bindMouse().play();

const Button = props => <button {...props}>Press me</button>;

export default function App() {
  return (
    <main
      style={{
        width: '100vw',
        height: '100vh',
      }}
    >
      <h1>Header</h1>
      <Button onClick={() => console.log('gu')} />
      <div
        id="app"
        style={{
          width: 500,
          height: 200,
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          border: '1px dashed yellow',
        }}
      ></div>
    </main>
  );
}

codeswing.json

{
  "scripts": [
    "react",
    "react-dom"
  ],
  "styles": []
}