Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Pragmas and babel-transform-react-jsx

    Chris BiscardiChris Biscardi

    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



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    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.