React JSX transform

Turn JSX into React function calls.

Turn JSX into React function calls

You can also use React without using Babel: React Without JSX

One way to do this is by manually writing React.createElement, or aliasing it to something like $

const React = require("react");
const ReactDOM = require("react-dom");
const $ = React.createElement;

ReactDOM.render(
  $("div", null, "Hello World"), // <div>Hello World</div>
  document.getElementById("root")
);

Also checkout WTF is JSX for an explanation of the syntax and how it’s just a sugar for function calls.

Example

React

In

var profile = <div>
  <img src="avatar.png" className="profile" />
  <h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;

Out

var profile = React.createElement("div", null,
  React.createElement("img", { src: "avatar.png", className: "profile" }),
  React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
);

Custom

In

/** @jsx dom */

var { dom } = require("deku");

var profile = <div>
  <img src="avatar.png" className="profile" />
  <h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;

Out

/** @jsx dom */

var dom = require("deku").dom;

var profile = dom( "div", null,
  dom("img", { src: "avatar.png", className: "profile" }),
  dom("h3", null, [user.firstName, user.lastName].join(" "))
);

Installation

npm install --save-dev babel-plugin-transform-react-jsx

Usage

Via .babelrc (Recommended)

.babelrc

Without options:

{
  "plugins": ["transform-react-jsx"]
}

With options:

{
  "plugins": [
    ["transform-react-jsx", {
      "pragma": "dom" // default pragma is React.createElement
    }]
  ]
}

Via CLI

babel --plugins transform-react-jsx script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["transform-react-jsx"]
});

Options

pragma

string, defaults to React.createElement.

Replace the function used when compiling JSX expressions.

Note that the @jsx React.DOM pragma has been deprecated as of React v0.12

useBuiltIns

boolean, defaults to false.

When spreading props, use Object.assign directly instead of Babel’s extend helper.