JSX => VDOM => DOM
Or without JSX use a (custom) html parser with templates
npm i babel-plugin-transform-react-jsx -D
babel
npm i babel-cli babel-preset-latest -D
.babelrc
{
"plugins": ["transform-react-jsx"]
}
- comment Example transpile with method "h"
/** @jsx h */
const vnode = (
<div class="container">
<h1 style="color:#444">JSX => VDOM => DOM</h1>
<img src="profile.png" />
<p>My sample <strong>text</strong></p>
<button onClick={(event) => console.log('click', event)}>Clic!</button>
</div>
);
Or
{
"plugins": [
["transform-react-jsx", {
"pragma": "h" // default pragma is React.createElement
}]
]
}
- example
// JSX
const vnode = (
<div class="container">
<h1 style="color:#444">JSX => VDOM => DOM</h1>
<img src="profile.png" />
<p>My sample <strong>text</strong></p>
<button onClick={(event) => console.log('click', event)}>Clic!</button>
</div>
);
Add a NPM Script
"scripts": {
"build": "babel --presets latest -d dist/ src/"
},
npm run build
// transpiled to =>
var vnode = h(
"div",
{ "class": "container" },
h(
"h1",
{ style: "color:#444" },
"JSX => VDOM => DOM"
),
h("img", { src: "profile.png" }),
h(
"p",
null,
"My sample ",
h(
"strong",
null,
"text"
)
),
h(
"button",
{ onClick: function onClick(event) {
return console.log('click', event);
} },
"Clic!"
)
);