Conversion of .tsx files into .js file in React JS

I am learning React JS. The problem I am facing is that I have bundle of files in .tsx extension so the situation is I want to convert my .tsx files into .js extension for the betterment of my project. And also, when I'll start the project on browser side and so after compilation It should load the .js files on browser side after compilation. I am using React JS, Typescript and Vite JS for front-end tool.

I am working Ubuntu 18.04

node.js version == 14.20.0

npm version == 6.14.7

and here is my tsconfig.json file:

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Kindly help me to resolve this issue: