@babel/preset-react
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:
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
- Yarn
- pnpm
npm install --save-dev @babel/preset-react
yarn add --dev @babel/preset-react
pnpm add --save-dev @babel/preset-react
Usage
With a configuration file (Recommended)
Without options:
{
"presets": ["@babel/preset-react"]
}
With options:
{
"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
babel --presets @babel/preset-react script.js
Via Node API
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 false
.
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
module.exports = {
presets: [
[
"@babel/preset-react",
{
development: process.env.BABEL_ENV === "development",
},
],
],
};
babel.config.json
Note: the
env
option will likely get deprecated soon
{
"presets": ["@babel/preset-react"],
"env": {
"development": {
"presets": [["@babel/preset-react", { "development": true }]]
}
}
}
You can read more about configuring preset options here