1 line
7.2 KiB
JavaScript
1 line
7.2 KiB
JavaScript
"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["3305"],{3011:function(e,s,t){t.r(s),t.d(s,{default:()=>h,frontMatter:()=>a,metadata:()=>n,assets:()=>c,toc:()=>d,contentTitle:()=>l});var n=JSON.parse('{"id":"languages/react-tsx","title":"React (TSX)","description":"TSX is a syntax that allows using TypeScript in JSX.","source":"@site/docs/languages/react-tsx.mdx","sourceDirName":"languages","slug":"/languages/react-tsx","permalink":"/docs/languages/react-tsx","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/react-tsx.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"React Native","permalink":"/docs/languages/react-native"},"next":{"title":"React","permalink":"/docs/languages/react"}}'),r=t("5893"),i=t("65");let a={},l="React (TSX)",c={},d=[{value:"Usage",id:"usage",level:2},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Links",id:"links",level:2}];function o(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(s.header,{children:(0,r.jsx)(s.h1,{id:"react-tsx",children:"React (TSX)"})}),"\n",(0,r.jsx)(s.p,{children:"TSX is a syntax that allows using TypeScript in JSX."}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.a,{href:"https://react.dev/learn/react-compiler",children:"React Compiler"})," is a build-time only tool that automatically optimizes ",(0,r.jsx)(s.a,{href:"https://react.dev/",children:"React"})," apps."]}),"\n",(0,r.jsxs)(s.p,{children:["Please note that LiveCodes supports running ",(0,r.jsx)(s.a,{href:"/docs/languages/jsx",children:"JSX"})," and ",(0,r.jsx)(s.a,{href:"/docs/languages/tsx",children:"TSX"})," which are compiled to JavaScript using the ",(0,r.jsx)(s.a,{href:"/docs/languages/typescript",children:"TypeScript compiler"}),". This was the traditional way of running React and other JSX/TSX apps in LiveCodes before React compiler support was added."]}),"\n",(0,r.jsx)(s.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsxs)(s.p,{children:["For usage and examples, see documentation for ",(0,r.jsx)(s.a,{href:"/docs/languages/react",children:"React"})," and ",(0,r.jsx)(s.a,{href:"/docs/languages/typescript",children:"TypeScript"})," support in LiveCodes."]}),"\n",(0,r.jsx)(s.h2,{id:"language-info",children:"Language Info"}),"\n",(0,r.jsx)(s.h3,{id:"name",children:"Name"}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.code,{children:"react-tsx"})}),"\n",(0,r.jsx)(s.h3,{id:"extension",children:"Extension"}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.code,{children:".react.tsx"})}),"\n",(0,r.jsx)(s.h3,{id:"editor",children:"Editor"}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.code,{children:"script"})}),"\n",(0,r.jsx)(s.h2,{id:"compiler",children:"Compiler"}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.a,{href:"https://react.dev/learn/react-compiler",children:"React compiler"}),", which is a ",(0,r.jsx)(s.a,{href:"/docs/languages/babel",children:"babel"})," plugin (",(0,r.jsx)(s.a,{href:"https://www.npmjs.com/package/babel-plugin-react-compiler",children:"babel-plugin-react-compiler"}),")."]}),"\n",(0,r.jsx)(s.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,r.jsxs)(s.p,{children:["Using ",(0,r.jsx)(s.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,r.jsx)(s.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,r.jsxs)(s.p,{children:["React compiler is implemented as a babel plugin (",(0,r.jsx)(s.a,{href:"https://www.npmjs.com/package/babel-plugin-react-compiler",children:"babel-plugin-react-compiler"}),"). In addition the following babel presets are used:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"https://babeljs.io/docs/en/babel-preset-env",children:"@babel/preset-env"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"https://babeljs.io/docs/en/babel-preset-react",children:"@babel/preset-react"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"https://babeljs.io/docs/en/babel-preset-typescript",children:"@babel/preset-typescript"})}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," can be used to add configuration under the following keys:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"react-tsx"}),": the option ",(0,r.jsx)(s.code,{children:"disableAutoRender"})," can be set to ",(0,r.jsx)(s.code,{children:"true"})," to disable ",(0,r.jsx)(s.a,{href:"/docs/languages/react#auto-rendering",children:"auto-rendering"}),"."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"babel"}),": custom settings for ",(0,r.jsx)(s.a,{href:"https://babeljs.io/docs/options",children:"babel"}),"."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"babel-plugin-react-compiler"}),": custom settings for ",(0,r.jsx)(s.a,{href:"https://www.npmjs.com/package/babel-plugin-react-compiler",children:"babel-plugin-react-compiler"}),"."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"@babel/preset-env"}),": custom settings for ",(0,r.jsx)(s.a,{href:"https://babeljs.io/docs/en/babel-preset-env",children:"@babel/preset-env"}),"."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"@babel/preset-react"}),": custom settings for ",(0,r.jsx)(s.a,{href:"https://babeljs.io/docs/en/babel-preset-react",children:"@babel/preset-react"}),"."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"@babel/preset-typescript"}),": custom settings for ",(0,r.jsx)(s.a,{href:"https://babeljs.io/docs/en/babel-preset-typescript",children:"@babel/preset-typescript"}),"."]}),"\n"]}),"\n",(0,r.jsx)(s.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Example:"})}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "react-tsx": {\n "disableAutoRender": true\n }\n}\n'})}),"\n",(0,r.jsx)(s.h2,{id:"links",children:"Links"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"https://react.dev/",children:"React"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"https://react.dev/learn/writing-markup-with-jsx",children:"JSX"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"https://www.typescriptlang.org/",children:"TypeScript"})}),"\n"]})]})}function h(e={}){let{wrapper:s}={...(0,i.a)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}},65:function(e,s,t){t.d(s,{Z:function(){return l},a:function(){return a}});var n=t(7294);let r={},i=n.createContext(r);function a(e){let s=n.useContext(i);return n.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),n.createElement(i.Provider,{value:s},e.children)}}}]); |