JSX→JS変換

npm install --save-dev @babel/core @babel/cli @babel/preset-react
npx babel test.jsx --out-file test.js

.babelrc

{
"presets": ["@babel/preset-react"]
}

例1

test.jsx

const element = <div className="box">Hello, JSX!</div>;

test.js

const element = /*#__PURE__*/React.createElement("div", {
className: "box"
}, "Hello, JSX!");

例2

test.jsx

const card = (
<div id="card">
<h2>Title</h2>
<p>Content</p >
</div>
);

test.js

const card = /*#__PURE__*/React.createElement("div", {
id: "card"
}, /*#__PURE__*/React.createElement("h2", null, "Title"), /*#__PURE__*/React.createElement("p", null, "Content"));

例3

test.jsx

<button onClick={() => alert('Clicked!')}>Click Me</button>

test.js

/*#__PURE__*/React.createElement("button", {
onClick: () => alert('Clicked!')
}, "Click Me");