Which mode should be chosen for JSX: react or react-native?

Referring to the official TypeScript documentation:

The react mode will emit React.createElement, does not require a JSX transformation before use, and the output file will be .js.

The react-native mode is similar to preserve as it retains all JSX code, but the output file will have a .js extension.

However, most tutorials I've seen only mention the react mode:

"jsx": "react"

Although this setup works seamlessly with no warnings, I am curious about how React Native can compile TSX files without any issues.

In essence:

  1. What's the rationale behind having a separate react-native mode when React Native supports the react mode?
  2. Is there a performance advantage in using one mode over the other?
typescriptreact-native

Answer №1

Back in the day, everything was simple and neat before React Native made its debut:

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

When TypeScript encountered a .tsx file, it had to make a decision about whether to generate .jsx files (with jsx: preserve) or .js files (with jsx: react). It couldn't output .js files with JSX syntax because, well, JSX isn't considered valid JavaScript syntax.

But then along came React Native saying "Let's mix JSX syntax into our .js files!", even though it goes against the rules. So now, when you're coding in TypeScript for React Native, you may need TS to process .tsx files to create .js files that still contain JSX syntax. And thus, the JSX mode known as react-native was born.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to troubleshoot and resolve TypeScript errors related to Angular in d.ts files, especially when working

I've integrated Msal (https://github.com/AzureAD/microsoft-authentication-library-for-js) with the latest setup in Angular using Typescript 3.1.1, and I encountered the following error: ERROR in node_modules/msal/lib-commonjs/UserAgentApplication.d.t ...

angulartypescriptazure-ad-msal

Retrieving the attribute key from a dynamically typed object

Having this specific interface structure: interface test { [key: string]: string } along with an object defined as follows: const obj: test ={ name: 'mda', telephone: '1234' } Attempting to utilize this object in a variab ...

typescript

Gatsby, in combination with TSC, does not properly transpile the rest operator

I'm attempting to integrate TypeScript with Gatsby following the guidelines provided here. However, I am encountering an issue where the tsc command is failing to transpile the spread (...) operator and producing the error shown below: WAIT Compili ...

typescriptgatsby

Issue with Angular 5 Nested Form and Validation: Error indicating that the 'controls' property does not exist on the 'AbstractControl' type

After setting up a nested formgroup, everything seems to be working fine. However, I'm facing some challenges with properly configuring validation alerts for nested form elements. One specific issue I encountered is an error during the build process: ...

angulartypescriptformgroups

What is the best approach for associating interfaces with nested objects to ensure proper configuration validation?

Exploring the use of typescript for implementing type checking on a configuration file similar to the one below: const _config = { local: { host: 'localhost', port: 1234 }, dev: { host: 'https://dev.myapp ...

javascripttypescriptinterface

Update information according to the drop-down choice made from a different, unrelated component in Angular

I have different components that are not related. When I select a company from the header component, I want to immediately display data that matches the selected company. Currently, the data changes only when I visit another page and then return, but I nee ...

angulartypescriptangular-changedetection

Converting an array of string variables into a union type in a specialized way

const X= "Hey" const Y= "See ya" const Z="Bar" const myArray=[X,Y,Z] type TransformArrayToUnion<myArrayOfConstants> ==> The expected type output should be: "Hey" | "See ya" | "Bar". I ...

typescript

Create a flexible string for refining a REST request

I am currently working on constructing a dynamic string and I've encountered an issue, so I humbly seek assistance from the community. I have a string for creating a rest call filter, but I am struggling with the use of and's This query only fu ...

reactjsstringtypescriptrestdynamic-programming

Karma Unit test: Issue with accessing the 'length' property of an undefined value has been encountered

While running karma unit tests, I encountered a similar issue and here is what I found: One of my unit tests was writing data to a json file, resulting in the following error: ERROR in TypeError: Cannot read property 'length' of undefined a ...

angulartypescriptkarma-jasmine

Having trouble with the onChange function within the rc-field-form wrapper

I created a wrapper for the Field component from the rc-field-form package as shown below: import * as React from "react"; import Form from "rc-field-form"; import type { FieldProps } from "rc-field-form/lib/Field"; const { F ...

javascriptreactjstypescript

Building a reusable Button component in React using TypeScript that handles not assignable type errors

Attempting to create a reusable component in reactjs using typescript is currently resulting in the following error: Type '{ children: string; type: string; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButt ...

javascriptreactjstypescript

Tips for dragging a column in ngx-datatable to scroll the horizontal scroll bar in Angular 4

Is there a way to make the horizontal scroll bar move when dragging the column header of ngx-datatable in Angular 4? I have a situation where the first column should trigger the movement of the horizontal scroll bar when dragged from left to right. Any s ...

angulartypescriptngx-datatable

What is preventing me from utilizing TouchEvent in Safari browser?

Recently, while working on a project utilizing Angular 8, I encountered an issue regarding touch event handling. In my code, I had a handler setup like this: @HostListener('touchend', ['$event']) onTouchend(event: TouchEvent) { eve ...

angulartypescriptfirefoxsafariwebkit

Jasmine attempting to access a nonexistent property

I created a very basic component: import { Component } from '@angular/core'; @Component({ selector: 'loading', templateUrl: './loading.component.html', styleUrls: ['./loading.component.scss'] }) export ...

javascriptangulartypescriptjasminekarma-jasmine

The `findOne` operation in Mongoose fails to complete within the 10000ms time limit

Encountering this error on an intermittent basis can be really frustrating. I am currently using mongoose, express, and typescript to connect to a MongoDB Atlas database. The error message that keeps popping up reads as follows: Operation wallets.findOne() ...

node.jstypescriptmongodbmongoosemongodb-atlas

Data is being fetched successfully but is not being saved or updated in ASP.NET Core 3.1

My issue is reminiscent of a similar inquiry on this post. Despite implementing the suggested solutions, my problem persists as I opted for a slightly different approach in terms of storing data in the database. Employee Model Class public class Empl ...

c#sqlasp.net-mvctypescriptasp.net-core

exporting an enum from a typescript type definition file

As I compile the type definitions for a library that I'm utilizing, I came across one function that identifies the mouse button clicked by an integer: //index.d.ts export as namespace myLib; // activates the library listening for a specific mouse ...

typescripttypescript-typings

Error: Attempting to access property 'toLocaleLowerCase' of an undefined value

I've been working on a custom pipe following the instructions carefully, but I keep encountering an error when trying to filter my list. Below is the code for my custom pipe: import { Pipe, PipeTransform } from '@angular/core' ...

javascriptangulartypescriptangular-pipe

The command 'npm install expo-cli --global' is not functioning as intended

While attempting to install expo-cli, I encountered an error that is preventing me from proceeding. npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8b2b7b198e9ecf6e8f6ec">[email protected]</a> ...

node.jsreactjsreact-nativenpmexpo

What is the best way to calculate the product of decimal numbers within a TypeScript Number variable?

Imagine you have a number, for example 288.65, and you want to multiply it without the decimal point in order to obtain the result of 28865. However, when attempting to achieve this by using console.log(288.65 * 100), the output is not as expected, showin ...

javascripttypescript