@babel/plugin-transform-react-jsx-compat
Example
In
JavaScript
var profile = (
<div>
<img src="avatar.png" class="profile" />
<h3>{[user.firstName, user.lastName].join(" ")}</h3>
</div>
);
Out
JavaScript
var profile = React.DOM.div(
null,
React.DOM.img({ src: "avatar.png", class: "profile" }),
React.DOM.h3(null, [user.firstName, user.lastName].join(" "))
);
Installation
- npm
- Yarn
- pnpm
npm install --save-dev @babel/plugin-transform-react-jsx-compat
yarn add --dev @babel/plugin-transform-react-jsx-compat
pnpm add --save-dev @babel/plugin-transform-react-jsx-compat
Usage
With a configuration file (Recommended)
babel.config.json
{
"plugins": ["@babel/plugin-transform-react-jsx-compat"]
}
Via CLI
Shell
babel --plugins @babel/plugin-transform-react-jsx-compat script.js
Via Node API
JavaScript
require("@babel/core").transformSync("code", {
plugins: ["@babel/plugin-transform-react-jsx-compat"],
});