@babel/helper-builder-react-jsx

Transform JSX to React.createElement

This feature allows you to transform a JSX element into a React.createElement call. The code sample demonstrates how to create a JSX element and then transform it into a React.createElement call using the @babel/helper-builder-react-jsx package.

const t = require('@babel/types');
const buildElement = require('@babel/helper-builder-react-jsx');

const jsxElement = t.jSXElement(
  t.jSXOpeningElement(t.jSXIdentifier('div'), [], false),
  t.jSXClosingElement(t.jSXIdentifier('div')),
  [t.jSXText('Hello, world!')],
  false
);

const reactElement = buildElement({
  tagExpr: t.identifier('React.createElement'),
  tagName: 'div',
  args: [t.stringLiteral('div'), t.nullLiteral(), t.stringLiteral('Hello, world!')]
});

console.log(reactElement);

Custom JSX Pragma

This feature allows you to transform a JSX element using a custom JSX pragma function instead of React.createElement. The code sample demonstrates how to create a JSX element and then transform it using a custom pragma function called MyCustomPragma.

const t = require('@babel/types');
const buildElement = require('@babel/helper-builder-react-jsx');

const jsxElement = t.jSXElement(
  t.jSXOpeningElement(t.jSXIdentifier('MyComponent'), [], false),
  t.jSXClosingElement(t.jSXIdentifier('MyComponent')),
  [t.jSXText('Hello, custom pragma!')],
  false
);

const customPragmaElement = buildElement({
  tagExpr: t.identifier('MyCustomPragma'),
  tagName: 'MyComponent',
  args: [t.stringLiteral('MyComponent'), t.nullLiteral(), t.stringLiteral('Hello, custom pragma!')]
});

console.log(customPragmaElement);