docker-compose run --rm frontend sh -c 'npx create-react-app プロジェクト名 --template typescript'
q

// App.tsx
import React, { useState } from 'react';
import './App.css';

function App() {
  const [top, setTop] = useState(0);
  const [left, setLeft] = useState(0);
  const [backgroundColor, setBackgroundColor] = useState('#ffffff')

  const keyDownHandler = (e: React.KeyboardEvent<HTMLDivElement>) => {
    const key = e.code;

    if (key === 'ArrowUp') {
      setTop((top) => top - 10);
    }

    if (key === 'ArrowDown') {
      setTop((top) => top + 10);
    }

    if (key === 'ArrowLeft') {
      setLeft((left) => left - 10);
    }

    if (key === 'ArrowRight') {
      setLeft((left) => left + 10);
    }

    if (key === 'Space') {
      let color = Math.floor(Math.random() * 0xFFFFFF).toString(16);
      for(let count = color.length; count < 6; count++) {
        color = '0' + color;                     
      }
      setBackgroundColor('#' + color);
    }
  }

  return (
    <div
      className="container"
      tabIndex={0}
      onKeyDown={keyDownHandler}
    >
      <div
        className="box"
        style={{ 
          top: top,
          left: left,
          backgroundColor: backgroundColor,
        }}></div>
    </div>
  );
}

export default App;

    $_product = wc_get_product( $post_id );

    if( $_product->is_type( 'simple' ) ) {
    // do stuff for simple products
    } else {
    // do stuff for everything else
    }

/* This will come in the body at XML but the header will be text/plain, which is why  
all this is happening manually to get this read from the stream.  
*/  
var reqHeaders = request.headers;
gs.info("CPSNS: reqHeaders content-type" + reqHeaders['content-type']);
if (reqHeaders['content-type'] == "text/plain; charset=UTF-8") {
    var stream = request.body.dataStream;
    var reader = new GlideTextReader(stream);
    var input = "";
    var ln = "";
    while ((ln = reader.readLine()) != null) {
        input += ln;
    }
    gs.info("CPSNS: SUB" + input);
} else {
    var body = {};
    var data = request.body.data;

    gs.info("CPSNS: req.body data" + data);

}