babel-plugin-transform-react-inline-elements

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

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

Via .babelrc (Recommended)

.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

• [facebook/react#3228] Optimizing Compiler: Inline React Elements