?, VUE? JSX? ????? ?? ??? ?????. Vite ????? ?? @vitejs/plugin-vue-jsx? ???? vite.config.js?? vuejsx () ????? ??????. VUE CLI ????? ?? @vue/babel-preset-jsx? ???? babel.config.js? ?? ??? ??????. 3. ?? ?? ? ?? ??? ???? JSX ???? ???? ??? ? OnClick? ?? VUE ??? ???? ???? ??????. 4. .Vue ???? H ?? ?? ?? ??? ???? ?? JSX ??? ??? ?? ? ? ????. 5. TypeScrip? ???? ?? ??? ??? .tsx? ?????? JSX? JSX? ???? JSXimportSource? vue???. V-IF ? V-FOR? ?? ??? ??? JSX? ???? ??? ?? JavaScript ???? ???????. JSX? VUE? ??? ??? ??? ??? ?? ????? ?????. ?? ??? ?? ??? ??? ???????.

Vue? ???? JSX? ???? ??? VUE?? JSX? ??? ? ????. ?? VUE 3? ?? ???? VITE ?? VUE CLI ?? ??? ???? ??. VUE ?????? JSX? ????? ???? ??? ??? ????.

VUE?? JSX? ???? ??? ??????

Vue? ????? ???? ????? JSX? ???? ?? ? ?? ????? ??? ?????. ??? ?? ?? ??, ?? ??? ?? React ???? ?? ?? ?????.

1. JSX ??? ??????

Vite ????? ??

VUE ? JSX ????? ??????.

 npm install @vitejs/plugin-vue-jsx -d

?? ?? vite.config.js ????????.

 'vite'?? {defineconfig} ?? ??
'@vitejs/plugin-vue'?? vue ?? ??
'@vitejs/plugin-vue-jsx'?? vuejsx import

???? DefuleConfig ({
  ???? : [
    vue (),
    vuejsx ()
  ]]
})

?? .jsx ?? .tsx ??? ????? setup ???? .vue ?? ???? jsx? ? ?? ????.

Vue CLI ????

Vue Cli? ???? ?? Babel ????? ??????.

 npm install @vue/babel-preset-jsx -d

?? ?? babel.config.js ?? :

 module.exports = {
  ?? ?? : [ '@vue/babel-preset-jsx']
}

2. ?? ??? JSX? ????

?? JSX? ???? ?? ??? ??? ? ????. ??? .jsx ??? ????.

 // mybutton.jsx
'vue'?? {definecomponent} ?? ??

?? ?? ?? ???? ({
  ?? : {
    ??? : ???,
    Onclick : ??
  },
  ?? (??) {
    return () => (
      <?? onclick = {props.onclick} class = "my-button">
        {props.label}
      </??>
    ))
  }
})

?? : className ?? class ???? onclick ?? onClick ??????. VUE? DOM ???? ????.

3. .vue ???? JSX ?? (?? ??)

<script setup> ???? JSX? ?? ? ? ????.

 <???? ??>
&#39;vue&#39;?? {h} ?? ??

const renderdynamic = () => {
  return h ( &#39;div&#39;, {class : &#39;dynamic&#39;}, [
    H ( &#39;span&#39;, &#39;hello JSX Inside Vue!&#39;)
  ])))
}
</????>

<emplate>
  <div>
    <!-<template>->?? jsx? ??? ? ????
    <!-??? ??? ??? ?? ? ? ????->
    <?? ?? : is = "RenderDynamic" />
  </div>
</???>

?? <template> ???? ?? ?? setup() return?? jsx ? ??????.

4. TypeScript (.TSX)??? JSX

TypeScript .tsx ???? ?? ?? ??? ??? ?????? ??? ??????.

 'vue'?? {definecomponent} ?? ??

????? ?? {
  ?? : ???
  ???? : ??
}

?? ?? ?? ???? ({
  ?? : {
    ?? : {type : String, ?? : true},
    ??? : {?? : ??, ??? : 0}
  },
  ?? (?? : ??) {
    return () => (
      <div>
        <h1> ?????, {props.name}! </h1>
        <p> ? : {props.count} </p>
      </div>
    ))
  }
})

tsconfig.json ? JSX? ????? ??????.

 {
  "???? ??": {
    "JSX": "??",
    "jsximportsource": "vue"
  }
}

?? ???? ? ??

• ???? ??? VUE? ????? . JSX? ?? ???? ? ??????.

• JSX? ??? ??? ???? : v-if , v-for ? ?? ??? ???? ????. ?? ?? ???? ???? ??????.

   // v-if ??
  {show && <p> show </p>}
  
  // v-for ??
  {items.map (item => <div key = {item.id}> {item.label} </div>)}

• ??? ??? : onClick , onInput ?? ???? (Camelcase) ??? ?? ??????.

• v-model ?? ???? onUpdate:xxx ??????.

---

??

??? ???? VUE?? JSX? ??? ? ???? .

• ? @vitejs/plugin-vue-jsx (vite? ??) ?? babel preset (vue cli)? ??????.
• ? defineComponent ? setup ???? ??? ??? ?????.
• VUE? ??? ? ????? ???? JSX? ??????
• ? .tsx ? ?? TypeScript?? ?????

React??? ?????? ??? ?? ?? ??? ??? ?? ???? ?????.

????? VUE? ???? ?? JSX? ?????. ??? ??? ?? ??????.

? ??? VUE?? JSX? ???? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!