JSX

How to use JSX.

babel has built-in support for React v0.12. Tags are automatically transformed to their equivalent React.createElement(...) and displayName is automatically inferred and added to all React.createClass calls. Completely compatible with the official JSX/React transformer even down to whitespace handling.

Blacklist

To disable this behaviour add the react transformer to your blacklist:

babel.transform("code", { blacklist: ["react"] });
$ babel --blacklist react

Pre-v0.12

You can enable the pre-v0.12 syntax with the optional reactCompat transformer:

babel.transform("code", { optional: ["reactCompat"] });
$ babel --optional reactCompat

Additional changes

These either add additional functionality or result in nicer code, they do not in any way deviate from the result of the official JSX transformer.

  • When doing export default React.createClass({}); the displayName is inferred from the current filename.
  • Adjacent string literals are concatenated.