TypeScript support for React 17's new JSX factories

[thetric]

Is your proposal related to a problem?

TypeScript 4.1 supports React 17's new JSX factories:

TypeScript 4.1 supports React 17’s upcoming jsx and jsxs factory functions through two new options for the jsx compiler option:

• react-jsx
• react-jsxdev

These options are intended for production and development compiles respectively. Often, the options from one can extend from the other. For example, a tsconfig.json for production builds might look like the following:

// ./src/tsconfig.json
{
 "compilerOptions": {
 "module": "esnext",
 "target": "es2015",
 "jsx": "react-jsx",
 "strict": true
 },
 "include": [
 "./**/*"
 ]
}

and one for development builds might look like the following:

// ./src/tsconfig.dev.json
{
 "extends": "./tsconfig.json",
 "compilerOptions": {
 "jsx": "react-jsxdev"
 }
}

Describe the solution you'd like

The default jsx transform in TypeScript should be react-jsxdev. Only when running react-scripts build it should be react-jsx.

Describe alternatives you've considered

Additional context

Related issues:

• TypeScript 4 support

Background information:

• React team announcement for the new JSX factories
• TypeScript 4.1 beta announcement with support for the new factories