How to use JSX.

babel has built-in support for React v0.12 and v0.13. 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.

See the react transformer docs for more info.


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

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


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

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

See the reactCompat transformer docs for more info.

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.