@babel/helper-builder-react-jsx

What is @babel/helper-builder-react-jsx?

@babel/helper-builder-react-jsx is a Babel helper module that assists in transforming JSX syntax into JavaScript. It is primarily used internally by Babel plugins to handle JSX transformations, making it easier to convert JSX elements into the corresponding React.createElement calls or other custom JSX pragma functions.

What are @babel/helper-builder-react-jsx's main functionalities?

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);

Other packages similar to @babel/helper-builder-react-jsx

babel-plugin-transform-react-jsx

babel-plugin-transform-react-jsx is a Babel plugin that transforms JSX syntax into React.createElement calls. It is similar to @babel/helper-builder-react-jsx in that it handles JSX transformations, but it is a higher-level plugin that can be used directly in a Babel configuration.

babel-plugin-jsx-pragmatic

babel-plugin-jsx-pragmatic is a Babel plugin that allows you to specify a custom JSX pragma function to use instead of React.createElement. It provides similar functionality to @babel/helper-builder-react-jsx's custom pragma feature but is designed to be used as a standalone Babel plugin.

babel-plugin-transform-vue-jsx

babel-plugin-transform-vue-jsx is a Babel plugin that transforms JSX syntax into Vue render function calls. While it serves a similar purpose to @babel/helper-builder-react-jsx, it is specifically designed for use with Vue.js instead of React.

README

@babel/helper-builder-react-jsx

Helper function to build react jsx

See our website @babel/helper-builder-react-jsx for more information.

Install

Using npm:

npm install --save @babel/helper-builder-react-jsx

or using yarn:

yarn add @babel/helper-builder-react-jsx

Changelog

v7.25.9 (2024-10-22)

:bug: Bug Fix

• babel-parser, babel-template, babel-types
  • #16905 fix: Keep type annotations in syntacticPlaceholders mode (@liuxingbaoyu)
• babel-helper-compilation-targets, babel-preset-env
  • #16907 fix: support BROWSERSLIST{,_CONFIG} env (@JLHwung)
• Other
  • #16884 Analyze ClassAccessorProperty to prevent the no-undef rule (@victorenator)

:house: Internal

• babel-helper-transform-fixture-test-runner
  • #16914 remove test options flaky (@JLHwung)

:running_woman: Performance

• babel-parser, babel-types
  • #16918 perf: Make VISITOR_KEYS etc. faster to access (@liuxingbaoyu)