JSX ↔ Syntactic Sugar to mix HTML inside JS, later Transpile to React.createElement()

Source: JSX In Depth – React

aka JSX, JavaScript-XML

JSX Syntax

abstraction over Low-Level functions within react & react-dom library

Transpile

(process) to translate Source Code into some other Source Code

JSX Transform

JSX translated to React.createElement() calls

Source: Introducing the New JSX Transform – React Blog

React.Fragment

empty React placeholder container w/o "physical" Element add to final HTML

React.createElement()

JSX keeps HTML & JS together; unlike MVC which keeps it separate

!deprecated react-dom-factories - React.DOM.h1(null, "hello")

online HTML-JSX converter tool

transform.tools/html to jsx

online SVG-JSX converter tool

transform.tools/

key

special prop as string UID for VDOM to track/Diff list elements

References

1. Component ↔ 🧱Composable code to Encapsulate, Reuse & return React Element Fiber via JSX

2. return(...JSX) ↔ to return some UI from FC (typically described using JSX)

3. JSX Transform ↔ JSX translated to React.createElement() calls

4. Babel ↔ Dev tool to Transpile JSX & Polyfill JS

5. FC ↔ function to return UI via JSX. Pass propsfor dynamic input. add state via Hook

6. useMemo() ↔ Memoizing Hook to Memoize entire Component, some JSX or props, based on Deps Array change

7. fallback ↔ prop to set JSX placeholder for Suspense Boundary when Lazy Loading

8. children ↔ special placeholder props to nest JSX

9. element ↔ <Route\> prop to attach JSX

10. .tsx ↔ TS implementation file with JSX

11. render() ↔ CC Method inhert from React.Component to return UI as JSX

12. !cannot create [**_JSX_**](jsx) w/o explicit [children](children_reactcreateelement) ↔

Type '{ children: never[]; color: string; onClick: () => void; }' is not assignable to type 'IntrinsicAttributes & ChildProps'.
  Property 'children' does not exist on type 'IntrinsicAttributes & ChildProps'.ts(2322)

13. [

`onpaste="return false"
 oncopy="return false"  
 oncut="return false"  `
```](onpaste-return-false-oncopy-return-false-oncut-return-false) ↔ to set [<span data-tooltip-id="preview__B6QycpZvAygAJ39Xd">Attribute</span>](property-attribute) to disable user copy/cut/paste action inside form element. apply [<span data-tooltip-id="preview__qkx4Jotz92SHaxkuS">camelCase</span>](camelcase) for [<span data-tooltip-id="preview__AFA7phR8QdbJCn9aS">JSX</span>](jsx) - more compact to write as inline event attribute but may conflict/overwrite other event handlers?

14. [`.tsx`](tsx) ↔ [<span data-tooltip-id="preview__PR6QXQ7XD2g3PmTaF">TS</span>](ts) implementation ext with [<span data-tooltip-id="preview__AFA7phR8QdbJCn9aS">JSX</span>](jsx) 

15. [`.ts`](ts_aliases) ↔ [<span data-tooltip-id="preview__PR6QXQ7XD2g3PmTaF">TS</span>](ts) implementation ext w/o [<span data-tooltip-id="preview__AFA7phR8QdbJCn9aS">JSX</span>](jsx) 

16. [`MDX`](mdx) ↔ [<span data-tooltip-id="preview__EGhbuoTgAb8JZNjhD">Markdown</span>](markdown)+[<span data-tooltip-id="preview__AFA7phR8QdbJCn9aS">JSX</span>](jsx) 

17. [`vite-plugin-svgr`](vite-plugin-svgr) ↔ adds SVGR lib as Vite plugin to properly parse [<span data-tooltip-id="preview__762oTfzxjy8zzoBAB">SVG</span>](svg_image-format) files as [<span data-tooltip-id="preview__AFA7phR8QdbJCn9aS">JSX</span>](jsx) 

18. [`JSX Object Literal`](jsx-object-literal) ↔ `{{...}}` syntax for [<span data-tooltip-id="preview__AFA7phR8QdbJCn9aS">JSX</span>](jsx) expression containing object literal




export const PreviewbTSLG55MG4278TTY9 = React.lazy(() => import("@site/static/preview/PreviewbTSLG55MG4278TTY9"))

<React.Suspense fallback={null}><PreviewbTSLG55MG4278TTY9/></React.Suspense>


export const Preview76YZFGLsBuRNyEMqN = React.lazy(() => import("@site/static/preview/Preview76YZFGLsBuRNyEMqN"))

<React.Suspense fallback={null}><Preview76YZFGLsBuRNyEMqN/></React.Suspense>


export const PreviewHWLTjZrhernsLocy7 = React.lazy(() => import("@site/static/preview/PreviewHWLTjZrhernsLocy7"))

<React.Suspense fallback={null}><PreviewHWLTjZrhernsLocy7/></React.Suspense>


export const PreviewvFv4TzsqcLcxtKrHc = React.lazy(() => import("@site/static/preview/PreviewvFv4TzsqcLcxtKrHc"))

<React.Suspense fallback={null}><PreviewvFv4TzsqcLcxtKrHc/></React.Suspense>


export const Preview5xjsx6v432txKHaEy = React.lazy(() => import("@site/static/preview/Preview5xjsx6v432txKHaEy"))

<React.Suspense fallback={null}><Preview5xjsx6v432txKHaEy/></React.Suspense>


export const PreviewfJyiC5uxwvPCKLKbA = React.lazy(() => import("@site/static/preview/PreviewfJyiC5uxwvPCKLKbA"))

<React.Suspense fallback={null}><PreviewfJyiC5uxwvPCKLKbA/></React.Suspense>


export const Preview9i74HqGTJjH3GaNAR = React.lazy(() => import("@site/static/preview/Preview9i74HqGTJjH3GaNAR"))

<React.Suspense fallback={null}><Preview9i74HqGTJjH3GaNAR/></React.Suspense>


export const PreviewAFA7phR8QdbJCn9aS = React.lazy(() => import("@site/static/preview/PreviewAFA7phR8QdbJCn9aS"))

<React.Suspense fallback={null}><PreviewAFA7phR8QdbJCn9aS/></React.Suspense>


export const PreviewG887bqycfCYCmncMh = React.lazy(() => import("@site/static/preview/PreviewG887bqycfCYCmncMh"))

<React.Suspense fallback={null}><PreviewG887bqycfCYCmncMh/></React.Suspense>


export const Preview8HgfcPhoJsdZip3LA = React.lazy(() => import("@site/static/preview/Preview8HgfcPhoJsdZip3LA"))

<React.Suspense fallback={null}><Preview8HgfcPhoJsdZip3LA/></React.Suspense>


export const PreviewWSigeKBvcfs48E73R = React.lazy(() => import("@site/static/preview/PreviewWSigeKBvcfs48E73R"))

<React.Suspense fallback={null}><PreviewWSigeKBvcfs48E73R/></React.Suspense>


export const PreviewBL4qkq3LxxhaSCE84 = React.lazy(() => import("@site/static/preview/PreviewBL4qkq3LxxhaSCE84"))

<React.Suspense fallback={null}><PreviewBL4qkq3LxxhaSCE84/></React.Suspense>


export const PreviewQEA56Gyq3xqXojA5y = React.lazy(() => import("@site/static/preview/PreviewQEA56Gyq3xqXojA5y"))

<React.Suspense fallback={null}><PreviewQEA56Gyq3xqXojA5y/></React.Suspense>


export const Preview7EiBpTevKANtPuSbH = React.lazy(() => import("@site/static/preview/Preview7EiBpTevKANtPuSbH"))

<React.Suspense fallback={null}><Preview7EiBpTevKANtPuSbH/></React.Suspense>


export const PreviewmMhBxSMm7cMmqjSRi = React.lazy(() => import("@site/static/preview/PreviewmMhBxSMm7cMmqjSRi"))

<React.Suspense fallback={null}><PreviewmMhBxSMm7cMmqjSRi/></React.Suspense>


export const PreviewQsdg5xR2n4LZ8bM9o = React.lazy(() => import("@site/static/preview/PreviewQsdg5xR2n4LZ8bM9o"))

<React.Suspense fallback={null}><PreviewQsdg5xR2n4LZ8bM9o/></React.Suspense>


export const PreviewDKWcH2GNL2Pontz2G = React.lazy(() => import("@site/static/preview/PreviewDKWcH2GNL2Pontz2G"))

<React.Suspense fallback={null}><PreviewDKWcH2GNL2Pontz2G/></React.Suspense>


export const Preview8beEDK3gMvivxf4m5 = React.lazy(() => import("@site/static/preview/Preview8beEDK3gMvivxf4m5"))

<React.Suspense fallback={null}><Preview8beEDK3gMvivxf4m5/></React.Suspense>


export const PreviewDXt4ukxQZsdXxoTPs = React.lazy(() => import("@site/static/preview/PreviewDXt4ukxQZsdXxoTPs"))

<React.Suspense fallback={null}><PreviewDXt4ukxQZsdXxoTPs/></React.Suspense>


export const Preview9jjYDttkJFbPMZW4j = React.lazy(() => import("@site/static/preview/Preview9jjYDttkJFbPMZW4j"))

<React.Suspense fallback={null}><Preview9jjYDttkJFbPMZW4j/></React.Suspense>


export const PreviewHfrPqviLa32xMJJxp = React.lazy(() => import("@site/static/preview/PreviewHfrPqviLa32xMJJxp"))

<React.Suspense fallback={null}><PreviewHfrPqviLa32xMJJxp/></React.Suspense>


export const PreviewsnR7voDJrhXWj7Xdz = React.lazy(() => import("@site/static/preview/PreviewsnR7voDJrhXWj7Xdz"))

<React.Suspense fallback={null}><PreviewsnR7voDJrhXWj7Xdz/></React.Suspense>


export const Preview9Le7zdA2R4LzoE852 = React.lazy(() => import("@site/static/preview/Preview9Le7zdA2R4LzoE852"))

<React.Suspense fallback={null}><Preview9Le7zdA2R4LzoE852/></React.Suspense>


export const Preview9izw8RoFY6epyxXYK = React.lazy(() => import("@site/static/preview/Preview9izw8RoFY6epyxXYK"))

<React.Suspense fallback={null}><Preview9izw8RoFY6epyxXYK/></React.Suspense>


export const PreviewXsRQoB84QmpQDDxnv = React.lazy(() => import("@site/static/preview/PreviewXsRQoB84QmpQDDxnv"))

<React.Suspense fallback={null}><PreviewXsRQoB84QmpQDDxnv/></React.Suspense>


export const PreviewtLWwcAGswZXwh83AA = React.lazy(() => import("@site/static/preview/PreviewtLWwcAGswZXwh83AA"))

<React.Suspense fallback={null}><PreviewtLWwcAGswZXwh83AA/></React.Suspense>


export const PreviewqXaxHswpoTZw8AXzH = React.lazy(() => import("@site/static/preview/PreviewqXaxHswpoTZw8AXzH"))

<React.Suspense fallback={null}><PreviewqXaxHswpoTZw8AXzH/></React.Suspense>


export const PreviewQEMD5H8DHWRmrw55M = React.lazy(() => import("@site/static/preview/PreviewQEMD5H8DHWRmrw55M"))

<React.Suspense fallback={null}><PreviewQEMD5H8DHWRmrw55M/></React.Suspense>


export const PreviewHi5szNeFWbFHDjz6C = React.lazy(() => import("@site/static/preview/PreviewHi5szNeFWbFHDjz6C"))

<React.Suspense fallback={null}><PreviewHi5szNeFWbFHDjz6C/></React.Suspense>


export const PreviewGwTenckbvRJAzxEHh = React.lazy(() => import("@site/static/preview/PreviewGwTenckbvRJAzxEHh"))

<React.Suspense fallback={null}><PreviewGwTenckbvRJAzxEHh/></React.Suspense>


export const PreviewFGrRLxyeqZkpFDAJv = React.lazy(() => import("@site/static/preview/PreviewFGrRLxyeqZkpFDAJv"))

<React.Suspense fallback={null}><PreviewFGrRLxyeqZkpFDAJv/></React.Suspense>


export const PreviewTQZJXLFQu7Y5Eiz2m = React.lazy(() => import("@site/static/preview/PreviewTQZJXLFQu7Y5Eiz2m"))

<React.Suspense fallback={null}><PreviewTQZJXLFQu7Y5Eiz2m/></React.Suspense>


export const PreviewQ2d5oFqsP22XqRJxo = React.lazy(() => import("@site/static/preview/PreviewQ2d5oFqsP22XqRJxo"))

<React.Suspense fallback={null}><PreviewQ2d5oFqsP22XqRJxo/></React.Suspense>


export const Previewbgx7NL6QeqLwefZiW = React.lazy(() => import("@site/static/preview/Previewbgx7NL6QeqLwefZiW"))

<React.Suspense fallback={null}><Previewbgx7NL6QeqLwefZiW/></React.Suspense>


export const PreviewMDHagBbg6pbELzHEZ = React.lazy(() => import("@site/static/preview/PreviewMDHagBbg6pbELzHEZ"))

<React.Suspense fallback={null}><PreviewMDHagBbg6pbELzHEZ/></React.Suspense>


export const PreviewPR6QXQ7XD2g3PmTaF = React.lazy(() => import("@site/static/preview/PreviewPR6QXQ7XD2g3PmTaF"))

<React.Suspense fallback={null}><PreviewPR6QXQ7XD2g3PmTaF/></React.Suspense>


export const Preview3apmEvsNEPPRaXSB9 = React.lazy(() => import("@site/static/preview/Preview3apmEvsNEPPRaXSB9"))

<React.Suspense fallback={null}><Preview3apmEvsNEPPRaXSB9/></React.Suspense>


export const PreviewMP5hXPJeveLXpdxcz = React.lazy(() => import("@site/static/preview/PreviewMP5hXPJeveLXpdxcz"))

<React.Suspense fallback={null}><PreviewMP5hXPJeveLXpdxcz/></React.Suspense>


export const PreviewB6QycpZvAygAJ39Xd = React.lazy(() => import("@site/static/preview/PreviewB6QycpZvAygAJ39Xd"))

<React.Suspense fallback={null}><PreviewB6QycpZvAygAJ39Xd/></React.Suspense>


export const Previewqkx4Jotz92SHaxkuS = React.lazy(() => import("@site/static/preview/Previewqkx4Jotz92SHaxkuS"))

<React.Suspense fallback={null}><Previewqkx4Jotz92SHaxkuS/></React.Suspense>


export const PreviewEGhbuoTgAb8JZNjhD = React.lazy(() => import("@site/static/preview/PreviewEGhbuoTgAb8JZNjhD"))

<React.Suspense fallback={null}><PreviewEGhbuoTgAb8JZNjhD/></React.Suspense>


export const Preview762oTfzxjy8zzoBAB = React.lazy(() => import("@site/static/preview/Preview762oTfzxjy8zzoBAB"))

<React.Suspense fallback={null}><Preview762oTfzxjy8zzoBAB/></React.Suspense>