Skip to main content

@babel/preset-react

This preset always includes the following plugins:

And with the development option:

Classic runtime adds:

Automatic runtime (since v7.9.0) adds the functionality for these plugins automatically when the development option is enabled. If you have automatic runtime enabled, adding @babel/plugin-transform-react-jsx-self or @babel/plugin-transform-react-jsx-source will error.

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​

Without options:

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

With options:

babel.config.json
{
  "presets": [
    [
      "@babel/preset-react",
      {
        "runtime": "automatic", // defaults to automatic
        "importSource": "custom-jsx-library", // defaults to react(only in automatic runtime)
        "throwIfNamespace": false // defaults to true
        // "pragma": "dom", // default pragma is React.createElement (only in classic runtime)
        // "pragmaFrag": "DomFrag", // default is React.Fragment (only in classic runtime)
      }
    ]
  ]
}

Via CLI​

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

Via Node API​

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

Options​

Both Runtimes​

runtime​

classic | automatic, defaults to automatic

Added in: v7.9.0

Decides which runtime to use.

automatic auto imports the functions that JSX transpiles to. classic does not automatic import anything.

development​

boolean, defaults to true if Babel's envName id "development", and false otherwise.

This toggles behavior specific to development, such as adding __source and __self.

This is useful when combined with the env option configuration or js config files.

throwIfNamespace​

boolean, defaults to true.

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

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

pure​

boolean, defaults to true.

Enables @babel/plugin-transform-react-pure-annotations. It will mark top-level React method calls as pure for tree shaking.

React Automatic Runtime​

importSource​

string, defaults to react.

Added in: v7.9.0

Replaces the import source when importing functions.

React Classic Runtime​

pragma​

string, defaults to React.createElement.

Replace the function used when compiling JSX expressions. It should be a qualified name (e.g. React.createElement) or an identifier (e.g. createElement).

pragmaFrag​

string, defaults to React.Fragment.

Replace the component used when compiling JSX fragments. It should be a valid JSX tag name.

babel.config.js​

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

babel.config.json​

Note: the env option will likely get deprecated soon

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

You can read more about configuring preset options here