Socket
Socket
Sign inDemoInstall

@babel/preset-react

Package Overview
Dependencies
60
Maintainers
4
Versions
74
Alerts
File Explorer

Advanced tools

Install Socket

Protect your apps from supply chain attacks

Install

@babel/preset-react

Babel preset for all React plugins.

    7.23.3latest
    GitHub
    npm

Version published
Maintainers
4
Weekly downloads
11,309,138
decreased by-14.66%

Weekly downloads

Package description

What is @babel/preset-react?

The @babel/preset-react npm package is a Babel preset that can be used to transform JSX into standard JavaScript. It is commonly used in React applications to allow developers to write JSX, which is a syntax extension for JavaScript that looks similar to HTML. This preset includes the necessary Babel plugins to parse and transform JSX syntax.

What are @babel/preset-react's main functionalities?

Transform JSX

Converts JSX syntax into createElement calls which are understood by React.

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

Support for React Fragments

Allows the use of React Fragments to group a list of children without adding extra nodes to the DOM.

const element = <><div>Item 1</div><div>Item 2</div></>;

Support for JSX Spread Attributes

Enables the spreading of attributes in JSX elements from an object.

const props = { firstName: 'John', lastName: 'Doe' }; const element = <div {...props} />;

Support for JSX Expression Containers

Allows embedding expressions in JSX by wrapping them in curly braces.

const name = 'world'; const element = <div>Hello, {name}!</div>;

Other packages similar to @babel/preset-react

Changelog

Source

v7.23.3 (2023-11-09)

:bug: Bug Fix
  • babel-plugin-transform-typescript
    • #16071 Strip type-only TS namespaces (@colinaaa)
  • babel-generator
  • babel-compat-data, babel-plugin-bugfix-v8-static-class-fields-redefine-readonly, babel-preset-env
  • babel-plugin-transform-object-super
  • babel-helper-module-transforms, babel-plugin-transform-modules-amd, babel-plugin-transform-modules-commonjs, babel-plugin-transform-modules-umd
:memo: Documentation
  • #16044 docs: Update links in @babel/eslint-parser README (@aryehb)
:house: Internal
  • babel-core, babel-preset-env
:running_woman: Performance
:microscope: Output optimization
  • babel-plugin-transform-computed-properties

Readme

Source

@babel/preset-react

Babel preset for all React plugins.

See our website @babel/preset-react for more information or the issues associated with this package.

Install

Using npm:

npm install --save-dev @babel/preset-react

or using yarn:

yarn add @babel/preset-react --dev

FAQs

Last updated on 09 Nov 2023

Did you know?

Socket installs a GitHub app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the 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