Quick Start

_Author: cqh_

Stackblitz Demo

https://stackblitz.com/edit/vitejs-vite-zepzmw?embed=1&file=src%2Fmain.tsx

Create a New Project

``


yarn


yarn create vite my-van-jsx --template vanilla-ts
`

`


yarn


yarn add vanjs-jsx vanjs-core
`

- Change tsconfig.json

`json
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,

/ Bundler mode /
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,

/ Linting /
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,

/ For vanjs-jsx /
"jsx": "react-jsx",
"jsxImportSource": "vanjs-jsx"
},
"include": ["src"]
}
`

$3

1. main.ts -> main.tsx

`tsx
import van from "vanjs-core";

import Hello from "./Hello";

van.add(document.getElementById("app")!, );
`

2. change index.html

`html
















`

3. Write Your Component

Hello.tsx

`tsx
interface IProps {
name: string;
}

const Hello = (props: IProps) => {
const { name } = props;
return

;
};

export default Hello;
``