babel-plugin-transform-react-jsx

Turn JSX into React function calls

Example

React

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

/** @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.

Current Tags

6.24.1 ... latest (8 years ago)
7.0.0-beta.3 ... next (7 years ago)

41 Versions

7.0.0-beta.3 ... 7 years ago
7.0.0-beta.2 ... 7 years ago
7.0.0-beta.1 ... 7 years ago
7.0.0-beta.0 ... 7 years ago
7.0.0-alpha.20 ... 7 years ago
7.0.0-alpha.19 ... 7 years ago
7.0.0-alpha.18 ... 7 years ago
7.0.0-alpha.17 ... 7 years ago
7.0.0-alpha.16 ... 7 years ago
7.0.0-alpha.15 ... 7 years ago
7.0.0-alpha.14 ... 7 years ago
7.0.0-alpha.12 ... 8 years ago
7.0.0-alpha.11 ... 8 years ago
7.0.0-alpha.10 ... 8 years ago
7.0.0-alpha.9 ... 8 years ago
7.0.0-alpha.8 ... 8 years ago
6.24.1 ... 8 years ago
7.0.0-alpha.7 ... 8 years ago
7.0.0-alpha.3 ... 8 years ago
7.0.0-alpha.1 ... 8 years ago
6.23.0 ... 8 years ago
6.22.0 ... 8 years ago
6.8.0 ... 9 years ago
6.7.5 ... 9 years ago
6.7.4 ... 9 years ago
6.6.5 ... 9 years ago
6.6.4 ... 9 years ago
6.6.0 ... 9 years ago
6.5.2 ... 9 years ago
6.5.0-1 ... 9 years ago
6.5.0 ... 9 years ago
6.4.0 ... 9 years ago
6.3.13 ... 9 years ago
6.2.4 ... 9 years ago
6.2.0 ... 9 years ago
6.1.18 ... 9 years ago
6.1.17 ... 9 years ago
6.1.4 ... 9 years ago
6.0.18 ... 9 years ago
6.0.14 ... 9 years ago
6.0.2 ... 9 years ago