Socket
Socket
Sign inDemoInstall

@babel/plugin-transform-react-jsx

Package Overview
Dependencies
56
Maintainers
4
Versions
91
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@babel/plugin-transform-react-jsx

Turn JSX into React function calls


Version published
Maintainers
4
Weekly downloads
15,197,876
decreased by-8.61%

Weekly downloads

Package description

What is @babel/plugin-transform-react-jsx?

The @babel/plugin-transform-react-jsx package is a Babel plugin that transforms JSX syntax into standard JavaScript function calls that browsers can understand. JSX is a syntax extension for JavaScript that is typically used with React to describe what the UI should look like. By transforming JSX into JavaScript, this plugin allows developers to write their components in a more readable and expressive way while still being able to run them in environments that do not understand JSX natively.

What are @babel/plugin-transform-react-jsx's main functionalities?

Transform JSX to React.createElement calls

This feature transforms JSX syntax into equivalent React.createElement calls. The above JSX code would be transformed into something like: React.createElement('div', { className: 'greeting' }, 'Hello, world!');

const element = <div className='greeting'>Hello, world!</div>;

Custom pragma support

This feature allows the use of a custom pragma (a comment that specifies which function to use instead of React.createElement) to tell Babel to use a different function to create elements. The above code would be transformed to use myCreateElement instead of React.createElement.

/** @jsx myCreateElement */ const element = <div className='greeting'>Hello, world!</div>;

Fragment syntax support

This feature supports the transformation of React Fragment syntax into React.createElement calls. The above code would be transformed into React.createElement(React.Fragment, null, React.createElement(ChildA, null), React.createElement(ChildB, null));

const element = <> <ChildA /> <ChildB /> </>;

Other packages similar to @babel/plugin-transform-react-jsx

Changelog

Source

v7.19.0 (2022-09-05)

:eyeglasses: Spec Compliance
  • babel-parser
    • #14666 Support private name in decorator member expression (@JLHwung)
  • babel-helpers, babel-plugin-proposal-async-generator-functions, babel-preset-env, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime
:rocket: New Feature
  • babel-generator, babel-helpers, babel-parser, babel-plugin-proposal-decorators, babel-plugin-syntax-decorators, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime
  • babel-parser
  • babel-generator, babel-parser
  • babel-standalone
  • babel-helper-create-regexp-features-plugin, babel-helpers, babel-plugin-proposal-duplicate-named-capturing-groups-regex, babel-plugin-transform-named-capturing-groups-regex, babel-standalone
:bug: Bug Fix
  • babel-helper-function-name, babel-helper-wrap-function, babel-plugin-transform-classes
    • #14897 Fix: class transform should not drop method definition when key contains non-BMP characters (@JLHwung)
  • babel-plugin-transform-typescript
  • babel-parser
  • babel-helper-builder-react-jsx
:nail_care: Polish
:memo: Documentation
:house: Internal
  • babel-standalone
  • babel-core, babel-parser, babel-traverse

Readme

Source

@babel/plugin-transform-react-jsx

Turn JSX into React function calls

See our website @babel/plugin-transform-react-jsx for more information.

Install

Using npm:

npm install --save-dev @babel/plugin-transform-react-jsx

or using yarn:

yarn add @babel/plugin-transform-react-jsx --dev

Keywords

FAQs

Last updated on 05 Sep 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc