@babel/preset-react

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 will error.

Without options:

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

With options:

Via CLI

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

Both Runtimes

`runtime`

classic | automatic, defaults to classic

Added in: v7.9.0

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 .

`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.

importSource

string, defaults to react.

Added in: v7.9.0

React Classic Runtime

`pragma`

string, defaults to React.createElement.

Replace the function used when compiling JSX expressions.

`pragmaFrag`

, 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.

`useSpread`

boolean, defaults to false.

Added in: v7.7.0

When spreading props, use inline object with spread elements directly instead of Babel’s extend helper or Object.assign.

.babelrc

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