@babel/preset-react

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

babel-preset-react-app

This package is similar to @babel/preset-react but is specifically tailored for Create React App projects. It includes additional Babel plugins and configurations suitable for the React scripts bundled with Create React App.

babel-preset-react-hmre

This preset is designed for hot module replacement in React applications during development. It is not a direct alternative to @babel/preset-react but offers additional functionality for a specific development workflow.

README

@babel/preset-react

Babel preset for all React plugins.

This preset always includes the following plugins:

• syntax-jsx
• transform-react-jsx
• transform-react-display-name

And with the development option:

• transform-react-jsx-self
• transform-react-jsx-source

Note: Flow syntax support is no longer enabled in v7. For that, you will need to add the Flow preset.

Installation

You can also check out the React Getting Started page

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

Usage

Via .babelrc (Recommended)

.babelrc

{
  "presets": ["@babel/react"]
}

Via CLI

babel --presets @babel/react script.js

Via Node API

require("@babel/core").transform("code", {
  presets: ["@babel/react"]
});

Options

development

boolean, defaults to false.

Toggles plugins that aid in development, such as @babel/plugin-transform-react-jsx-self and @babel/plugin-transform-react-jsx-source.

This is useful when combined with either a babelrc.js or env option in a .babelrc configuration:

babelrc.js

module.exports = {
  presets: [
    ["@babel/react", {
      development: process.env.BABEL_ENV === "development"
    }],
  ],
}

.babelrc

Note: the env option will likely get deprecated soon

{
  "presets": ["@babel/react"],
  "env": {
    "development": {
      "presets": [
        ["@babel/react", { "development": true }]
      ]
    }
  }
}