How compile TSX without create-react-app?

Question

I am building a very basic React app by including the React library script tags in my html page, and loading my components in script tags. I am not using modules or create-react-app. My components looks like this:

TIPS.JS

class Tips extends React.Component {
    constructor() {
        super()
    }

    render() {
        return (
            <div>
                <h1>Hello World</h1>
            </div>
        )
    }
}

I have installed the babel transpolar:

npm install babel-cli@6 babel-preset-react-app@3

And now I can transpile my JSX component to normal JS with:

npx babel --watch src --out-dir . --presets react-app/prod

This is fine, but now I want to ALSO compile Typescript TSX, but these docs are a bit unclear on how to combine these. They refer to the Microsoft Typescript React Starter, but that uses Webpack, so it's not the same setup.

Typescript setup

nom install typescript
npx tsc --init

TSCONFIG.json

{
  "compilerOptions": {
      "rootDir": "src",
      "outDir": "build"
  },
}

Now I should be able to run npm run build but I can't find the settings for package.json. Should I use tsc watch or babel watch ? Or can I just discard babel when using typescript?

In other words, what's the most basic setup to compile TSX components to javascript without using modules and webpack?

felixmosh felixmosh · Accepted Answer · 2019-11-20T13:22:29

You can compile Typescript using Babel with @babel/preset-typescript.

npm install --save-dev @babel/preset-typescript

// .babelrc
{
  "presets": ["@babel/preset-typescript"]
}

So just add this preset & add tsconfig.json to your project and you will able to transpile TS.

For more info

How compile TSX without create-react-app?

1 Answers