Playing with JSX

In The several ways to import React, Kent C. Dodds also covers a bit about JSX and “the JSX pragma”. Here’s a video of CSS Tricks’ Chris Coyier goofing around with it.

JSX is not fancy. It essentially transforms angle brackets in JavaScript into function calls. That works great for React, but because we can customize it, we can make it work for other libraries or write our own.

💁‍♂️ You can see Chris importing React using the wonderful SkyPack there.

🔗 Related:

An Overview of JSX With 3 Non-React Examples

Valeri Karpov on how JSX is transformed into JavaScript:

The JSX compiler parses all the element types, props, and children, and passes each of the nodes in the tree through a pragma. The pragma is just a fancy term for the function that JSX calls on each node. In the case of React, React.createElement is the pragma. But you can configure the pragma using an /** @jsx */ comment

Diverging from React he highlights how you use different pragmas to:

  • Build a Tree
  • Define Express Route Definitions
  • Define Mongoose Schema Definitions

An Overview of JSX With 3 Non-React Examples →

💡 The post What is JSX pragma? might come in handy to demystify React’s React.createElement pragma.