@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:

• @babel/plugin-syntax-jsx
• @babel/plugin-transform-react-jsx
• @babel/plugin-transform-react-display-name

And with the development option:

• @babel/plugin-transform-react-jsx-self
• @babel/plugin-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

Without options:

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

With options:

{
  "presets": [
    ["@babel/preset-react", {
      "pragma": "dom", // default pragma is React.createElement
      "pragmaFrag": "DomFrag", // default is React.Fragment
      "throwIfNamespace": false // defaults to true
    }]
  ]
}

Via CLI

babel --presets @babel/preset-react script.js

Via Node API

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

Options

pragma

string, defaults to React.createElement.

Replace the function used when compiling JSX expressions.

pragmaFrag

string, defaults to React.Fragment.

Replace the component used when compiling JSX fragments.

useBuiltIns

boolean, defaults to false.

Will use the native built-in instead of trying to polyfill behavior for any plugins that require one.

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:

throwIfNamespace

boolean, defaults to true.

Toggles whether or not to throw an error if a XML namespaced tag name is used. For example:

<f:image />

Though the JSX spec allows this, it is disabled by default since React's JSX does not currently have support for it.

babelrc.js

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

.babelrc

Note: the env option will likely get deprecated soon

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