For a lot of us building for the web, whether you’re using React, Preact, Vue, Emotion, MDX, or another library that uses JSX you’ve been using a JSX pragma. Possibly without ever realizing it!
In Computer Science speak it’s a “directive” that tells a compiler how to handle the input.
In Ruby, you can do something like:
# coding: UTF-8
def foo
:bar
end
The key: value notation is used by the Ruby interpreter.
The above tells Ruby to use UTF-8 encoding.
In JavaScript, outside the context of JSX, there’s a
“pragma” to use strict mode: "use strict".
Babel now supports JSX by default and will transform JSX to the proper function call. In a React project, the following JSX:
const TomatoBox = (
<div
style={{
backgroundColor: 'tomato',
padding: '20px'
}}
>
I'm Tomato!
</div>
Would result in:
const TomatoBox = React.createElement(
'div',
{
style: {
backgroundColor: 'tomato',
padding: '20px'
}
},
"I'm Tomato!"
)
This occurs because most projects will use
@babel/plugin-transform-react-jsx
which sets a default pragma of /* jsx React.createElement */.
That’s why we end up with the React.createElement function
call.
When babel transpiles JSX it checks for a pragma, or directive, which might look like:
/* jsx h */
const TomatoBox = (
<div
style={{
backgroundColor: 'tomato',
padding: '20px'
}}
>
I'm Tomato!
</div>
Even using @babel/plugin-transform-react-jsx, we’d result
in h() function calls because it takes precedence during
babel’s transpilation.
const TomatoBox = h(
'div',
{
style: {
backgroundColor: 'tomato',
padding: '20px'
}
},
"I'm Tomato!"
)
Often times the “Computer Science” speak doesn’t make it easy to parse what’s actually happening. Sometimes using simpler words is better. I’ll go with:
It’s a fancy name for mapping function calls in JSX
— me, one day on a Zoom call