optimisation.react.inlineElements

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.

Usage

require("babel").transform("code", { optional: ["optimisation.react.inlineElements"] });
$ babel --optional optimisation.react.inlineElements script.js

Example

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
};