React (TSX)
TSX is a syntax that allows using TypeScript in JSX.
React Compiler is a build-time only tool that automatically optimizes React apps.
Please note that LiveCodes supports running JSX and TSX which are compiled to JavaScript using the TypeScript compiler. This was the traditional way of running React and other JSX/TSX apps in LiveCodes before React compiler support was added.
Usage
For usage and examples, see documentation for React and TypeScript support in LiveCodes.
Language Info
Name
react-tsx
Extension
.react.tsx
Editor
script
Compiler
React compiler, which is a babel plugin (babel-plugin-react-compiler).
Code Formatting
Using Prettier.
Custom Settings
React compiler is implemented as a babel plugin (babel-plugin-react-compiler). In addition the following babel presets are used:
Custom settings can be used to add configuration under the following keys:
react-tsx
: the optiondisableAutoRender
can be set totrue
to disable auto-rendering.babel
: custom settings for babel.babel-plugin-react-compiler
: custom settings for babel-plugin-react-compiler.@babel/preset-env
: custom settings for @babel/preset-env.@babel/preset-react
: custom settings for @babel/preset-react.@babel/preset-typescript
: custom settings for @babel/preset-typescript.
Please note that custom settings should be valid JSON (i.e. functions are not allowed).
Example:
{
"react-tsx": {
"disableAutoRender": true
}
}