What is JSX?

How JSX Transforms into JavaScript

What is createElement?

Pragmas and babel-transform-react-jsx

WTF is JSX

Let's change the function React uses to compile JSX to using pragmas. Pragmas are used in MDX, Emotion, theme-ui, blocks-ui, and other projects to do everything from style insertion and caching to full blown visual editing of React apps.

[Open the Babel repl](https://babeljs.io/en/repl#?browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=PQKhAIAECsGcA9wEMB2BPALgCwJYoObgjABQOAtgA4D2AThuAEoCmSAxgwGa3XngDktVh35kqdBgG8hKACbNaAX3DdeAoewwBaWb1EkZ82gAoAPLJwA3cGwA2SWLAByScswC8AIlhZqlSnj4WrY4sBieAHwk4DHgplgAjBEAyr7-geAAMqEYpsCJUbFxAK62hUVxIRF5VdEVplU1OOVFDc1NLXHApVF5FpYRADTgumzFbigYAHQARtSyaACUQA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=react&prettier=true&targets=&version=7.8.4&externalPlugins=)

Chris Biscardi: [0:00] If we look at our code in the Babel rappel, we can see that our JSX elements get transformed to React.createElement. If we add a comment at the top of the file, we can change the function that's being used.

[0:12] Note how we're no longer using React.createElement and instead, we're using a custom JSX function. We can change the name of this function to be anything.

[0:23] Importantly, we have an imported a function named anything, but the resulting code won't run unless we do that. We also don't need to import React anymore, because we're not using CreateElement.

[0:34] The comment we just used was called the pragma. A pragma gives the compiler in this case, Babel, additional instructions or hints or how to compile the code. The plugin that looks for this specific pragma it's called babel-plugin-transform-react.jsx.

[0:47] If we look at the examples, we can see the pragma being used to support frameworks like React. In this case, we're using Preact.h from the Preact package, and the resulting code uses Preact.h instead of React.createElement.

[1:01] When people refer to a pragma in the context of React, they typically mean either the comment itself or the resulting function, which can be any function we define ourselves.

Course

WTF is JSX

Pragmas and babel-transform-react-jsx

Share this video with your friends