React just be like, you dumb ass will never know this stupid language. So our supreme framework will spare you some kindness to help you build some fancy shit without leaking the generating part. And it’s all for your good, cus your little brain can not handle such advanced knowledge.

Seriously, why the frameworks today not even expose their compilation tool chain?

We are so back.

TSX

https://en.wikipedia.org/wiki/JSX_(JavaScript)

JSX is with React, but has been adopted by a verity of other frameworks.

And TSX is merely JSX with type constrains.

Babel

Babel is a JavaScript compiler, which is used by react to compile TSX into JSX. Then js to communicate with react runtime.

Follow the guide in https://babeljs.io/docs/usage

pnpm add --save-dev @babel/core @babel/cli @babel/preset-env

pnpm add --save-dev @babel/plugin-transform-typescript

pnpm add --save-dev @babel/plugin-transform-react-jsx

and correctly set compiling config

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ], 
    [
      "@babel/preset-typescript", 
      { 
        "isTSX": true,
        "allExtensions": true,
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "throwIfNamespace": false, // defaults to true
        "runtime": "automatic", // defaults to classic
        "importSource": "custom-jsx-library" // defaults to react
      }
    ]
  ]
}

then run the command

./node_modules/.bin/babel <FileName>.tsx