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.
输入
var profile = <div>
<img src="avatar.png" className="profile" />
<h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;
输出
var profile = React.createElement("div", null,
React.createElement("img", { src: "avatar.png", className: "profile" }),
React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
);
输入
/** @jsx dom */
var { dom } = require("deku");
var profile = <div>
<img src="avatar.png" className="profile" />
<h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;
输出
/** @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(" "))
);
npm install --save-dev babel-plugin-transform-react-jsx
.babelrc（推荐）.babelrc
没有配置:
{
"plugins": ["transform-react-jsx"]
}
使用配置:
{
"plugins": [
["transform-react-jsx", {
"pragma": "dom" // default pragma is React.createElement
}]
]
}
babel --plugins transform-react-jsx script.js
require("babel-core").transform("code", {
plugins: ["transform-react-jsx"]
});
pragmastring，默认为 React.createElement。
替换在编译 JSX 表达式时使用到的函数。
请注意 @jsx React.DOM 编译指示从 React v0.12 开始已被弃用。
useBuiltInsboolean，默认为 false。
当传递 props 时，直接使用 Object.assign 而不是使用 Babel 的 helper 扩展。