Socket
Socket
Sign inDemoInstall

@babel/preset-react

Package Overview
Dependencies
60
Maintainers
4
Versions
76
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@babel/preset-react

Babel preset for all React plugins.


Version published
Maintainers
4
Weekly downloads
13,509,410
decreased by-5.39%

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.17.12 (2022-05-16)

:bug: Bug Fix
  • babel-plugin-transform-react-constant-elements
    • #14536 Never hoist JSX elts referencing vars from the current scope (@nicolo-ribaudo)
  • babel-generator
    • #14524 fix: perserve parentheses of lhs id with rhs unamed fn (@JLHwung)
    • #14532 Print necessary parentheses for functions in postfix expressions (@xiawenqi)
  • babel-plugin-transform-destructuring
    • #14494 Update scope info after destructuring transform (@peey)
  • babel-parser
  • babel-parser, babel-plugin-transform-destructuring, babel-types
:house: Internal
  • babel-plugin-proposal-decorators, babel-types
  • babel-core
  • babel-core, babel-generator, babel-helper-create-class-features-plugin, babel-helper-create-regexp-features-plugin, babel-helper-module-transforms, babel-helper-plugin-utils, babel-parser, babel-plugin-bugfix-safari-id-destructuring-collision-in-function-expression, babel-plugin-bugfix-v8-spread-parameters-in-optional-chaining, babel-plugin-external-helpers, babel-plugin-proposal-async-do-expressions, babel-plugin-proposal-async-generator-functions, babel-plugin-proposal-class-properties, babel-plugin-proposal-class-static-block, babel-plugin-proposal-decorators, babel-plugin-proposal-export-default-from, babel-plugin-proposal-export-namespace-from, babel-plugin-proposal-function-sent, babel-plugin-proposal-json-strings, babel-plugin-proposal-logical-assignment-operators, babel-plugin-proposal-nullish-coalescing-operator, babel-plugin-proposal-object-rest-spread, babel-plugin-proposal-optional-chaining, babel-plugin-proposal-partial-application, babel-plugin-proposal-pipeline-operator, babel-plugin-proposal-private-methods, babel-plugin-proposal-private-property-in-object, babel-plugin-proposal-record-and-tuple, babel-plugin-proposal-unicode-property-regex, babel-plugin-syntax-decorators, babel-plugin-syntax-destructuring-private, babel-plugin-syntax-flow, babel-plugin-syntax-import-assertions, babel-plugin-syntax-pipeline-operator, babel-plugin-syntax-record-and-tuple, babel-plugin-syntax-typescript, babel-plugin-transform-arrow-functions, babel-plugin-transform-async-to-generator, babel-plugin-transform-block-scoping, babel-plugin-transform-classes, babel-plugin-transform-computed-properties, babel-plugin-transform-destructuring, babel-plugin-transform-duplicate-keys, babel-plugin-transform-flow-comments, babel-plugin-transform-flow-strip-types, babel-plugin-transform-for-of, babel-plugin-transform-instanceof, babel-plugin-transform-jscript, babel-plugin-transform-literals, babel-plugin-transform-modules-amd, babel-plugin-transform-modules-commonjs, babel-plugin-transform-modules-systemjs, babel-plugin-transform-modules-umd, babel-plugin-transform-named-capturing-groups-regex, babel-plugin-transform-new-target, babel-plugin-transform-parameters, babel-plugin-transform-property-mutators, babel-plugin-transform-proto-to-assign, babel-plugin-transform-react-constant-elements, babel-plugin-transform-react-jsx, babel-plugin-transform-reserved-words, babel-plugin-transform-runtime, babel-plugin-transform-spread, babel-plugin-transform-template-literals, babel-plugin-transform-typeof-symbol, babel-plugin-transform-typescript, babel-preset-env, babel-preset-flow, babel-preset-react, babel-preset-typescript, babel-traverse, babel-types

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 16 May 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