babel-plugin-transform-react-inline-elements
Replaces the React.createElement function with one that is more optimized for production: babelHelpers.jsx.
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
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"]
});