pragma - a directive indicates how the contents should be compiled
A pragma (short for "pragmatic information") is a compiler directive. It tells the compiler how it should handle the contents of a file.
An example of this in JavaScript is 'use strict' mode. 'use strict' is a directive that enables JavaScript's Strict Mode, which is a way to opt in to a more restricted variant of JavaScript. It denotes that the code should be processed in a specific way.
JSX Pragma
Pragma is just the function that transform JSX syntax to JavaScript. The default pragma in React is React.createElement.
<button type="submit">Hello</button>
is transformed to
React.createElement("button", { type: "submit" }, "Hello");
That's why we need to import React event if we don't use it explicitly!
Why use a custom JSX pragma?
Using a custom JSX pragma is useful when you want to customize the transform process of JSX => JavaScript.
How to use JSX pragma?
Add the custom pragma comment to the top of your file.
/** @jsxImportSource theme-ui */
