How to use the optimisation.react.inlineElements transformer.
Converts JSX elements to object literals like {type: 'div', props: ...}
instead of calls to React.createElement
.
This transform should be enabled only in production (e.g., just before minifying your code) because although they improve runtime performance, they make warning messages more cryptic and skip important checks that happen in development mode, including propTypes.
require("babel").transform("code", { optional: ["optimisation.react.inlineElements"] });
$ babel --optional optimisation.react.inlineElements script.js
In
var profile = <Profile key={key}, userName={userName} profilePicture={profilePicture} />;
Out
var profile = {
$$typeof: _typeOfReactElement,
type: Profile,
key: key,
ref: null,
props: {
userName: userName,
profilePicture: profilePicture
},
_owner: null
};