I had generated tsconfig.json with tsc --init,
and then I wrote react code in a .tsx file and got the error Cannot use JSX unless the '--jsx' flag is provided
I stumbled upon this jsx setting of tsconfig
it has jsx in commented mode as // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
so what do those three options mean? namely preserve, react-native and react
jsx property allows us to use .tsx files in the project
So following are two steps of using React with Typescript
1.Name your files with a .tsx extension
2.Enable the jsx option
TypeScript ships with three JSX modes: preserve, react, and react-native.
These modes only affect the emit stage - type checking is unaffected.
The preserve mode will keep the JSX as part of the output to be further consumed by another transform step (e.g. Babel). Additionally, the output will have a .jsx file extension.
The react mode will emit React.createElement, does not need to go through a JSX transformation before use, and the output will have a .js file extension.
The react-native mode is the equivalent of preserve in that it keeps all JSX, but the output will instead have a .js file extension.
https://www.typescriptlang.org/docs/handbook/jsx.html#basic-usage
