Should JSX mode be react or react-native?

Question

Basing this question on this TypeScript official documentation:

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.

But, all the tutorials I've seen have it react mode:

"jsx": "react"

While this works perfectly, and I don't even see a warning, I'd like to understand how/why is it that React Native compiles the TSX and is able to load them without any problem.

Basically:

1. Why create the react-native mode, when React Native supports react mode?
2. Would there be any performance reason to use one over the other?

Answer 1

Before React Native came along, the world was nice and clean:

| File Extension |  Has JSX Syntax  |  Has Type Annotations  |
--------------------------------------------------------------
|   .tsx         |       Yes        |          Yes           |
|   .ts          |       No         |          Yes           |
|   .jsx         |       Yes        |          No            |
|   .js          |       No         |          No            |

When TypeScript saw a .tsx file, it could decide whether to emit .jsx files (under jsx: preserve) or .js files (under jsx: react). It wasn't possible to emit .js files with JSX syntax in them (because JSX isn't legal JavaScript syntax).

Then React Native said "We'll have JSX syntax in .js files!", which is weird because it's illegal, but anyway. So if you're writing React Native code in TypeScript, you sometimes want TS to take .tsx input files and produce .js files that still have JSX syntax in them. Thus the JSX mode react-native was born.