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