Vite Setup
Bootstrap a new vite project using vanilla template.
npm create vite@latest jsx-renderer-vite -- --template vanilla
Enter the project and install the dependencies
cd jsx-renderer-vite && npm install
Then, adjust the project files so that the final structure is like this
.
├── src/
│ └── main.jsx
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
└── vite.config.js
The following files are important for this setup process
// vite.config.js
import * as v from "vite";
export default v.defineConfig({
esbuild: {
// use h as the JSX Factory function instead of React.createElement
jsxFactory: "h",
// use Fragment for JSX fragments (<>)
jsxFragment: "Fragment",
},
});
// package.json
{
"name": "jsx-renderer-vite",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"vite": "^7.1.7"
}
}
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jsx-renderer-vite</title>
</head>
<body>
<div id="app"></div>
<!-- change the value of "src" here to main.jsx -->
<script type="module" src="src/main.jsx"></script>
</body>
</html>
Creating the h Function
Now let’s implement the h() function that esbuild will call for each
JSX element.