React inline elements transform

Replaces the React.createElement function with babelHelpers.jsx.

Replaces the React.createElement function with one that is more optimized for production: babelHelpers.jsx.

Note that this requires the global polyfill due to React's use of ES6 Symbol when validating React Elements. If Symbol is not present in the browser, your application will fail to render, as Babel will polyfill Symbol but React will not have access to that polyfill.

Therefore, you must require the global polyfill at the entry point to your application:

require("babel-polyfill");

This transform should be enabled only in production (e.g., just before minifying your code) because although it improves runtime performance, it makes warning messages more cryptic and skips important checks that happen in development mode, including propTypes.

Example

In

<Baz foo="bar" key="1"></Baz>;

Out

babelHelpers.jsx(Baz, {
  foo: "bar"
}, "1");

/**
 * Instead of
 *
 * React.createElement(Baz, {
 *   foo: "bar",
 *   key: "1",
 * });
 */

Deopt

// The plugin will still use React.createElement when `ref` or `object rest spread` is used
<Foo ref="bar" />
<Foo {...bar} />

Installation

npm install --save-dev babel-plugin-transform-react-inline-elements

Usage

.babelrc

{
  "plugins": ["transform-react-inline-elements"]
}

Via CLI

babel --plugins transform-react-inline-elements script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["transform-react-inline-elements"]
});

References