inline-elements.md

October 4, 2015 ยท View on GitHub

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